この記事について
YouTubeで、以下動画を視聴したので、
自分用の備忘録として超簡潔に記述しました。
なので、詳細な説明は書いてないです。
目次
コンパイルのやり方
現在のディレクトリ直下にあるindex.tsをコンパイルする場合
tsc index.ts
上記コマンド実行後、index.jsファイルが同階層に生成されます。
node index.js
型について
any型
何でもありの型。
文字列、数値、真偽値、オブジェクト等何にでもなれる型。
let name: any = "hello";
name = true;
name = 44;
name = "";
enum型
列挙型。
変数sizeは、今後、Size.SHORT,size.MEDIUM,size.TALLの3つしか代入することができない。
enum Size {
SHORT = "SHORT",
MEDIUM = "MEDIUM",
TALL = "TALL",
}
let size = Size.SHORT;
union型
型定義にOR演算子が使える型。
let name: string | number;
リテラル型
特定の値のみしか代入不可にする。
const name: "hello" = "hello";
unknown型
基本的に、any型と同じ。
any型と異なるのは、any型は、どんな型の変数にも代入できるが、unknown型は代入不可という点。
let name: unknown = "hello";
name = 44;
name = true;
name = {
type: "short",
size: "hello",
};
never型
返り値が無い型。
function add(num1:number, num2:number): never {
console.log(num1 + num2);
}
タイプエイリアス
型定義を変数化できます。
// ユニオン型の型定義を、タイプエイリアスによって行っている
let clothSize = "small" | "medium" | "tall";
let size: clothSize = "small";
関数
// 返り値が無い場合、`void`と記述
function add(num1: number, num2: number): void {
console.log(num1+num2);
}
オブジェクト 読み取り専用プロパティ
以下のように型注釈時、プロパティ名の前にreadonlyと記述すれば
そのプロパティの値は読み取り専用になる。
let obj: {
readonly name: string;
};
ラッパーオブジェクト
JavaScriptにおいて、number,string,boolean型等の変数は
全て自動ボックス化される。
つまり、これらの変数は全てオブジェクトとして扱える。
let num: number = 44;
console.log(num.toString());
また、以下のように全プロパティを読み取り専用にすることもできる。
let obj: Readonly<{
a: number,
b: number,
}>;
オブジェクトの?
型注釈時、プロパティ名の後に?を記述することで
そのプロパティが存在しなくてもOKになる。
let obj: {
name?: string;
};
obj = {};
watchモード
.tsファイルの保存時、自動でコンパイルを行ってくれるモードのこと。
-wを記述すると、watchモードになる。
tsc index.ts -w
tsconfig.json
TypeScriptを実行する際の設定ファイル
（コンパイルするJavaScriptのバージョンを変更したりできる。）
include
コンパイル対象のファイルを指定できる。
"include": [
"index.ts"
]
exclude
コンパイルの対象外のファイルを指定できる。
"exclude": [
"index.ts"
]
target
コンパイルするJavaScriptのバージョンを指定できる。
- es2016
- es6
等
sourceMap
コンパイル後、.js.mapファイルを生成する。
ブラウザのDeveloper Toolsの「ソース」タブで.tsファイル内容を閲覧できるようになる。