TypeScript Reference

Comments コメント

// COMMENTS
/*
MULTILINE_COMMENTS
MULTILINE_COMMENTS
*/

Console Output コンソール出力

console.log("Hello World!");

Variable and Type Inference変数と型推論

Variable Declaration 変数宣言

let VARIABLE_NAME: DATA_TYPE;
const/let VARIABLE_NAME: DATA_TYPE = VALUE;
const/let VARIABLE_NAME = VALUE;

constは再代入不可。

Naming Convention 命名規則

Naming Convention	Example	TypeScript
Lower Camel Case	varName	Variable, Function
Upper Camel Case	VarName	Class, Interface, Namespace, Enum
Screaming Snake Case	VAR_NAME	Constant
Kebab Case	var-name	Hyphens not allowed

Types データ型

型	説明	例
any	任意の型で代入を許容し、コンパイラが型チェックしない
unknown	型安全なany型
undefined	値が未定義
null	値がない
void	戻り値がない関数の戻り値の型注釈
never	値が無い	終了しない関数の戻り値, 例外が必ず発生する関数の戻り値
number	数値型	-1, 0, 0.1, 1
bigint	長整数型	9007199254740991n
boolean	論理型	true/false
string	文字列型	“Hello World”
symbol	一意で不変

let x: number = 1;
console.log(typeof x); //=> "number"
let y: null = null;
console.log(typeof y); //=> "object"

Operator 演算子

String Concatenation and Template Literal 文字列結合とテンプレートリテラル

let x: number = 1;
let type: string = typeof x;
console.log("Type of x is " + type); //=> "Type of x is number"
console.log(`Type of x is ${type}`); //=> "Type of x is number"

Conditional Branching 条件分岐

if

if (CONDITION) {
    PROCESS
} else if (CONDITION) {
    PROCESS
} else {
    PROCESS
}

Ternary Operator 三項演算子

CONDITION ? VALUE_IF_TRUE : VALUE_IF_FALSE;

switch

switch (COMPARISON_TARGET) {
    case VALUE_1:
        PROCESS_IF_VALUE_1
        break;
    case VALUE_2:
        PROCESS_IF_VALUE_2
        break;
    ...
    default:
        PROCESS_IN_OTHER_CASE
        break;
}

Loop ループ

while

while (CONDITION) {
    PROCESS
}

for

for (PREPARATION; CONDITION; PROCESS) {
    PROCESS
}

for (const ELEMENT of ARRAY) {
    PROCESS
}

for (const [INDEX, ELEMENT] of ARRAY.entries()) {
    PROCESS
}

for (const [key, value] of Object.entries(DICTIONARY)) {
    PROCESS
}

for (const key of Object.keys(DICTIONARY)) {
    PROCESS
}

for (const value of Object.values(DICTIONARY)) {
    PROCESS
}

Array 配列

let ARRAY_NAME: TYPE[];
const/let ARRAY_NAME: TYPE[] = [VALUE, VALUE, ...];
let ARRAY_NAME: Array<TYPE>;
const/let ARRAY_NAME: Array<TYPE> = [VALUE, VALUE, ...];

Dictionary 連想配列

let DICTIONARY: {[key: TYPE]: TYPE};
const/let DICTIONARY: {[key: TYPE]: TYPE} = {KEY: VALUE, ...};

Map

const MAP_NAME= new Map();
MAP_NAME.set(KEY, VALUE);
MAP_NAME.get(KEY);
for (const [key, value] of MAP_NAME) {
    PROCESS
}

Function 関数

// 名前付き関数
function FUNCTION_NAME (ARG: TYPE, ...): TYPE {
    PROCESS
}
// 関数式
const/let FUNCTION_NAME = function (ARG: TYPE, ...) {
    PROCESS
}
// アロー関数式
const/let FUNCTION_NAME = (ARG: TYPE, ...) => {
    PROCESS
}
// 引数の省略
function FUNCTION_NAME (ARG1: TYPE, ARG2?: TYPE,...): TYPE {
    PROCESS
}
// 引数のデフォルト値
function FUNCTION_NAME (ARG1: TYPE, ARG2: TYPE = DEFAULT): TYPE {
    PROCESS
}
// 可変長引数
function FUNCTION_NAME (...ARRAY: TYPE[]): TYPE {
    PROCESS
}
// 配列を引数に展開
FUNCTION_NAME (...ARRAY);

Class クラス

class CLASS_NAME {
    PROPERTY_NAME: TYPE = DEFAULT;
    ...
    METHOD_NAME (ARG: TYPE, ...): TYPE {
        PROCESS
    }
    ...
}

Constructor

class CLASS_NAME {
    ...
    constructor (ARG: TYPE, ...) {
        PROCESS
    }
    ...
}

Accessor (Getter/Setter)

class CLASS_NAME {
    ...
    get PROPERTY_NAME (): TYPE {
        ...
        return VALUE;
    }
    set PROPERTY_NAME (ARG: TYPE, ...) {
        PROCESS
    }
    ...
}

Access Modifier

class CLASS_NAME {
    private PROPERTY_NAME: TYPE = DEFAULT;
    ...
}

Access Modifier	説明
None/public	クラス内外どちらからでもアクセス可
protected	クラス内と子クラスからのみアクセス可
private	クラス内からのみアクセス可

Static Methods

class CLASS_NAME {
    ...
    static METHOD_NAME (ARG: TYPE, ...): TYPE {
        PROCESS
    }
    ...
}

Inheritance 継承

class CHILD_CLASS_NAME extends PARENT_CLASS_NAME {
    ...
}

class CHILD_CLASS_NAME extends PARENT_CLASS_NAME {
    ...
    constructor (ARG: TYPE, ...) {
        super(ARG, ...);
        PROCESS
    }
    ...
    METHOD_NAME (ARG: TYPE, ...): TYPE {
        super(ARG, ...);
        PROCESS
    }
    ...
}

Interface インターフェース

interface INTERFACE_NAME {
    PROPERTY_NAME: TYPE;
    ...
    METHOD_NAME (ARG: TYPE, ...): TYPE;
    ...
}

Index Signatures

interface INTERFACE_NAME {
    [KEYWORD: TYPE]: TYPE;
    ...
}

Tuple, Enum

Tuple

const/let TUPLE_NAME: [TYPE, ...] = [VALUE, ...]

Enum

enum ENUM_NAME {ENUMERATOR, ...}

Module

export class CLASS_NAME {...}

import {CLASS_NAME} from "MODULE_FILE_PATH"

モジュールファイルパスは拡張子を除く。

Reference 参考

JavaScript With Syntax For Types.

TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catch...

TypeScript | TypeScript入門『サバイバルTypeScript』

TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜

Typescript Book

The Concise TypeScript Book

README | TypeScript Deep Dive

TypeScript Deep Dive 日本語版 | TypeScript Deep Dive 日本語版

プログラミングTypeScript

プログラミング言語TypeScriptの解説書。TypeScriptの型に関する基礎的な内容からその応用、エラー処理の手法、非同期プログラミング、各種フレームワークの利用法、既存のJavaScriptプロジェクトのTypeScript移行の...

ゼロからわかる TypeScript入門