TypeScriptを使ってみる
開発環境は、Windows 10 Pro(64bit) + node v14.17.0 + npm 6.14.13。
TypeScriptは、JavaScriptを静的型付けとオブジェクト指向で書けるような言語で、最終的にはJavaScriptに変換して使います。
1.以下のコマンドを入力して、ディレクトリを作成して、カレントディレクトリにします。
cd c:\ && mkdir ts_test && cd ts_test
2.以下のコマンドを入力して、TypeScriptをインストールします。
npm install -g typescript
3.以下のコマンドを入力して、TypeScriptがインストールしたのかチェックします
tsc -v
Version 3.7.4でした。
4.TypeScriptのコードを書いて、greeter.tsで保存。
// インターフェースのブロックにセミコロンはいらない interface Name{ firstName: string; lastName: string; } // 引数の型はNameインターフェースを守るように制約 function greeter(person: Name){ return "Hello, " + person.firstName + " " + person.lastName; } // 具体的に値を入れる let user: Name = { firstName: "Taro", lastName: "TypeScript", } document.body.innerHTML = greeter(user);
5.以下のコマンドを入力して、コンパイルします。
tsc greeter.ts
そうすると、同じディレクトリにgreeter.jsが作成されています。
中身を見てみると、以下のようになっています。
function greeter(person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = { firstName: "Taro", lastName: "TypeScript" }; document.body.innerHTML = greeter(user);
コンパイルされたJavaScriptのコード自体に型チェック機能が付与されているわけじゃないみたいですね。実行時に毎回チェックするのではなくて、コンパイル時に、型チェックは済んだということでしょうか。
6.使用する際は、HTML内のscriptタグのsrc属性にgreeter.jsを指定するだけでOKです。
7.次に、上記のコードを少し改変して、事前に想定した型とは違う型を意図的に入れてみます。
interface Name{ firstName: string; lastName: string; } function greeter(person: Name){ return "Hello, " + person.firstName + " " + person.lastName; } // string型じゃなくて、number型を入れた let user: Name = { firstName: 10, lastName: 10, } document.body.innerHTML = greeter(user);
これを実行してみると、コマンドプロンプト上に、以下のエラーが表示され、コンパイル失敗となる。
最後に、テキストエディタはVisual Studio Codeを使っているんですが、拡張プラグインのTSLintをインストールしておくと、TypeScriptのファイルを変更した場合、リアルタイムで検証して、おかしい場合は、波線で知らせてくれるので便利ですよ。
参考リンク
TypeScript: Typed JavaScript at Any Scale.
まずは5分で学ぶ!TypeScriptことはじめ | DevelopersIO
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に - エンジニアHub|Webエンジニアのキャリアを考える!
TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript
・Webブラウザ上で、TypeScriptを動作できるサイトです。