女性向けエンジニアスクール
3秒でわかる
JavaScript に型の仕組みを足した言語。実行前に型の矛盾を検出でき、変換後はただの JavaScript なので動く場所は変わりません。
30秒図解
もう少し詳しく
どういうものか
TypeScript は Microsoft が開発した言語で、JavaScript の文法をそのまま含み、そこに型注釈を足せるようにしたものです。既存の JavaScript のコードは、拡張子を変えるだけで TypeScript としても通ります。tsc というコンパイラが型を検査したうえで、型情報を取り除いた JavaScript を出力します。出力されるのは普通の JavaScript なので、ブラウザでも Node.js でもそのまま動きます。
なぜ必要か
JavaScript は、undefined のプロパティを読んだり、数値のつもりで文字列を渡したりしても、その行が実行されるまで気づけません。TypeScript は、そうした矛盾を保存した瞬間にエディタ上で指摘します。
もっと効くのは補完とリファクタリングです。オブジェクトの形が型として分かっていれば、エディタがプロパティ名を出してくれます。名前を変えるときも、参照している場所を機械的に追えるので、文字列検索で当たりを付ける必要がありません。人数と行数が増えるほど差が開きます。
具体例
type User = {
id: number;
name: string;
email?: string; // 省略可能
};
function greet(user: User): string {
return `${user.name} さん、こんにちは`;
}
const users: User[] = [{ id: 1, name: "佐藤" }];
greet(users[0]);
// greet({ id: 2 }) は name が無いので<a href="/glossary/compile" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">コンパイル</a>エラー似た用語との違い
| 項目 | JavaScript | TypeScript |
|---|---|---|
| 型検査 | 無し | コンパイル時 |
| 実行時の速度 | 同じ | 同じ (型は消える) |
| 実行環境 | そのまま動く | 変換してから動かす |
型は実行時には残らないため、instanceof のように実行時に型で分岐したい場面では、型ではなく値で判定する仕組みを自分で用意します。
つまずきやすいところ
any を使うと、その値から先の型検査がすべて止まります。エラーを消すために any を置くと、消えたのはエラーだけで問題は残ります。型が分からない値は unknown で受け、使う前に絞り込むのが安全です。
もうひとつは外部から来るデータです。fetch の結果に User という型を付けても、実際に返ってくる JSON がその形である保証はどこにもありません。API のレスポンスは、型注釈ではなく zod などの検証ライブラリで実際に確かめます。型注釈は「こうであるはず」という宣言であって、検査ではありません。
tsconfig の strict を切ると null チェックが緩みます。新規に始めるなら最初から strict を有効にしておくほうが、後から直すより安く済みます。
