查看TypeScript庫中原生JS的聲明文件

擁抱TypeScript

我很喜歡TypeScript。

我是名C#轉前端的程序員，當第一次看到TypeScript時，感受好熟悉，當上網查詢到TS是由微軟出品時，瞬間明白了。微軟將不少的C#特性移植到了JS上，就是TypeScript。

那TypeScript有哪些讓人喜歡的優勢呢？

1. 類型系統給我帶來穩定感。

JS的變量能夠隨意賦值一個數字或是字符串，JS的對象給人感受就是一些鍵值對的集合，能夠隨意增刪改。JS的函數能夠傳任意數目的參數。這固然也有好處，但構建大型應用時，這種不肯定性不利於理解和維護代碼。有了TS的類型系統以後，代碼會給你穩定的感受，你會清楚的知道你拿到的對象是什麼樣的類型，有哪些屬性和方法可用。

2. 類型系統給我帶來安全感。

在編碼的過程當中，若是方法都有肯定類型，類都有肯定的定義，那在寫代碼的時候，就會暴露出不少類型錯誤，而不是等到運行時才發現它。咱們的代碼更加安全了。

3. 類型系統提示的編程體驗。

最最重要的是能夠提高咱們的編程體驗。當咱們調用一個對象時，編輯器會在咱們打出點時，自動提示咱們此對象包含的全部屬性和方法，當咱們選擇咱們想要的方法時，編輯器又會解釋此方法的用意和參數的含義。代碼補全、接口提示等功能讓咱們的編程更加輕鬆了。

4. 類型系統讓代碼更加易讀。

類型信息是一層編碼以外的額外的信息，至關於咱們又多了一個維度來解釋咱們所寫的代碼。會讓代碼更加易讀。

準備工做

安裝

npm install -g typescript
複製代碼

新建項目

利用npm install新建一個項目，叫作firstTS，再新建一個文件，test.ts。顯然typescript的文件要以ts結尾。

編寫一個函數

function test() {
  const num = Math.abs(-1);
  console.log(num);
}
複製代碼

準備工做完畢，咱們將鼠標移動到Math.abs上，看到以下：

多了一個TS提示框，第一行就包含了TS的語法，入參數是x:number，表明傳入的參數要是一個數字，函數後面還跟着一個:number，表明返回值是一個數字。下面仍是這個函數的說明，參數說明，幫助咱們理解和使用它。

在abs上點擊右鍵，在彈出框中選擇轉到定義，咱們就到的abs函數的聲明文件lib.es5.d.ts啦。

這也是我剛纔選擇Math對象的緣由，能夠直接轉到TS內置聲明文件，TS已經幫咱們把現有的js內置對象，都作了類型約束。咱們經過看它們，一方面熟悉TS的語法，一方面回顧一下JS的知識吧。

TypeScirpt自帶原生JS的聲明文件

進入本篇的正題，咱們經過TS的自帶原生JS聲明文件，學習一下TS的語法。

爲了方便查看，咱們在項目中引入typescript:

npm install typescript
複製代碼

剛纔咱們沒有引入typescript庫啊，爲啥也能看到Math.abs的ts聲明呢？緣由是咱們使用的vscode編輯器，目前已經內置了typescript。不用我們引用，就能夠給出ts的提示了。

而後咱們就在項目中的node_modules文件夾下，看到一個typescript文件夾，以下圖：

打開它，看看裏面是什麼

cs，de到zh-tw都是跟本地化相關的，直接略過。下面有很是多的.d.ts文件。第一個知識點來了。

聲明文件

聲明文件以 .d.ts 爲後綴，例如：

lib.es5.d.ts
複製代碼

聲明文件的做用：爲第三方庫定義類型，讓使用者得到對應的代碼補全、接口提示等功能。

咱們也看到了聲明文件的做用，在咱們編寫的Math.abs這句代碼上，鼠標指上去有提示框，轉到定義就到了lib.es5.d.ts這個聲明文件了。

再看看聲明文件內的內容吧。咱們先從lib.d.ts開始看，以下：

/// <reference no-default-lib="true"/>


