TypeScript學習-5分鐘上手TS教程

最近開始接觸TypeScript，準備從官網5分鐘上手TypeScript教程到手冊指南寫一系列學習筆記，本文是官網5分鐘上手TypeScript教程學習筆記。

1.安裝TypeScript

使用npm安裝(node.js包管理器)

npm install -g typescript
複製代碼

2.初識TypeScript

構建一個TypeScript文件

首先建立helloTs.ts代碼以下：

function hello(person) {
    return 'Hello'+person;
}
let user = 'xiaoming'
document.body.innerHTML = hello(user)
複製代碼

編譯代碼

因爲使用了.ts 擴展名，在html中沒法直接引用ts文件，因此咱們須要編譯成JavaScript代碼。

在命令行上運行TypeScript編譯器：

tsc helloTs.ts
複製代碼

輸出結果爲一個helloTs.js文件，它包含了和輸入文件中相同編譯後的JavaScript代碼，如今咱們來看看它。

function hello(person) {
    return 'Hello' + person;
}
var user = 'xiaoming';
document.body.innerHTML = hello(user);
複製代碼

因爲默認編譯成es5，因此只有聲明方式let轉成了var一點區別，其餘代碼同樣。

類型註解

嘗試了在ts文件裏寫js代碼編譯，接下來咱們嘗試一下TypeScript工具帶來的高級功能--類型註解。

在上述代碼中，咱們給函數hello的參數person添加:string類型註解，以下：

function hello(person: string) {
    return 'Hello'+person;
}
let user = 'xiaoming'
document.body.innerHTML = hello(user)
複製代碼

當咱們傳入的實參user爲字符串格式時，咱們進行編譯，獲得的js代碼和未添加類型註解時同樣。

TypeScript裏的類型註解是一種輕量級的爲函數或變量添加約束的方式。在上面的例子裏，咱們但願hello函數接收一個字符串格式的參數，如今咱們嘗試把參數改爲傳入一個數字：

function hello(person: string) {
    return 'Hello'+person;
}
let user = 123
document.body.innerHTML = hello(user)
複製代碼

從新編譯，會看到產生了一個錯誤：

helloTs.ts:5:33 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
5 document.body.innerHTML = hello(user)
Found 1 error.
複製代碼

這時咱們發現，TypeScript告訴咱們參數類型錯誤，儘管告訴咱們有錯誤，但TypeScript編譯器依舊會建立對應的js文件，但在這種狀況下，TypeScript會警告你代碼可能不會按預期執行。

接口(interface)

interface是TypeScript的核心原則之一，是對值所具備的結構進行類型檢查，爲這些類型命名和爲你的代碼或第三方代碼定義契約。聽起來很暈，直接上代碼看看：

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

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

let user = { firstName: "xiaoming", lastName: "xiaohong" };

document.body.innerHTML = hello(user);
複製代碼

在上述代碼裏，咱們能夠理解爲咱們能夠用interface來定義一個對象、函數或類的結構和類型，後續使用時，必須嚴格遵照定義的規則，不然將報錯。

類(class)

傳統的JavaScript程序使用函數和基於原型的繼承來建立可重用的組件，但對於熟悉使用面向對象方式的程序員來說就有些棘手，由於他們用的是基於類的繼承而且對象是由類構建出來的。 從ES6開始，咱們可以使用基於類的面向對象的方式。 使用TypeScript，容許開發者如今就使用這些特性，而且編譯後的JavaScript能夠在全部主流瀏覽器和平臺上運行。

看個例子：

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");
複製代碼

咱們聲明一個 Greeter類。這個類有3個成員：一個叫作 greeting的屬性，一個構造函數和一個 greet方法，能夠看出，咱們在引用任何一個類成員的時候都用了 this，它表示咱們訪問的是類的成員。

官網5分鐘上手TypeScript教程內容很少，看完能對TS大概有個概念，進一步學習參考--手冊。

下一步就是跟着官網手冊學習啦，加油💪