2016年12月3日土曜日

TypeScript　-- http://www.typescriptlang.org/docs/tutorial.html　の　大雑把な訳

インストール方法 npmが使えるなら
npm install -g typescript

ファイルの拡張子は、ts
greeter.ts
function greeter(person) {
    return "Hello, " + person;
}

var user = "Jane User";

document.body.innerHTML = greeter(user);
下記のコマンドを実行すると　greeter.jsが出力される。
tsc greeter.ts
greeter.tsとgreeter.jsは、空白行を除いて同じものになる。

じゃ　なにがいいの

Type annotations(タイプの注釈)

　functionの引数にannotation(注釈)をつけることができて、型が違うとエラーになる。

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);
tcs greeter.tsを実行すると


greeter.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

と表示される。
(エラーがあっても　greeter.jsはできるよ)

Interfaces

interfaceを使ってobjectの定義みたいなものができる。

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

Classes

最後に、typescriptは、class-based object-oriented programming　ができるよ
Studentというclassにはconstructorといくつかのpublicフィールドからできている
class Studentとinterfaceに関連があることに気がついたか
(firstName, lastNameがあること)
あとconstructorの引数のpublicというのは、自動的にpropertiesを作ってくれるけんね。
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);
tcs greeter.tsを実行してどんなjavascriptのコードになってるか確認してね。

TypeScript web appの実行

下に書いてある　greeter.html　を作ってブラウザで開いてみろ
<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>
あとvisual studioがどうしたとか書いてるけど　関係ないから省略
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)