摘要：前言最近在學(xué)習(xí)，發(fā)現(xiàn)的官方文檔中的分鐘上手輔導(dǎo)教程中會有許多新手可能很難理解的地方，所以記錄一下聲明一下我用的版本是以后版本可能有所不同什么是維基百科上說是一種由微軟開發(fā)的自由和開源的編程語言。

最近在學(xué)習(xí)TypeScript，發(fā)現(xiàn)TypeScript的官方文檔中的5分鐘上手TypeScript輔導(dǎo)教程中會有許多新手可能很難理解的地方，所以記錄一下

聲明一下我用的版本是

npm install [email protected] -g

以后版本可能有所不同

維基百科上說 “TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個(gè)嚴(yán)格超集，并添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊??！?/p>

從名字上我們就可以看出 TypeScript 和 JavaScript 不同的地方就是type，因?yàn)?TypeScript 相較于 JavaScript 多了類型檢查這一功能，都知道 JavaScript 是一門動(dòng)態(tài)類型、靜態(tài)作用域的語言，而 TypeScript 的更像變成了一門靜態(tài)類型的語言

瀏覽器只能運(yùn)行js、html、css語言，那ts要如何運(yùn)行在瀏覽器上呢，我們要記住

瀏覽器可以運(yùn)行js
  瀏覽器不能運(yùn)行ts
  要把ts變成js才可以在瀏覽器上運(yùn)行
  tsc會把ts轉(zhuǎn)化成js

那tsc是什么，如何獲取呢，需要我們學(xué)會使用npm，然后安裝

npm install -g typescript

就可以得到tsc和ts-node這兩個(gè)命令了

在五分鐘上手TypeScript的文檔中，要求我們將以下代碼輸入到greeter.ts文件里

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

因?yàn)樯厦嫖覀冋f過瀏覽器不能運(yùn)行ts，而document.body.innerHTML又需要我們在瀏覽器上運(yùn)行，所以我們需要先把ts文件轉(zhuǎn)化成js文件，這樣會比較麻煩，所以下面我都建議改成用console.log

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

let user = "Jane User";

console.log(greeter(user));

然后

ts-node greeter.ts

可以在終端中直接打出輸出結(jié)果

在上面的代碼中，我們還看不出ts和js的區(qū)別，下面對上面的代碼進(jìn)行一個(gè)改變

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

let user = "Jane User";

console.log(greeter(user));

在參數(shù)后加個(gè)冒號然后加個(gè)類型，這樣就相當(dāng)于給參數(shù)加上的了一層禁錮，當(dāng)你輸入的參數(shù)并不是字符串類型的時(shí)候

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

let user = 123;

console.log(greeter(user));

進(jìn)行編譯轉(zhuǎn)化成js的時(shí)候就會報(bào)錯(cuò)，如下

greeter.ts(7,21): error TS2345: Argument of type "number" is not assignable to parameter of type "string".

這樣子你發(fā)現(xiàn)錯(cuò)誤的時(shí)機(jī)就從運(yùn)行到瀏覽器上階段提前到了編譯階段

另外值得一提的是如果，參數(shù)是undefined，那么類型檢查并不會報(bào)錯(cuò)，例如

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

let user = undefined;

console.log(greeter(user));

運(yùn)行之后會正確輸出

Hello, undefined

學(xué)過 java 或者 c# 的人可能會很熟悉這個(gè)，就是相當(dāng)于規(guī)定了一個(gè)對象一定需要包含幾個(gè)屬性，例如官方文檔所給的例子，如果我們的對象不符合規(guī)則少寫一個(gè)屬性

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

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

let user = { firstName: "Jane"};

console.log(greeter(user));

就會報(bào)錯(cuò)

greeter.ts(12,21): error TS2345: Argument of type "{ firstName: string; }" is not assignable to parameter of type "Person".
  Property "lastName" is missing in type "{ firstName: string; }".

但如果我們多寫了屬性

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

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

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

console.log(greeter(user));

它仍然是可以正常運(yùn)行的

TypeScript 的類的創(chuàng)建有點(diǎn)像 ES6 但是多了一個(gè) public 的關(guān)鍵詞，熟悉 java 的同學(xué)可能會知道，但是在ts中這個(gè)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");

console.log(greeter(user));

實(shí)際上就相當(dāng)于

class Student {
  fullName: string;
  firstName: string;
  middleInitial: string;
  lastName: string;
  constructor(firstName, middleInitial, lastName) {
    this.firstName = firstName
    this.middleInitial = middleInitial
    this.lastName = 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");

console.log(greeter(user));

以上就是對5分鐘上手TypeScript的解讀，我也在繼續(xù)學(xué)習(xí)當(dāng)中，ts相較與js更加嚴(yán)格，可以在js運(yùn)行之前發(fā)現(xiàn)錯(cuò)誤，代碼更不容易出現(xiàn)bug，看得出來是js從動(dòng)態(tài)類型向靜態(tài)類型的一種轉(zhuǎn)變，但是上面我寫的時(shí)候也發(fā)現(xiàn)，undefined類型并沒有檢查出來，所以可能還在不停完善中，但是不得不承認(rèn)TypeScript開發(fā)會更舒服