TypeScript 3.1介紹

元組和數組上的映射類型

在 TypeScript 3.1 中，元組和數組上的映射對象類型現在產生新的元組/數組，而不是創(chuàng)建一個新的類型，其中的成員，比如push()，pop()和length將被轉換。例如：

type MapToPromise<T> = { [K in keyof T]: Promise<T[K]> };

type Coordinate = [number, number]

type PromiseCoordinate = MapToPromise<Coordinate>; // [Promise<number>, Promise<number>]

MapToPromise使用一種類型T，當該類型是一個元組，例如Coordinate，它只轉換數字屬性。在[number, number]中，有兩個數字命名的屬性：0和1。當給出這樣的元組時，MapToPromise將創(chuàng)建一個新的元組，其中0和1屬性是原始類型的Promises。因此，結果類型PromiseCoordinate最終會得到類型[Promise<number>, Promise<number>]。

函數的屬性聲明

TypeScript 3.1 能夠在函數聲明和const-declared functons 上定義屬性，只需在同一范圍內分配這些函數的屬性即可。這允許我們編寫規(guī)范的JavaScript代碼而不求助于namespace。例如：

function readImage(path: string, callback: (err: any, image: Image) => void) {
    // ...
}

readImage.sync = (path: string) => {
    const contents = fs.readFileSync(path);
    return decodeImageSync(contents);
}

在這里，我們有一個以非阻塞異步方式讀取圖像的readImage函數。除了readImage外，我們在readImage提供了一個方便的函數，名為readImage.sync。

雖然ECMAScript導出通常是提供此功能的更好方式，但這種新的支持允許使用此樣式編寫的代碼“僅僅工作” TypeScript。另外，這種屬性聲明方法讓我們在React無狀態(tài)功能組件(SFCs)上表達常用模式，例如defaultProps和propTypes。

export const FooComponent => ({ name }) => (
    <div>Hello! I am {name}</div>
);

FooComponent.defaultProps = {
    name: "(anonymous)",
};

更具體地說，同態(tài)映射類型類似于上面的形式。

使用 typesVersions 進行版本選擇

來自社區(qū)的反饋以及相關的經驗告訴我們，利用最新的TypeScript功能同時也容納舊版本的用戶是很困難的。TypeScript引入了一項名為typesVersions的新功能，以幫助滿足這些方案。

在 TypeScript 3.1 中使用節(jié)點模塊分辨率時，當 TypeScript 破解打開package.json文件以確定需要讀取哪些文件時，它首先會查看名為typesVersions的新字段。帶有typesVersions字段的package.json可能如下所示：

{
  "name": "package-name",
  "version": "1.0",
  "types": "./index.d.ts",
  "typesVersions": {
    ">=3.1": { "*": ["ts3.1/*"] }
  }
}

這package.json告訴TypeScript檢查當前版本的TypeScript是否正在運行。如果它是3.1或更高版本，它會計算出您相對于包導入的路徑，并從包的ts3.1文件夾中讀取。這就是{ "*": ["ts3.1/*"] }表達的意思 - 如果你現在熟悉路徑映射，它的工作原理就是這樣的。

因此，在上面的示例中，如果我們從"package-name"中導入，在TypeScript 3.1中運行時，我們將嘗試從[...]/node_modules/package-name/ts3.1/index.d.ts（和其他相關路徑）解析。如果我們從package-name/foo導入，我們將嘗試尋找[...]/node_modules/package-name/ts3.1/foo.d.ts和[...]/node_modules/package-name/ts3.1/foo/index.d.ts。

如果我們在這個例子中沒有在 TypeScript 3.1 中運行怎么辦？好吧，如果typesVersions中沒有匹配的字段，TypeScript會回退到types字段，因此 TypeScript 3.0 及更早版本將被重定向到[...]/node_modules/package-name/index.d.ts。

匹配行為

TypeScript決定編譯器和語言版本是否匹配的方式是使用Node的semver范圍。

多個字段

typesVersions 可以支持多個字段，其中每個字段名稱由要匹配的范圍指定。

{
  "name": "package-name",
  "version": "1.0",
  "types": "./index.d.ts",
  "typesVersions": {
    ">=3.2": { "*": ["ts3.2/*"] },
    ">=3.1": { "*": ["ts3.1/*"] }
  }
}

由于范圍可能會重疊，因此確定應用哪種重定向是特定于訂單的。這意味著在上面的示例中，即使>=3.2和>=3.1匹配器都支持 TypeScript 3.2 及更高版本，反轉順序也可能有不同的行為，因此上述示例將不等同于以下示例：

{
  "name": "package-name",
  "version": "1.0",
  "types": "./index.d.ts",
  "typesVersions": {
    // NOTE: this doesn't work!
    ">=3.1": { "*": ["ts3.1/*"] },
    ">=3.2": { "*": ["ts3.2/*"] }
  }
}