5分鐘上手TypeScript踩坑

前言

最近在學習TypeScript，發現TypeScript的官方文檔中的5分鐘上手TypeScript輔導教程中會有許多新手可能很難理解的地方，因此記錄一下

聲明一下我用的版本是

npm install typescript@2.9.2 -g

之後版本可能有所不一樣

什麼是TypeScript

維基百科上說 「TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個嚴格超集，並添加了可選的靜態類型和基於類的面向對象編程。」

從名字上咱們就能夠看出 TypeScript 和 JavaScript 不一樣的地方就是type，由於 TypeScript 相較於 JavaScript 多了類型檢查這一功能，都知道 JavaScript 是一門動態類型、靜態做用域的語言，而 TypeScript 的更像變成了一門靜態類型的語言

如何運行TypeScript

瀏覽器只能運行js、html、css語言，那ts要如何運行在瀏覽器上呢，咱們要記住

瀏覽器能夠運行js
瀏覽器不能運行ts
要把ts變成js才能夠在瀏覽器上運行
tsc會把ts轉化成js

那tsc是什麼，如何獲取呢，須要咱們學會使用npm，而後安裝

npm install -g typescript

就能夠獲得tsc和ts-node這兩個命令了

構建第一個TypesScript文件

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

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

由於上面咱們說過瀏覽器不能運行ts，而document.body.innerHTML又須要咱們在瀏覽器上運行，因此咱們須要先把ts文件轉化成js文件，這樣會比較麻煩，因此下面我都建議改爲用console.log

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

let user = "Jane User";

console.log(greeter(user));

而後

ts-node greeter.ts

能夠在終端中直接打出輸出結果

類型註解

在上面的代碼中，咱們還看不出ts和js的區別，下面對上面的代碼進行一個改變

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

let user = "Jane User";

console.log(greeter(user));

在參數後加個冒號而後加個類型，這樣就至關於給參數加上的了一層禁錮，當你輸入的參數並非字符串類型的時候

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

let user = 123;

console.log(greeter(user));

進行編譯轉化成js的時候就會報錯，以下

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

這樣子你發現錯誤的時機就從運行到瀏覽器上階段提早到了編譯階段

另外值得一提的是若是，參數是undefined，那麼類型檢查並不會報錯，例如

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

let user = undefined;

console.log(greeter(user));

運行以後會正確輸出

Hello, undefined

接口

學過 java 或者 c# 的人可能會很熟悉這個，就是至關於規定了一個對象必定須要包含幾個屬性，例如官方文檔所給的例子，若是咱們的對象不符合規則少寫一個屬性

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

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

let user = { firstName: "Jane"};

console.log(greeter(user));

就會報錯

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

它仍然是能夠正常運行的

類

TypeScript 的類的建立有點像 ES6 可是多了一個 public 的關鍵詞，熟悉 java 的同窗可能會知道，可是在ts中這個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));

實際上就至關於

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的解讀，我也在繼續學習當中，ts相較與js更加嚴格，能夠在js運行以前發現錯誤，代碼更不容易出現bug，看得出來是js從動態類型向靜態類型的一種轉變，可是上面我寫的時候也發現，undefined類型並無檢查出來，因此可能還在不停完善中，可是不得不認可TypeScript開發會更舒服