2019獨角獸企業重金招聘Python工程師標準>>>

轉載

TypeScript 3.0 新功能介紹（二）

TypeScript 3.0 新功能介紹（二）

New unknown top type

TypeScript 3.0引入了一種新的頂級類型unknown。
unknown是任何類型安全的對應物。
任何東西都可以分配給unknown，但是unknown的東西除了本身以及任何沒有類型斷言或基于控制流的縮小之外的任何東西都不能分配。
同樣，如果沒有先斷言或縮小到更具體的類型，則不允許對unknown操作進行操作。具體看下官方給的例子

// In an intersection everything absorbs unknowntype T00 = unknown & null; ?// null type T01 = unknown & undefined; ?// undefined type T02 = unknown & null & undefined; ?// null & undefined (which becomes never) type T03 = unknown & string; ?// string type T04 = unknown & string[]; ?// string[] type T05 = unknown & unknown; ?// unknown type T06 = unknown & any; ?// any// In a union an unknown absorbs everythingtype T10 = unknown | null; ?// unknown type T11 = unknown | undefined; ?// unknown type T12 = unknown | null | undefined; ?// unknown type T13 = unknown | string; ?// unknown type T14 = unknown | string[]; ?// unknown type T15 = unknown | unknown; ?// unknown type T16 = unknown | any; ?// any// Type variable and unknown in union and intersectiontype T20<T> = T & {}; ?// T & {} type T21<T> = T | {}; ?// T | {} type T22<T> = T & unknown; ?// T type T23<T> = T | unknown; ?// unknown// unknown in conditional typestype T30<T> = unknown extends T ? true : false; ?// Deferred type T31<T> = T extends unknown ? true : false; ?// Deferred (so it distributes) type T32<T> = never extends T ? true : false; ?// true type T33<T> = T extends never ? true : false; ?// Deferred// keyof unknowntype T40 = keyof any; ?// string | number | symbol type T41 = keyof unknown; ?// never// Only equality operators are allowed with unknownfunction f10(x: unknown) {x == 5;x !== 10;x >= 0; ?// Errorx + 1; ?// Errorx * 2; ?// Error-x; ?// Error+x; ?// Error }// No property accesses, element accesses, or function callsfunction f11(x: unknown) {x.foo; ?// Errorx[5]; ?// Errorx(); ?// Errornew x(); ?// Error }// typeof, instanceof, and user defined type predicatesdeclare function isFunction(x: unknown): x is Function;function f20(x: unknown) {if (typeof x === "string" || typeof x === "number") {x; ?// string | number}if (x instanceof Error) {x; ?// Error}if (isFunction(x)) {x; ?// Function} }// Homomorphic mapped type over unknowntype T50<T> = { [P in keyof T]: number }; type T51 = T50<any>; ?// { [x: string]: number } type T52 = T50<unknown>; ?// {}// Anything is assignable to unknownfunction f21<T>(pAny: any, pNever: never, pT: T) {let x: unknown;x = 123;x = "hello";x = [1, 2, 3];x = new Error();x = x;x = pAny;x = pNever;x = pT; }// unknown assignable only to itself and anyfunction f22(x: unknown) {let v1: any = x;let v2: unknown = x;let v3: object = x; ?// Errorlet v4: string = x; ?// Errorlet v5: string[] = x; ?// Errorlet v6: {} = x; ?// Errorlet v7: {} | null | undefined = x; ?// Error }// Type parameter 'T extends unknown' not related to objectfunction f23<T extends unknown>(x: T) {let y: object = x; ?// Error }// Anything but primitive assignable to { [x: string]: unknown }function f24(x: { [x: string]: unknown }) {x = {};x = { a: 5 };x = [1, 2, 3];x = 123; ?// Error }// Locals of type unknown always considered initializedfunction f25() {let x: unknown;let y = x; }// Spread of unknown causes result to be unknownfunction f26(x: {}, y: unknown, z: any) {let o1 = { a: 42, ...x }; ?// { a: number }let o2 = { a: 42, ...x, ...y }; ?// unknownlet o3 = { a: 42, ...x, ...y, ...z }; ?// any }// Functions with unknown return type don't need return expressionsfunction f27(): unknown { }// Rest type cannot be created from unknownfunction f28(x: unknown) {let { ...a } = x; ?// Error }// Class properties of type unknown don't need definite assignmentclass C1 {a: string; ?// Errorb: unknown;c: any; }

在JSX中支持 defaultProps

TypeScript 2.9及更早版本沒有利用JSX組件中的React defaultProps聲明。
用戶通常必須聲明屬性可選并在render中使用非null斷言，或者在導出之前使用type-assertions來修復組件的類型。
TypeScript 3.0添加支持JSX名稱空間中名為LibraryManagedAttributes的新類型別名。
在用于檢查以其為目標的JSX表達式之前，此助手類型定義組件的Props類型的轉換;
從而允許自定義，例如：如何處理提供的道具和推斷道具之間的沖突，如何映射推理，如何處理選項，以及如何組合來自不同地方的推理。
簡而言之，我們可以使用這種通用類型來模擬React的特定行為，例如defaultProps，以及某種程度上propTypes。

export interface Props {name: string; }export class Greet extends React.Component<Props> {render() {const { name } = this.props;return <div>Hello ${name.toUpperCase()}!</div>;}static defaultProps = { name: "world"}; }// Type-checks! No type assertions needed! let el = <Greet /> **注意事項**

defaultProps上的顯式類型

默認ed屬性是從defaultProps屬性類型推斷出來的。
如果添加了顯式類型注釋，例如
static defaultProps：Partial <Props>;
編譯器將無法識別哪些屬性具有默認值（因為defaultProps的類型包括Props的所有屬性）。
使用static defaultProps：Pick <Props，"name">;
相反，作為顯式類型注釋，或者不像上面的示例中那樣添加類型注釋。
對于無狀態功能組件（SFC），請使用ES2015 SFC的默認初始化程序：

function Greet({ name = "world" }: Props) {return <div>Hello ${name.toUpperCase()}!</div>; }

對@types/React的更改

仍然需要在@types/React中將LibraryManagedAttributes定義添加到JSX名稱空間的相應更改。
請記住，有一些限制。

/// <reference lib="..." />引用指令

TypeScript添加了一個新的三斜杠引用指令(/// <reference lib="..." />)，允許文件顯式包含現有的內置lib文件。
內置的lib文件以與tsconfig.json中的"lib"編譯器選項相同的方式引用（例如，使用lib ="es2015"而不是lib ="lib.es2015.d.ts"等）。
對于在內置類型上進行中繼的聲明文件作者，例如
建議使用DOM API或內置的JS運行時構造函數（如Symbol或Iterable，三斜杠引用lib指令）。
以前這些.d.ts文件必須添加此類型的前向/重復聲明。

將/// <reference lib="es2017.string" />用于編譯中的一個文件相當于使用--lib es2017.string進行編譯。

/// <reference lib="es2017.string" />"foo".padStart(4);

介紹就這些，如果有不對或者想看具體詳情請到官網查看?http://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html

轉載于:https://my.oschina.net/zhangdapeng89/blog/1946289

總結

以上是生活随笔為你收集整理的TypeScript 3.0 新功能介绍（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。