TYPESCRIPT指南（譯文）

前言

• 原文地址：flaviocopes.com/typescript/
• 原文做者：Flavio
• 譯者：Timbok
• 翻譯工具：Google Translate

本文首發於個人我的網站: Timbok.top

正文

什麼？都2019了，你還不會TypeScirpt？別擔憂，我也不會，前幾天看到一篇寫的很好的入門文章，翻譯一下，一塊兒學習。

TypeScript是2018年發展最快的技術之一。它無處不在，每一個人都在談論它。本文將指導您瞭解其關鍵概念

過去幾年中，不多有技術能有TypeScript這麼大的影響。 讓我添加一些證據，支持TypeScript。

在「The State of JavaScript 2018」調查中，近50％的受訪者表示他們使用TypeScript，並會再次使用它。超過30％的人表示他們想學習它。對此感興趣的人中有很大一部分。

TypeScript是由微軟建立的，它對於建立編程語言並不陌生，其建立者之一是Anders Hejlsberg，一位以Turbo Pascal（❤️）和Delphi而聞名的丹麥軟件工程師。我把心思放在Turbo Pascal上，由於Pascal是個人第一個編程語言，咱們在學校使用了Turbo Pascal。

它是一種開源語言，在github.com/Microsoft/T…上公開開發。

Angular是使用TypeScript的，聽說Vue.js使用TypeScript製做3.0版本。Node.js的建立者Ryan Dahl也說了不少關於它的事情。

我認爲這些東西有助於你清晰認識TypeScript。這不只僅是一種隨機的JavaScript風格，將在下個月消亡，它絕對會留下來。事實上，這意味着您可能須要在將來的項目或下一個工做中使用它。也許它會幫助你找到一份工做，因此讓咱們深刻研究它。

編寫並編譯您的第一個TYPESCRIPT文件

TypeScript開始很容易。若是您曾經寫過一行JavaScript，那麼您已經編寫了TypeScript代碼！

我所作的這個奇怪的陳述是TypeScript成功的緣由之一：它是JavaScript的嚴格超集。

這有點像SCSS的CSS。

特別是，它是ECMAScript 2015（也稱爲ES6）的超集。這意味着任何有效的JavaScript也是有效的TypeScript。

TypeScript的許多功能都等同於JavaScript。例如變量，模塊系統，迭代器等。

因此，沒有必要編寫絕對的第一個TypeScript文件，由於你已經在你不知道的狀況下寫過，讓咱們經過顯式製做一個TypeScript文件來製做一個「hello world！」，並將其編譯成JavaScript。

運行npm install -g typescript以全局安裝可以使用tsc命令使用的TypeScript編譯器。

建立一個新文件夾，而後建立一個app.ts文件。.ts是TypeScript文件擴展名。

寫下第一個程序：

const greet = () => {
  console.log('Hello world!')
}

greet()
複製代碼

這只是普通的JavaScript，但存儲在一個.ts文件中。

如今使用編譯程序tsc app.ts。結果將是一個新的JavaScript文件：app.js，包含如下內容：

var greet = function () {
    console.log('Hello world!');
};
greet();
複製代碼

TypeScript代碼已編譯爲JavaScript。JavaScript代碼稍有改動，例如你能夠注意到它添加了分號，var用來代替const和使用常規函數而不是箭頭函數。

它看起來像舊的 JavaScript，對嗎？這是由於TypeScript默認編譯爲ES5，由於這是幾乎能夠保證在全部現代瀏覽器中都支持的ECMAScript版本。您能夠將編譯目標更改成其餘版本，例如編譯爲ES2018：tsc app.ts --target ES2018：

const greet = () => {
    console.log('Hello world!');
};
greet();
複製代碼

看，這裏幾乎沒有改變咱們的原始.ts文件，除了額外的分號。

有一個很是方便的網站，可以讓您在www.typescriptlang.org/play/上使用TypeScript到JavaScript編輯。

類型

到目前爲止，咱們編譯了一個.ts文件，但咱們只編譯了純JavaScript。

您看到了TypeScript的第一個功能：您可使用現代JavaScript並將其編譯爲ES5（或更高版本），這是Babel所作的。咱們尚未使用任何TypeScript功能。

TypeScript提供的最重要的功能是類型系統：靜態類型，接口，類型推斷，枚舉，混合類型，泛型，聯合/交集類型，訪問修飾符，空檢查。

若是你曾經使用過類型語言，好比Go或C，你已經知道它是如何工做的。若是沒有，而且您只使用Python或Ruby這樣的動態語言進行編程，這對您來講是全新的，但不要擔憂。

例如，類型系統容許您向變量，函數參數和函數返回類型添加類型，從而爲程序提供更嚴格的結構。咱們編譯的JavaScript代碼沒有類型，它們在編譯階段會丟失。

如下是在TypeScript中定義字符串變量的方法：

const greeting : string = "hello!"
複製代碼

類型推斷讓咱們避免在明顯的狀況下編寫類型：

const greeting = "hello!"
複製代碼

類型由TS肯定。

這是函數接受特定類型的參數的方式：

const multiply = (a: number, b: number) => {
  return a * b
}
複製代碼

若是傳遞一個字符串給multiply()，編譯器會給你一個錯誤。

如下是函數聲明其返回值的方式：

const multiply = (a: number, b: number): number => {
  return a * b
}
複製代碼

有效類型是

• number
• string
• boolean
• enum
• void
• null
• undefined
• any
• never
• Array
• tuple

any 是一種全能類型，如其名稱所示，可識別任何類型。

類

