TypeScriptとは
- JavaScriptにコンパイルされる静的型システムがついたJavaScriptの上位集合
- TypeScriptがJSに変換される際に静的型システム（型検査）が実行される
- 'use strict' モード ⇒strict モードでは、JavaScript でエラーではないが落とし穴になる一部の事柄を、エラーが発生するように変更することで除去します。 ⇒strict モードでは、JavaScript エンジンによる最適化処理を困難にする誤りを修正します: strict モードのコードは、非 strict モードの同一コードより高速に実行できることがあります ⇒strict モードでは、将来の ECMAScript で定義される予定の構文を禁止します。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode
TypeScript インストール
※npmがインストールされていることが条件
# npm install -g typescript /usr/bin/tsc -> /usr/lib/node_modules/typescript/bin/tsc /usr/bin/tsserver -> /usr/lib/node_modules/typescript/bin/tsserver + typescript@3.9.3 added 1 package from 1 contributor in 2.942s
開発IDE
- VisualStudioCodeがお勧め。何も設定せずにTypeScript対応になっている
TypeScriptをJavaScriptに変換する
- 下記のサンプルコードをindex.tsファイルをJSに変換する
let hello: string = 'hello'; console.log(hello)
# tsc index.ts
- index.jsファイルが作成される
var hello = 'hello'; console.log(hello);
なぜTypeScriptを利用するのか
- ドキュメントとして利用するため 関数を書くときに型を指定するため、作成した人以外の人が関数を利用するときに引数が一目でわかりドキュメントとしての役割を持っている サードパーティーのパッケージもTypeScriptで掛かれているものがおおいため、サードパッケージのメソッドの引数やパラメータなどの簡単にしることができる
// わかりやすいコードを書くために
function add(a: number, b:number): number {
return a + b;
}
console.log(add(3,5));
axiosのパッケージの中身。各メソッドの引数や型がわかりドキュメント側になっている。
ちなみにAxiosResponse<T>>(url: string, config?: AxiosRequestConfig)のconfig?は引数に指定しなくてもよい任意パラメータの意味である
getUri(config?: AxiosRequestConfig): string; request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>; get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>; delete<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
- Linterとして利用するため コンパイルしたときに不正なコードを検知してくる。エラーになってもjsファイルも出力される
# tsc index.ts index.ts:11:13 - error TS2582: Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`. 11 console.log(test)
- ES5へのコンパイラとして利用するため 古いバージョンのES５に変換してくれるため、2009年までの幅広いブラウザで動くものに変換してくれる. また下記のようにバージョンを指定して変換してコンパイルしてくれる
tsc index.ts --target ES6 tsc index.ts --target ES2015