/// <reference lib="es5" />
/// <reference lib="dom" />
/// <reference lib="webworker.importscripts" />
/// <reference lib="scripthost" />
複製代碼

這又是什麼，知識點又來了，看看三斜槓加reference標籤表明什麼？

：此指令容許文件顯式包含現有的內置lib文件。好比es5，就是表明引用了lib.es5.d.ts。也就是說lib.d.ts是下面這四個聲明文件的集合，總體做爲一個輸出。

咱們看到lib文件下有不少的*.d.ts文件，非別對es5,es6,es2016等這種版本做了類型約束，你們能夠都打開看看。

回頭來看lib.d.ts文件。dom,webworker.importscripts,scripthost這三個聲明文件咱們均可以不看，重點看看lib.es5.d.ts吧。

lib.es5.d.ts下的內容

頭兩句代碼是這樣的：

declare var NaN: number;
declare var Infinity: number;
複製代碼

又碰到了一個新的關鍵字：declare。

declare就是聲明的意思，這裏不是真的定義了一個var NaN變量，而是告訴咱們NaN這麼個變量，是個數字。咱們試試這個NaN變量。

function test() {
  let num: number;

  num = '嗯哼';
  num = NaN;

  console.log(num);

}
複製代碼

咱們爲num添加了一個number類型約束，而後爲num賦值個字符串，以下圖，提示錯誤，可是賦值NaN，就沒有報錯，這就符合咱們對NaN的認知，在Js的知識中，它就是表明一個數字 。

這裏再介紹一個知識點，類型推斷。

function test() {
  let num = Math.abs(-1);

  num = '嗯哼';

  console.log(num);

}
複製代碼

如上面的代碼，賦值字符串的時候，一樣會報錯。以下圖

這裏咱們沒有給num設置類型約束啊，可是ts會由於Math.abs的返回值類型，推斷出num是個數字類型。至關於爲其加了類型約束了。

咱們接着往下看，是一些declare function，都是js內置函數的定義。eval，parseInt等，這裏看一下parseInt，encodeURIComponent，上面有兩個TS的知識點：

declare function parseInt(s: string, radix?: number): number;

declare function encodeURIComponent(uriComponent: string | number | boolean): string;
複製代碼

parseInt是咱們經常使用的轉化字符串到數字的函數，第二個參數上多了個問好，意思是能夠傳，能夠不傳。

encodeURIComponent的參數，用豎線分割，意思是參數便可以傳字符串，又能夠傳數字，又能夠傳佈爾值。

接下來，最主要的就是Object類型的聲明瞭，咱們來看一下：

interface Object {
    /** The initial value of Object.prototype.constructor is the standard built-in Object constructor. */
    constructor: Function;

    /** Returns a string representation of an object. */
    toString(): string;

    /** Returns a date converted to a string using the current locale. */
    toLocaleString(): string;

    /** Returns the primitive value of the specified object. */
    valueOf(): Object;

    /**
      * Determines whether an object has a property with the specified name.
      * @param v A property name.
      */
    hasOwnProperty(v: PropertyKey): boolean;

    /**
      * Determines whether an object exists in another object's prototype chain. * @param v Another object whose prototype chain is to be checked. */ isPrototypeOf(v: Object): boolean; /** * Determines whether a specified property is enumerable. * @param v A property name. */ propertyIsEnumerable(v: PropertyKey): boolean; } 複製代碼

首先是interface關鍵字，不一樣於基礎的數字，字符串類型，Object是一個對象了，在TS中也是一種結構，對結構進行類型檢查，就要使用interface。從上面的代碼中，咱們能夠看到Oject在JS中的屬性和方法了。

注意下面還有一個interface ObjectConstructor 。

interface ObjectConstructor {
    new(value?: any): Object;
    (): any;
    (value: any): any;

    ... // 這裏還有不少方法。
}
    
複製代碼

這裏面就是Object做爲構造器，所擁有的方法，而不是Object對象，擁有的方法。文件下面還有更多內容，感興趣的同窗能夠自行查看，遇到不懂得關鍵字，能夠在官網上查看。

結束語

本篇文章就介紹到這裏，感興趣的同窗能夠一塊兒研究，共同窗習TypeScript。