「譯」深刻typescript系列1

爲何要用typescript

這裏列舉了兩個主要的目的

• typescript爲js提供了可選的類型系統(type system)
• typescript爲當前的js引擎提供了將來JS版本才能使用的特性

typescript的類型系統

你獲取想知道爲何要給javascript添加類型系統呢？

類型系統已經被證實是一種能夠加強代碼質量和可讀性的能力，大型團隊（例如谷歌，微軟，facebook）都在印證着這個結論，更具體點說：

• 當要進行代碼重構時，類型系統能給予更高的靈活度，由於在編譯時進行異常捕獲要好於在運行時
• 類型系統是最好的文檔格式之一，函數簽名（function signature）是一個定理，而函數體則是相應的證實（proof）

typescript會盡可能保持一個低門檻，來保證開發者能夠低成本的學習編寫ts代碼

你的js代碼就是ts代碼

typescript爲js提供了編譯時的類型檢查，最棒的是類型徹底是可選的，你的js代碼（.js文件）能夠重命名成（.ts）文件，typescript一樣會返回和原有js文件同樣的輸出。經過可選的類型檢查，typescript就是嚴格的js超集。

類型能夠是隱式的

在代碼開發階段，typescript會盡量用比較低的成本去推斷儘量多的類型信息，例如，在接下來的例子中，typescript將會知道foo是number類型，當在第二行代碼中又給foo賦值爲一個字符串類型的值時，就會報出錯誤

var foo = 123;
  foo = '456'; // Error: cannot assign `string` to `number`
複製代碼

這種類型推斷具備良好的動機，若是你也有像上述例子類似的場景，在接下來的代碼中，並不肯定foo究竟是number類型仍是string類型，這樣的問題在大型的多文件代碼庫中常常能碰到，咱們稍後會繼續深刻了解類型推斷的規則。

類型能夠是顯式的

根據咱們在以前提到的，typescript將會盡能安全的進行類型的推斷，然而，也可使用註解去明確達到下面兩個目的

• 有助於編譯器進行友好的提示，還有就是對於那些不得不閱讀你代碼的開發者，文檔的填充也是很是重要的
• 強制讓在編譯器上看到的提示就是你但願讓用戶（閱讀你代碼的開發者）看到的提示，也就是說，你對於代碼的理解匹配了代碼的算法分析（這一步經過編譯器來完成）

typescript是用尾隨式的類型註解

var foo: number = 123;
複製代碼

下面這個例子編譯器將會拋出一個error

var foo: number = '123'; // Error: cannot assign a `string` to a `number`
複製代碼

咱們會在後續章節討論註解語法的細節

typescript是結構化的

在typescript中，咱們想讓js開發者以更小的學習成原本編寫ts代碼，因此類型都是結構化的，這意味着，」鴨子類型「是一種類(class)語言優先的結構，考慮下面這個例子，函數iTakePoint2D將會接收任何包含了x和y的對象做爲參數

interface Point2D {
    x: number;
    y: number;
  }
  interface Point3D {
      x: number;
      y: number;
      z: number;
  }
  var point2D: Point2D = { x: 0, y: 10 }
  var point3D: Point3D = { x: 0, y: 10, z: 20 }
  function iTakePoint2D(point: Point2D) { /* do something */ }

  iTakePoint2D(point2D); // exact match okay
  iTakePoint2D(point3D); // extra information okay
  iTakePoint2D({ x: 0 }); // Error: missing information `y`
複製代碼

類型錯誤不會阻止js代碼的運行

爲了使js代碼遷移到ts代碼更爲簡單，即便是有編譯錯誤，默認的，typescript也會觸發有效的js代碼使其正常執行

var foo = 123;
  foo = '456'; // Error: cannot assign a `string` to a `number`
複製代碼

等價於觸發下面這段js代碼

var foo = 123;
  foo = '456';
複製代碼

因此從js代碼過渡到ts代碼能夠採用逐漸更新升級的策略，這也是ts不一樣於其餘語言編譯器工做以及遷移到ts的緣由

類型能夠是調節粒度的

typescript的一個主要的設計目標就是能夠在typescript儘量簡單和安全的使用已經存在的js庫，typescript經過聲明（declaration）來達到這個目的，typescript提供了一個可變的比例針對你想在聲明文件中放置多少聲明信息，聲明的越具體，類型檢測和代碼提示就越詳細，注意，針對大多數流行的js庫已經有寫好的聲明文件[github.com/borisyankov…](DefinitelyTyped community), 因此針對大多數的目的：

• 聲明文件已經存在
• 或者至少，已經有大量的通過了review的聲明模版可用了

爲了快速定義一個本身的聲明文件，以jQuery爲例，默認的，在你使用一個變量以前，typescript都指望你首先要聲明它

$('.awesome').show(); // Error: cannot find name `$`
複製代碼

爲了快速解決這個問題，你能夠告訴typescript，這裏確實有一個叫作$的傢伙

declare var $: any;
  $('.awesome').show(); // Okay!
複製代碼

若是你想基於這個基礎的定義來提供更多的信息以防止出現編譯error，能夠這樣作

declare var $: {
    (selector:string): any;
  };
  $('.awesome').show(); // Okay!
  $(123).show(); // Error: selector needs to be a string
複製代碼

如今就能使用js的新特性

typescript提供了不少新特性針對當前的js引擎，typescript團隊也在積極的添加這些特性，這份特性列表也會隨着時間變得愈來愈豐富，這裏以一個class爲例。

class Point {
      constructor(public x: number, public y: number) {

      }
      add(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
      }
  }

  var p1 = new Point(0, 10);
  var p2 = new Point(10, 20);
  var p3 = p1.add(p2); // { x: 10, y: 30 }
複製代碼