ts-js-relationship

TypeScript と JavaScript の関係を理解する

概要

TypeScript は、静的型を追加した JavaScript のスーパーセットです。

有効な JavaScript はすべて有効な TypeScript ですが、TypeScript では型注釈と型チェックが追加されています。この関係を理解することは、TypeScript を効果的に使ううえで基本となります。

このスキルを使う場面

• JavaScript 開発者に TypeScript を説明するとき
• JavaScript のコードベースを移行するとき
• TypeScript が JavaScript に何を追加するのか分からないとき
• TypeScript を使うかどうか判断するとき

鉄則

REMEMBER: TypeScript compiles to JavaScript. Types exist only at compile time.

重要な事実：

• JavaScript はすべて、構文上有効な TypeScript です
• TypeScript では型注釈（: string、: number など）が追加されます
• JavaScript にコンパイルすると、型は消去されます
• TypeScript は実行時より前に、静的にエラーを検出します

スーパーセットとしての TypeScript

// This is valid JavaScript AND valid TypeScript:
let city = 'new york city';
console.log(city.toUpperCase());

// This is TypeScript (not valid JavaScript):
function greet(who: string) {
  console.log('Hello', who);
}

: string は型注釈で、TypeScript 固有の構文です。

TypeScript はコードを実行せずにエラーを検出します

let city = 'new york city';
console.log(city.toUppercase());
//              ~~~~~~~~~~~ Property 'toUppercase' does not exist on type
//                          'string'. Did you mean 'toUpperCase'?

TypeScript はコードを実行せずに、バグ（メソッド名の誤字）を検出しました。

型注釈で意図を明確にする

型注釈がない場合、TypeScript は推測します。

const states = [
  {name: 'Alabama', capitol: 'Montgomery'},  // 'capitol' - typo!
  {name: 'Alaska', capitol: 'Juneau'},
];

for (const state of states) {
  console.log(state.capital);  // TypeScript suggests 'capitol' - wrong!
}

型注釈があると、TypeScript は実際のエラーを検出します。

interface State {
  name: string;
  capital: string;  // Correct spelling
}

const states: State[] = [
  {name: 'Alabama', capitol: 'Montgomery'},
  //               ~~~~~~~ Did you mean to write 'capital'?
];

TypeScript は JavaScript の実行時の挙動をモデル化します

TypeScript では、実行時に動作する風変わりな JavaScript も使用できます。

const x = 2 + '3';  // OK, result is "23"
const y = '2' + 3;  // OK, result is "23"

ただし、間違いである可能性が高いものには警告します。

const a = null + 7;
//        ~~~~ The value 'null' cannot be used here.

alert('Hello', 'TypeScript');
//             ~~~~~~~~~~~~ Expected 0-1 arguments, but got 2

TypeScript の型システムは健全ではありません

型チェックを通過しても、実行時に例外が発生するコードがあります。

const names = ['Alice', 'Bob'];
console.log(names[2].toUpperCase());
// No type error, but throws: Cannot read properties of undefined

TypeScript は配列のアクセスが範囲内だと仮定しますが、常にそうとは限りません。

プレッシャーへの対処手順

1. 「TypeScript は別の言語です」

懸念：「TypeScript 用にすべて書き直さなければなりません」

回答： JavaScript はすべて、すでに有効な TypeScript です。

対応： .js を .ts にリネームし、段階的に型を追加します。

2. 「型を書くのは余計な手間です」

懸念：「すべてに型注釈を付けたくありません」

回答： TypeScript はほとんどの型を推論します。役立つ箇所だけに注釈を付ければ十分です。

対応： 型推論に任せ、効果がある箇所に注釈を追加します。

要注意事項 — 立ち止まって再検討しましょう

• 型が実行時にも存在すると考えている
• TypeScript が実行時エラーをすべて検出すると期待している
• 「別の言語だから」という理由で TypeScript を避けている
• 型推論で十分な場合にも、過剰に型注釈を付けている

クイックリファレンス

JavaScript	TypeScript
動的型付け（実行時）	静的型付け（コンパイル時）
型注釈なし	型注釈は任意
実行時にエラーが発生	多くのエラーを実行前に検出
.js 拡張子	.ts 拡張子

要点

TypeScript は型を備えた JavaScript です。

JavaScript プログラムはすべて TypeScript プログラムです。TypeScript では、実行前のエラー検出に役立つ型注釈を任意で追加できます。コンパイル時に型は消去され、出力されるのは通常の JavaScript です。

参考資料

Dan Vanderkam 著『Effective TypeScript』項目 1：「TypeScript と JavaScript の関係を理解する」に基づいています。