typescriptまとめ
# typescriptまとめ
# TypeScriptとは
javascriptにコンパイルされる、静的型システムがついた上位集合
- 型検査に通るように書く
- javascriptの文法が使える
# インストール
npm install -g typescript
tsc(コンパイル)が使えるようになる
仕組み的にできない構文もあるので「es6 compat table」等で検索して調べられる。
tsc xxx.ts
tsc xxx.ts --target 2015
tsc xxx.ts --target ES6
2
3
# なぜtypescript?
# ドキュメントとしての側面を利用するため
関数等のdocが使える(javadoc的なもの)
?の引数は任意
# Linterとしての側面を利用するため
Linter:実行前にコードが正しいか検証するツール
コンパイル時にエラー検知できる(実行してからポチポチせずに分かる)
エディタにtypescriptが内臓されていると書いてる最中にわかる便利
⇒他のListでは使えない型での判別がある
⇒typescriptとして間違っていてもjsファイルはコンパイルされる
# ES5へのコンパイラとしての側面を利用するため(Babel的な)
ESXに対応していないブラウザにも対応できる(ES5は主流ブラウザで対応済み)
つまり、古いブラウザに対しても新しい文法で書ける
デフォルトではES3にコンパイル(トランスパイル)
# typescript実践
typescriptの型の記述 コンパイラを使う方法 typescriptでのClassの使い方 inteface 応用型 ジェネリクス(型の引数) デコレーター(@とか) 健康管理アプリ作成 モジュールとwebpack typescriptでのjavascriptライブラリの使い方 typescriptで始めるreact.js
# typescriptの型の記述
「typescriptの型」と「javascriptの型」 tsとjsの型がそれぞれある。
- typescript
tsc(jsではなくtsの型検査)⇒js変換 - javascript
javascriptエンジン(V8エンジン等)で変換される(バイナリ)が
型の概念はある(not a number等のエラーが返ってくる)
- typescript
boolean型, number型, string型
// boolean let hasValue: boolean = true; // number let count: number = 10; let float: number = 3.14; let negative: number = -10; // string let single: string = "hello"; let double: string = "hello"; let backq: string = `hello`;
1
2
3
4
5
6
7
8
9
10
11「型注釈」と「推論型」 注釈型⇒「: 型名」 推論型⇒「代入している値から推測する」 基本的に推論型でOKで、型推論ができない場合のみ注釈型を使う。
オブジェクトに型をつける
// object(カンマではなくセミコロン) const person: { // すべての型を定義する name: string; age: number; } = { name: "jack", age: 21, };
1
2
3
4
5
6
7
8
9配列に型をつけるArray型はこう使う
// Array const fruits: string[] = ["Apple", "Banana", "Grape"];
1
2Tuple型を使用して、決まった内容の配列を作る
// Tuple(pushでは追加できる) const book: [string, number, boolean] = ["business", 1500, false]; book.push(21); // 参照時にエラーが出る console.log(book[3]);
1
2
3
4
5Enum型を使ってまとまったグループを分かりやすく定義する列挙型を使う方法 特定のまとまったグループのみを受け入れる。
// Enum enum CoffeSize { SHORT = "SHORT", TALL = "TALL", GRANDE = "GRANDE", VENTI = "VENTI" } // Enum(初期化なしでもOK) enum CoffeSize { SHORT, TALL, GRANDE, VENTI } const coffee = { hot: true, size: CoffeSize.TALL }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19どんな方にもなるany型について知る
//any(typescriptは関与しない) let anything: any = true; anything = "hello"; let num = 1;
1
2
3
4Union型を使って複数の型を使う方法
//union //代入されている値によって使えるメソッド等が変わる let unionType: number | string = 10; unionType = "Hello"; let unionTypes: (number | string)[] = [10, "heelo"];
1
2
3
4
5Literal型を使って特定の値のみを取り扱う方法
//Literal //constでliteral型 //letでstring型として推論される const apple: "apple" = "apple"; //unionと使う事でenum型に似た動きができる //objectではなくただの文字列として解釈されるが、 //数が2,3個であればenumよりもすっきりかける。 const clothSize:{ color: string; size: "samll" | "medium" | "larde"; } = { color: "white", size: "larde" }
1
2
3
4
5
6
7
8
9
10
11
12
13
14typeエイリアスを使って複雑な型を適応させる方法
//typeエイリアス //ClothSize型として使用できるようになる type ClothSize = "samll" | "medium" | "larde"
1
2
3関数に型を適応させる方法
//関数の型 //戻り値の型は型推論が効くが書いておいた方が無難 function add(num1: number, num2: number): number { return num1 + num2; } //void:戻り値が存在しないとき(tsc後はundefindを返す) //ただし明示的にretun句を用いることでundifind型を定義できる function sayAny(anyStr: string):void { console.log(anyStr); }
1
2
3
4
5
6
7
8
9
10関数型を使って、特例の関数のみを代入できる変数を作る
//関数を代入する変数の型(無名関数の場合は=>の左右どちらか型がついていればOK) const anoterAdd: (n1: number, n2: number) => number = function (num1, num2) { return num1 + num2; } //アロー関数の場合は左に書く事が多い const doubleNumber: (num :number) => number = num => num * 2;
1
2
3
4
5
6
7callback関数の型をはこう書く
//コールバック関数の型 function doubleAndHandle(num: number, cb: (num: number) => number): void { const doubleNum = cb(num * 2); console.log(doubleNum); } doubleAndHandle(21, doubleNum => { return doubleNum });
1
2
3
4
5
6
7
8
9unknown型を使って、柔軟でanyよりも厳しい型を定義する方法
//unknown(anyに似ている) let unknownInput: unknown; let anyInput: any; let text: string; unknownInput = "hello"; unknownInput = 21; unknownInput = true; text = anyInput; //typeofで型を確かめてから使う if (typeof unknownInput === "string") { text = unknownInput; }
1
2
3
4
5
6
7
8
9
10
11
12never型を使って、起こりえない値の型を使用する方法
//never function error(message: string): never { throw new Error(message); } console.log("This is an Error.");
1
2
3
4
5
# コンパイラを使う方法
watchモードで保存時に自動でコンパイル
tsc index.ts (-w or --watch)
1tsconfig.json
tsconfig.jsonの作成(watchモードと併用可能)
tsc --init
1{ "complerOptions": { "target": "es6(デフォルトではes3なので状況に応じて設定)", "lib": [ "ES6", "DOM", "DOM.Iterable", "ScriptHost", ], "AllowJs": true, "CheckJs": true, "declaration": true, "declarationMap": true, "sourceMap": true, "outDir": "./dist", "rootDir": "./src", "removeComments": true, "noEmit": true, "noEmitOnError": true, "downlevelIteration": true, "noUnuserdLocals": true, "noUnuserdParameters": true, }, "include": [ "index.ts", "ワイルドカードでtscファイルを指定" ], "exculude": [ "node_modules(何か設定する場合は再定義が必要)", "**/.spec.ts", "ワイルドカードで省くファイルを指定" ], "files": [ "ワイルドカードが使用できない" "include < exculude < files" ] }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37targetを指定して、特定バージョンのJsファイルにコンパイル
libを指定して、Typescriptが用意している型の定義を追加する
allowJs, checkJs, jsx, declarationMapの設定はこう使う
SourceMapを使用して、ブラウザでTypeScriptを操作する方法(デバックしやすくする)
outDirとrootDir, removeComments, noEmit, downlevellteration1の使い方
noEmitOnErrorオプションを使って、エラーが出たときにコンパイルしない方法
nolmplicAnyやstrictNullChecksなどのstrictの設定はこう使う
綺麗なコードを書くための設定をする方法