【たいぷすくりぷと】

TypeScript とは?

💡 JavaScriptに「型の安全装置」をつけた言語
📌 このページのポイント
TypeScript ― JavaScriptに型を追加 JavaScript TypeScript 変数・関数 配列・オブジェクト クラス・Promise 型注釈 interface ジェネリクス enum 型推論 .ts ファイル 型あり コンパイル 型チェック .js ファイル ブラウザで実行可能
TypeScriptのイメージ
ひよこ ひよこ

JavaScriptと何が違うの?

ペンギン先生 ペンギン先生

TypeScriptは変数や関数に「型」を付けられるよ。function add(a: number, b: number): number のように書くと、文字列を渡した時点でエラーになる。JavaScriptだと「"1" + 2 = "12"」のようなバグが実行時まで見つからないけど、TypeScriptならコンパイル時に検出できるんだ

ひよこ ひよこ

型を書くのが面倒…

ペンギン先生 ペンギン先生

型推論が賢いから、全部書く必要はないよ。const x = 42 と書けば自動的にnumber型と判定される。ライブラリの型定義もDefinitelyTypedで提供されている。最初は面倒に感じるけど、大規模プロジェクトで「この変数何が入ってるの?」と悩む時間がゼロになるから、トータルでは開発が速くなるんだ

ひよこ ひよこ

導入するべき?

ペンギン先生 ペンギン先生

新規プロジェクトなら迷わずTypeScript一択だよ。既存のJavaScriptプロジェクトも段階的に移行できる(.jsと.tsを混在させて少しずつ変換)。ReactVueAngular全てでTypeScriptがファーストクラスサポートされていて、npm パッケージの多くが型定義を提供しているから、エコシステムの準備は万全だね

ひよこ ひよこ

おもしろい!TypeScriptのコツは?

ペンギン先生 ペンギン先生

①anyは極力使わない(型の恩恵がなくなる)、②interface と type の使い分け(拡張する場合はinterface、ユニオン型などはtype)、③strictモードを有効にする、④ジェネリクスを使いこなすと再利用性が爆上がり。最初はstrictをオフにして慣れてからオンにするのもアリだよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「TypeScript」って出てきたら「型付きのJavaScript」と思えればだいたいOK!
📖 おまけ:英語の意味
「TypeScript」 = タイプスクリプト
💬 Type(型)+ Script(スクリプト)。JavaScriptに型を足した言語だよ
← 用語集にもどる