TypeScript基礎篇

安裝TypeScript

有兩種主要的方式來獲取TypeScript工具：

• 通過npm（Node.js包管理器）
• 安裝Visual Studio的TypeScript插件

Visual Studio 2017和Visual Studio 2015 Update 3默認包含了TypeScript。 如果你的Visual Studio還沒有安裝TypeScript，你可以下載它。

針對使用npm的用戶：

> npm install -g typescript

構建你的第一個TypeScript文件

在編輯器，將下面的代碼輸入到greeter.ts文件裏：

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

類型註解

給 person函數的參數添加: string類型註解，如下：

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

TypeScript裏的類型註解是一種輕量級的爲函數或變量添加約束的方式。 在這個例子裏，我們希望 greeter函數接收一個字符串參數。 然後嘗試把 greeter的調用改成傳入一個數組：

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

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

重新編譯，你會看到產生了一個錯誤。

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

類似地，嘗試刪除greeter調用的所有參數。 TypeScript會告訴你使用了非期望個數的參數調用了這個函數。 在這兩種情況中，TypeScript提供了靜態的代碼分析，它可以分析代碼結構和提供的類型註解。

接口

 在TypeScript裏，只在兩個類型內部的結構兼容那麼這兩個類型就是兼容的。 這就允許我們在實現接口時候只要保證包含了接口要求的結構就可以，而不必明確地使用 implements語句。

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

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

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

document.body.innerHTML = greeter(user);

類

 TypeScript支持JavaScript的新特性，比如支持基於類的面向對象編程。

創建一個Student類，它帶有一個構造函數和一些公共字段。 注意類和接口可以一起共作，程序員可以自行決定抽象的級別。

還要注意的是，在構造函數的參數上使用public等同於創建了同名的成員變量。

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

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

TypeScript裏的類只是JavaScript裏常用的基於原型面向對象編程的簡寫。