ES2015 / ES6爲JavaScript 添加了類，做爲原型繼承的簡單語法糖。

不管喜歡與否，在引擎蓋下，JavaScript仍然使用原型繼承，具備其獨特的功能和怪癖。

TypeScript類與JavaScript類略有不一樣。緣由是TypeScript在JavaScript以前引入了類（它們是在ES2015 / ES6中引入的）。

就像在JavaScript中同樣，您以這種方式聲明類：

class Car {

}
複製代碼

默認狀況下，全部字段都是公開 您能夠將字段設置爲私有或受保護：

class Car {
  public color: string
  private name: string
  protected brand: string
}
複製代碼

就像在其餘編程語言中發生的那樣，私有字段只能在聲明它們的類中訪問。受保護的字段也只能經過派生類來訪問。

您還能夠聲明靜態字段，它們是類字段而不是對象字段：

class Car {
  static numberOfWheels = 4
}
複製代碼

您可使用構造函數初始化字段：

class Car {
  color: string
  constructor(theColor: string) {
    this.color = theColor
  }
}
複製代碼

這種簡寫語法使其更簡單：

class Car {
  constructor(public color: string) {}

  printColor() {
    alert(this.color)
  }
}

(new Car('red')).printColor()
複製代碼

字段也能夠是隻讀的：

class Car {
  readonly color: string
}
複製代碼

在這種狀況下，它的值只能在構造函數中設置。

類具備方法：

class Car {
  color: string
  constructor(public color: string) {
    this.color = color
  }
  drive() {
    console.log('You are driving the car')
  }
}
複製代碼

與純JavaScript同樣，您可使用new關鍵字從這些類建立對象：

const myCar = new Car('red')
複製代碼

而且您可使用extend關鍵字擴展示有類：

class ElectricCar extends Car {
  //...
}
複製代碼

您能夠在構造函數和方法中調用super()來調用擴展類對應的方法

類能夠定義爲抽象，這意味着須要有一個擴展它的類，並實現其最終的抽象方法：

abstract class Car {
  abstract drive()
}

class SportsCar extends Car {
  drive() {
    console.log('You are driving a sports car')
  }
}
複製代碼

訪問器

字段能夠有getter和setter。例：

class Car {
  private _color: string

  get color(): string {
    return this._color
  }

  set color(color: string) {
    this._color = color
  }
}
複製代碼

接口

接口基於基本類型構建。您能夠將接口用做類型，而且此接口能夠包含其餘類型定義：

interface SetOfNumbers {
  a: number;
  b: number;
}

const multiply = (set: SetOfNumbers) => {
  return set.a * set.b
}

multiply({ a:1, b: 2 })
複製代碼

接口也能夠是類實現的接口：

interface Car {
  name: 'string'
  new (brand: string)
  drive(): void
}

class SportsCar implements Car {
  public name
  construtor(public brand: string) {
    //...
  }
  drive() {
    console.log('You are driving a sports car')
  }
}
複製代碼

函數特色

函數可使用?來代表參數類型可選：

class Car {
  drive(kilometers?: number) {
    if (kilometers) {
      console.log(`Drive the car for ${kilometers} kilometers`)
    } else {
      console.log(`Drive the car`)
    }
  }
}
複製代碼

參數也能夠有默認值：

class Car {
  drive(kilometers = 10) {
    console.log(`Drive the car for ${kilometers} kilometers`)
  }
}
複製代碼

函數可使用...接受不一樣數量的參數：

class Car {
  drive(kilometers = 10, ...occupants: string[]) {
    console.log(`Drive the car for ${kilometers} kilometers, with those people on it:`)
    occupants.map((person) => console.log(person))
  }
}
(new Car()).drive(20, 'Flavio', 'Roger', 'Syd')
複製代碼

枚舉

枚舉是定義命名常量的一種很好的方法，遺憾的是，它不受JavaScript支持，可是被其餘語言推廣。

TypeScript爲咱們提供了枚舉：

enum Order {
  First,
  Second,
  Third,
  Fourth
}
複製代碼

TS在內部爲每一個值分配惟一標識符，咱們能夠簡單地引用Order.First，Order.Second依此類推。

您能夠顯式地爲常量指定值：

enum Order {
  First = 0,
  Second = 1,
  Third = 2,
  Fourth = 3
}
複製代碼

或者也使用字符串：

enum Order {
  First = 'FIRST',
  Second = 'SECOND',
  Third = 'THIRD',
  Fourth = 'FOURTH'
}
複製代碼

泛型

泛型是許多不一樣編程語言的一部分。簡而言之，您能夠建立一個使用不一樣類型的函數，接口或類，而無需預先指定類型。

可是在編譯時，若是你開始使用一個類型的函數，而後你改變類型（例如從數字到字符串），編譯器將拋出一個錯誤。

咱們能夠經過省略類型或使用any類型來實現這一點，可是使用泛型，全部工具都可以幫助咱們

示例語法：

function greet<T>(a : T) {
  console.log(`Hi ${a}!`)
}
greet('Flavio')
複製代碼

有趣的T符號標識通用類型。

可使用如下extends關鍵字將類型限制爲某個類或接口：

interface Greetable { name: string }
function greet<T extends Greetable>(a : T) {
  alert(`Hi ${a.name}!`)
}
greet({ name: 'Flavio'})
複製代碼

總結

這些都是TypeScript的基礎知識。詳細學習地址：

• 中文文檔：github.com/zhongsp/Typ…
• 英文文檔：www.typescriptlang.org/docs/home.h…

能力有限，水平通常，翻譯不妥之處，還望指正。感謝。