Thinking more...: TypeScript 學習筆記(2) – Type annotation/Interface/Class

以下是看 Quick start 的紀錄：

Type annotation：一般動態語言是沒型別的，但 TypeScript 加上了這部份的支援，這可以讓開發者在編譯時期就預先發現型別錯誤，也可以編譯出更有效率的程式，讓程式執行的更快。語法像是 Go 或 Pascal (知道這語言的人應該不多了)，是在變數後面加上 :type，例如：
```
var str:string="hello world";
```

Interface：介面，沒啥特別的，看範例比較快

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

var user = { firstName: "Jane", lastName: "User" };

Class：大致上跟 java 的用法相似，不過在看到 QuickStart 範例時，還是驚訝了一下，主要是因為 TypeScript 語法並沒有明確指定類別實作了 Person 介面，但這個類別所產生的物件仍可以直接丟到只接介面的函式裡。後來仔細看了一下，才知道是因為 TypeScript 的 constructor (建構子)裡的參數加了 public，那麼會自動將這個參數放到同名的屬性去，也因此就符合了 Person 介面的要求。

class Student {
    fullName: string;
    // 這裡的 public firstName，等同是函式裡有 this.firstName=firstName
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

// 故意不要有 lastName
class Employee {
    constructor(public firstName) {
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

// 因為 Student 裡有 firstName, lastName 屬性，視同實作了 Person
function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

var user = new Student("Jane", "M.", "User");
var employee = new Employee("John");
console.log(greeter(user));
// console.log(greeter(employee));  // 加了這行，編譯會發生錯誤，告知 employee 不符合 Person 介面

Thinking more...

星期四, 1月 26, 2017

TypeScript 學習筆記(2) – Type annotation/Interface/Class

沒有留言: