TypeScript について知る

目次

TypeScript とは何か

tsconfig.json の覚えとくと捗る compilerOptions

function sum(num1: number, num2: number): number {
  return num1 + num2;
}

sum(1, 2); // OK
sum("1", 2); // コンパイルエラー (Argument of type 'string' is not assignable to parameter of type 'number'.)

トランスパイラ

TypeScript と JavaScript の学習

TypeScript の学習と JavaScript の学習はほぼ同義です。

冒頭で説明したように、 TypeScript は JavaScript のスーパーセットです。
単に型を付与したものです。

TypeScript で配列をソートしたい場合はどうしたら良い？という考えは無く、それは JavaScript で配列をソートする記述と同じです。

例外として、 TypeScript の記法、独自の機能や JavaScript には適用されていない EcmaScript の機能などは別途 TypeScript のバージョンに合わせて学習していく必要はあります。
本研修では、その点の補足をしつつ、 TypeScript ベースで JavaScript の学習を行うと考えてください。

Deep Dive に関しては、午後に時間が許す範囲で行います。

演習関連

準備

リポジトリの /typescript ディレクトリに移動し、 TypeScript の開発環境を用意し、実際に TypeScript を書いてみましょう。

# /typescript ディレクトリへ移動
$ cd typescript
# パッケージをインストール
$ npm i

演習問題は、 /typescript/src/standard にあります。
exercise1 から順番に問いていってみてください。

動作確認方法

TypeScript を JavaScript にトランスパイルし、トランスパイルされた JavaScript を実行して動作確認を行います。

# トランスパイル
$ npm run build  # tsc 実行
# node で実行
$ node ./dist/standard/{対象の.jsファイル名} # 相対パスで指定

次 JavaScript(TypeScript) 基礎