読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

TypeScript:Quick Startをやってみました

TypeScriptのQuick Startをやってみました。Quick StartはメニューのDocumentationからアクセスできます。

f:id:tyoshikawa1106:20160428122706p:plain

TypeScript - JavaScript that scales.

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ファイルが生成されます。
f:id:tyoshikawa1106:20160428124228p:plain


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); 


f:id:tyoshikawa1106:20160428124713p:plain


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>

f:id:tyoshikawa1106:20160428125222p:plain


Quick Startの内容はこんな感じでした。公式サイトにはサンプルコードの紹介もあります。

https://www.typescriptlang.org/samples/index.html

補足

SublimeTextでTypeScriptを利用する場合、パッケージインストールでプラグインを取得するとTypeScript拡張子のSyntaxに対応できるようになります。
f:id:tyoshikawa1106:20160428124419p:plain