Typescriptを始めたいけどどこから初めて良いかわからないという方の、TypescriptのWebサイトに掲載されていた同名のページを少しだけアレンジして紹介します。
環境の準備
まず、node.jsがPCにインストールされている必要がある。インストールされていない場合、下記のページからLTSの最新版をダウンロードしてインストールします。
https://nodejs.org/en/
Typescriptのインストール
下記のコマンドを実行して、typescriptのライブラリをダウンロードしてきます。会社の環境などで、プロキシサーバが間にある方は、プロキシありの方のコマンドを実行してください。
npm install -g typescript
npm install -g typescript
最初のTypescriptファイルの作成
まずテキストエディタを開いて、下記のJavascriptコードをgreeter.tsというファイルに保存してください。
functiongreeter(person){return"Hello, "+person;}letuser="Jane User";document.body.innerHTML=greeter(user);Typescriptコードのコンパイル
次にコマンドプロンプトを開き、さっき作ったgreeter.tsが保存されているパスに移動してから下記のコマンドを実行します。
tsc greeter.ts
実行すると、同じコードが書かれたgreeter.jsというファイルが作成されます。
次に、Typescriptが提供している機能を使ってコードを改良します。
greeterの引数にstringの型定義を追加しましょう。
functiongreeter(person:string){return"Hello, "+person;}letuser="Jane User";document.body.innerHTML=greeter(user);Typeannotations上記のコードによって、javascriptにはない型定義の機能を追加することができました。試しに、変数userに数値を入れて、greeterメソッドを呼んでみます。
functiongreeter(person:string){return"Hello, "+person;}letuser=12345;document.body.innerHTML=greeter(user);結果はこの通り。エラーが出力されました。
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
この場合でもgreeter.jsは作成され、使うこともできますが期待通りに動作しない可能性があることをTypescriptが警告を出します。
typeアノテーション
インタフェース
今度は、firstNameとlastNameを持っているオブジェクトを表現するインターフェースを作成します。Typescriptでは、
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
Classes
クラス
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
TypescriptWebAppの起動
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
デバッグ
クロームで実行したJavascriptを実行し、デバッグをしてみましょう。
コードを止めると、javascriptのコードではなく、typescriptが表示されます。
まとめ
これにより、typescriptの開発環境ができました・
typescriptはjavascriptと異なりコンパイルというプロセスが入るため、実行しなくても記述みすや型の間違いを見つけてくれます。
記述量は多少増えますが、規模が大きくなればなるほど、開発を助けてくれるはずです。
参考
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html