k01ken’s b10g

He110 W0r1d!

TypeScriptを使ってみる

開発環境は、Windows 10 Pro(64bit)。

node.jsを事前にインストールしていることが前提条件です。

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で保存します。
公式サイトのチュートリアルからコードを拝借します。
TypeScript in 5 minutes · TypeScript

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

5.以下のコマンドを入力して、コンパイルします。

tsc greeter.ts

そうすると、同じディレクトリにgreeter.jsが作成されています。

6.使用する際は、HTML内のscriptタグのsrc属性にgreeter.jsを指定するだけでOKです。


テキストエディタVisual Studio Codeを使っているんですが、拡張プラグインのTSLintをインストールしておくと、TypeScriptのファイルを変更した場合、リアルタイムで検証して、おかしい場合は、波線で知らせてくれるので便利です。

参考リンク
TypeScript - JavaScript that scales.
まずは5分で学ぶ!TypeScriptことはじめ | Developers.IO
TypeScript再入門「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に(gfx執筆) - エンジニアHub|若手Webエンジニアのキャリアを考える!