TypeScriptのQuick Startをやってみました。Quick StartはメニューのDocumentationからアクセスできます。
TypeScriptのインストール
$ npm install -g typescript
インストール後は次のコマンドでバージョンを確認できます。
$ tsc -v
TypeScriptの使い方
greeter.ts
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
次のコマンドでコンパイルします。
$ tsc greeter.ts
実行するとTSファイルを元にJSファイルが生成されます。
TypeScriptではString型などを宣言できます。
function greeter(person: string) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
型を宣言しておくと正しくない値がセットされたときにコンパイルエラーになります。
function greeter(person: string) {
return "Hello, " + person;
}
var user = [0, 1, 2];
document.body.innerHTML = greeter(user);
interfaceをつかうとデータ型が指定されたオブジェクト変数を定義できます。
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
classの作成もできます。
class Student {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
HTMLファイルを用意して動作確認します。
index.htlm
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
Quick Startの内容はこんな感じでした。公式サイトにはサンプルコードの紹介もあります。
補足
SublimeTextでTypeScriptを利用する場合、パッケージインストールでプラグインを取得するとTypeScript拡張子のSyntaxに対応できるようになります。
