TypeScript 4.1 RC 版本發佈：帶來了令人興奮的新特性

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"本月3日，微軟正式發佈了TypeScript 4.1的發佈候選（RC）版本。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"需要安裝這個RC版的同學，可以通過"},{"type":"link","attrs":{"href":"https:\/\/www.nuget.org\/packages\/Microsoft.TypeScript.MSBuild","title":"xxx","type":null},"content":[{"type":"text","text":"NuGet"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"獲取，或使用npm命令："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"npm install typescript@rc"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"你還可以通過以下方式獲得編輯器支持："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"下載Visual Studio 2019\/2017"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"按"},{"type":"link","attrs":{"href":"https:\/\/code.visualstudio.com\/Docs\/languages\/typescript#_using-newer-typescript-versions","title":"xxx","type":null},"content":[{"type":"text","text":"Visual Studio Code"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"和"},{"type":"link","attrs":{"href":"https:\/\/github.com\/Microsoft\/TypeScript-Sublime-Plugin\/#note-using-different-versions-of-typescript","title":"xxx","type":null},"content":[{"type":"text","text":"Sublime Text"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"的指南操作。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在這個版本中我們提供了一些令人興奮的新特性、新的檢查標誌、編輯器生產力更新和性能改進。下面就來看看4.1爲我們準備了哪些內容！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"引入字符串模板類型"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在映射類型中加入鍵重映射"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"遞歸條件類型"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新增檢查索引訪問功能 --noUncheckedIndexedAccess"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 path 啓用路徑映射時可以不指定 baseUrl"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"checkJs 現在默認意味着 allowJs，不再需要同時設置 checkJs 和 allowJs"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"支持 React 17 的 JSX 功能"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JSDoc @see 標籤的編輯器支持"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"重大更改"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"模板字面量（Template Literal）類型"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"我們可以使用TypeScript中的字符串字面量類型，來建模需要一組特定字符串的函數和API。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function setVerticalAlignment(color: \"top\" | \"middle\" | \"bottom\") {\n \/\/ ...\n}\n\n\nsetVerticalAlignment(\"middel\");\n\/\/ ~~~~~~~~\n\/\/ error: Argument of type '\"middel\"' is not assignable to\n\/\/ parameter of type '\"top\" | \"middle\" | \"bottom\"'."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"這個特性很好用，因爲字符串字面量類型可以對我們的字符串值進行基本的拼寫檢查。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"另一個好處是，字符串字面量可以用作映射類型中的屬性名稱。從這個意義上講，它們也可用作構建塊。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type Options = {\n [K in \"noImplicitAny\" | \"strictNullChecks\" | \"strictFunctionTypes\"]?: boolean\n};\n\/\/ same as\n\/\/ type Options = {\n\/\/ noImplicitAny?: boolean,\n\/\/ strictNullChecks?: boolean,\n\/\/ strictFunctionTypes?: boolean\n\/\/ };"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"字符串字面量類型還可以用作另一種構建塊：構建其他字符串字面量類型。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"所以TypeScript 4.1引入了模板字面量字符串類型。它的語法和JavaScript中的模板字面量字符串是一樣的，只是用在類型的場景中。當它用於字面量的具體類型（concrete type）時，它會串聯內容來生成一個新的字符串字面量類型。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type World = \"world\";\n\n\ntype Greeting = `hello ${World}`;\n\/\/ same as\n\/\/ type Greeting = \"hello world\";"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在替代位置有聯合類型呢？它會生成可以由每個聯合成員表示的所有可能的字符串字面量的集合。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type Color = \"red\" | \"blue\";\ntype Quantity = \"one\" | \"two\";\n\n\ntype SeussFish = `${Quantity | Color} fish`;\n\/\/ same as\n\/\/ type SeussFish = \"one fish\" | \"two fish\"\n\/\/ | \"red fish\" | \"blue fish\";5"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"這個特性的用途遠不止發行說明裏的這點小例子。例如，幾個用於UI組件的庫有一種在其API中同時指定垂直和水平對齊方式的方法，一般是用兩個分別表示橫縱軸對齊的字符串連接，例如“bottom- right”。垂直對齊可選的有“top”“middle”和“bottom”，水平對齊有“left”“center”和“right”，加起來有9個字符串選項，前後字符串之間都用破折號連接。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type VerticalAlignment = \"top\" | \"middle\" | \"bottom\";\ntype HorizontalAlignment = \"left\" | \"center\" | \"right\";\n\n\n\/\/ Takes\n\/\/ | \"top-left\" | \"top-center\" | \"top-right\"\n\/\/ | \"middle-left\" | \"middle-center\" | \"middle-right\"\n\/\/ | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\ndeclare function setAlignment(value: `${VerticalAlignment}-${HorizontalAlignment}`): void;\n\n\nsetAlignment(\"top-left\"); \/\/ works!\nsetAlignment(\"top-middel\"); \/\/ error!\nsetAlignment(\"top-pot\"); \/\/ error! but good doughnuts if you're ever in Seattl"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"雖然這類API可用的有很多，但我們可以手動把這些選項都寫出來，所以這個例子還是偏玩具一些的。實際上，如果只有9個字符串可選那沒什麼大不了。但當你需要大量字符串時，應考慮提前自動生成它們，這樣就用不着那麼多類型檢查了（或只使用string，這更容易理解）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"這個特性的一個很有價值的用途是自動態創建新的字符串字面量。例如，想象一個makeWatchedObject API，它接收一個對象並生成一個幾乎相同的對象，但加了一個新的on方法來檢測屬性的更改。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"let person = makeWatchedObject({\n firstName: \"Homer\",\n age: 42, \/\/ give-or-take\n location: \"Springfield\",\n});\n\n\nperson.on(\"firstNameChanged\", () => {\n console.log(`firstName was changed!`);\n});"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"注意，on會偵聽事件“firstNameChanged”，而不僅僅是“firstName”。我們如何對其類型化呢？"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type PropEventSource = {\n on(eventName: `${string & keyof T}Changed`, callback: () => void): void;\n};\n\n\n\/\/\/ Create a \"watched object\" with an 'on' method\n\/\/\/ so that you can watch for changes to properties.\ndeclare function makeWatchedObject(obj: T): T & PropEventSource;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"這樣，當我們賦予錯誤的屬性時，構建出的東西就會報錯！"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ error!\nperson.on(\"firstName\", () => {\n});\n\n\n\/\/ error!\nperson.on(\"frstNameChanged\", () => {\n});"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"我們還可以在模板字面量類型裏做一些特殊的事情：我們可以從替換位置做推斷。我們可以把最後一個示例通用化，從eventName字符串的各個部分做推斷，以找出關聯的屬性。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type PropEventSource = {\n on\n (eventName: `${K}Changed`, callback: (newValue: T[K]) => void ): void;\n};\n\n\ndeclare function makeWatchedObject(obj: T): T & PropEventSource;\n\n\nlet person = makeWatchedObject({\n firstName: \"Homer\",\n age: 42,\n location: \"Springfield\",\n});\n\n\n\/\/ works! 'newName' is typed as 'string'\nperson.on(\"firstNameChanged\", newName => {\n \/\/ 'newName' has the type of 'firstName'\n console.log(`new name is ${newName.toUpperCase()}`);\n});\n\n\n\/\/ works! 'newAge' is typed as 'number'\nperson.on(\"ageChanged\", newAge => {\n if (newAge < 0) {\n console.log(\"warning! negative age\");\n }"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在這裏我們把on變成了一種通用方法。當用戶使用字符串“firstNameChanged”進行調用時，TypeScript會嘗試推斷K的正確類型。爲此，它將K與“Changed”之前的內容進行匹配，並推斷字符串“firstName”。當 TypeScript推斷出來後，on方法可以獲取原始對象上的firstName類型，在這裏是string。類似地，當我們使用“ageChanged”調用時，它會找到屬性age的類型（即number）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"推斷可以有多種組合方式，通常是解構字符串，並以多種方式對其進行重構。實際上，爲了幫助大家修改這些字符串字面量類型，我們添加了一些新的實用程序類型別名，用於修改字母中的大小寫（也就是轉換爲小寫和大寫字符）。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type EnthusiasticGreeting = `${Uppercase}`\n\n\ntype HELLO = EnthusiasticGreeting;\n\/\/ same as\n\/\/ type HELLO = \"HELLO\";"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"新的類型別名爲Uppercase、Lowercase、Capitalize和Uncapitalize。前兩個會轉換字符串中的每個字符，後兩個僅轉換字符串中的第一個字符。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"欲瞭解更多信息，請參見原始的"},{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/40336","title":"xxx","type":null},"content":[{"type":"text","text":"拉取請求"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"和進行中的"},{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/40580","title":"xxx","type":null},"content":[{"type":"text","text":"拉取請求"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"映射類型中加入鍵重映射"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"就像刷新器一樣，映射類型可以基於任意鍵創建新的對象類型："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type Options = {\n [K in \"noImplicitAny\" | \"strictNullChecks\" | \"strictFunctionTypes\"]?: boolean\n};\n\/\/ same as\n\/\/ type Options = {\n\/\/ noImplicitAny?: boolean,\n\/\/ strictNullChecks?: boolean,\n\/\/ strictFunctionTypes?: boolean\n\/\/ };"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"或基於其他對象類型創建新的對象類型："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/\/ 'Partial' is the same as 'T', but with each property marked optional.\ntype Partial = {\n [K in keyof T]?: T[K]\n};"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"以前，映射類型只能使用你提供的鍵來生成新的對象類型。但很多時候你希望能夠根據輸入來創建新鍵或過濾掉鍵。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"因此，TypeScript 4.1允許你使用新的as子句重新映射映射類型中的鍵。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type MappedTypeWithNewKeys = {\n [K in keyof T as NewKeyType]: T[K]\n \/\/ ^^^^^^^^^^^^^\n \/\/ This is the new syntax!\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"有了這個新的as子句，你可以利用模板字面量類型之類的特性，輕鬆地基於舊名稱創建屬性名稱。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type Getters = {\n [K in keyof T as `get${Capitalize}`]: () => T[K]\n};\n\n\ninterface Person {\n name: string;\n age: number;\n location: string;\n}\n\n\ntype LazyPerson = Getters"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"你甚至可以生成never來過濾掉密鑰。這意味着在某些情況下，你不必使用額外的Omit幫助程序類型。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ Remove the 'kind' property\ntype RemoveKindField = {\n [K in keyof T as Exclude]: T[K]\n};\n\n\ninterface Circle {\n kind: \"circle\";\n radius: number;\n}\n\n\ntype KindlessCircle = RemoveKindField;\n\/\/ same as\n\/\/ type KindlessCircle = {\n\/\/ radius: number;\n\/\/ }"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"欲瞭解更多信息，請查看GitHub上的"},{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/40336","title":"xxx","type":null},"content":[{"type":"text","text":"原始拉取請求"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"遞歸條件類型"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在JavaScript中，經常能看到可以展開（flatten）並建立任意級別容器類型的函數。例如，考慮Promise實例上的.then()方法。.then(...)一個個展開promise，直到它找到一個“不像promise”的值，然後將該值傳遞給一個回調。Arrays上還有一個相對較新的flat方法，從中可以看出展開的深度能有多大。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"以前，處於各種實際因素，在TypeScript的類型系統中無法表達這一點。儘管有一些破解方法可以實現它，但最後出來的類型看起來會很奇怪。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"所以TypeScript 4.1放寬了對條件類型的一些限制——以便它們可以構建這些模式。在TypeScript 4.1中，條件類型現在可以立即在其分支中引用自身，這樣我們就更容易編寫遞歸類型別名了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"例如，如果我們想編寫一個類型來獲取嵌套數組的元素類型，則可以編寫以下deepFlatten類型。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type ElementType =\n T extends ReadonlyArray ? ElementType : T;\n\n\nfunction deepFlatten(x: T): ElementType[] {\n throw \"not implemented\";\n}\n\n\n\/\/ All of these return the type 'number[]':\ndeepFlatten([1, 2, 3]);\ndeepFlatten([[1], [2, 3]]);\ndeepFlatten([[1], [[2]], [[[3]]]])"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"類似地，在TypeScript 4.1中，我們可以編寫一個Awaited類型來深度展開Promise。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"type Awaited = T extends PromiseLike ? Awaited : T;\n\n\n\/\/\/ Like `promise.then(...)`, but more accurate in types.\ndeclare function customThen(\n p: Promise,\n onFulfilled: (value: Awaited) => U\n): Promise>;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"請記住，儘管這些遞歸類型都很強大，但使用它們的時候應該小心謹慎。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"首先，這些類型可以完成很多工作，這意味着它們會增加類型檢查時間。用它計算Collat​​z猜想或斐波那契數列中的數字可能很有意思，但不要放在npm的.d.ts文件裏。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"除了計算量大之外，這些類型還可能在足夠複雜的輸入上觸及內部遞歸深度上限。達到這一遞歸上限時將導致編譯時錯誤。一般來說最好不要使用這些類型，避免寫出一些在更實際的場景中會失敗的代碼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"實現細節"},{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/40002","title":"xxx","type":null},"content":[{"type":"text","text":"見此"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"Checked Indexed Accesses"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"TypeScript有一個稱爲索引簽名的特性。這些簽名可以用來告知類型系統，用戶可以訪問任意命名的屬性。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"interface Options {\n path: string;\n permissions: number;\n\n\n \/\/ Extra properties are caught by this index signature.\n [propName: string]: string | number;\n}\n\n\nfunction checkOptions(opts: Options) {\n opts.path \/\/ string\n opts.permissions \/\/ number\n\n\n \/\/ These are all allowed too!\n \/\/ They have the type 'string | number'.\n opts.yadda.toString();\n opts[\"foo bar baz\"].toString();\n opts[Math.random()].toString();"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在上面的示例中，Options有一個索引簽名，其含義是任何尚未列出的accessed屬性都應具有string | number類型。理想情況下（代碼假定你知道自己在幹什麼）這很方便，但事實是，JavaScript中的大多數值並不能完整支持所有潛在的屬性名稱。例如，大多數類型都不會像前面的示例那樣，有一個Math.random()創建的屬性鍵的值。對於許多用戶而言，這種行爲是超乎預料的，並且會感覺它沒有充分利用--strictNullChecks的嚴格檢查。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"因此，TypeScript 4.1加入了一個名爲--noUncheckedIndexedAccess的新標誌。在這種新模式下，每個屬性訪問（如foo.bar）或索引訪問（如foo[\"bar\"]）都被認爲可能是undefined的。這意味着在我們的最後一個示例中，opts.yadda的類型爲string | number | undefined，而不只是string | number。如果你需要訪問該屬性，則必須先檢查其是否存在，或者使用非null斷言運算符（後綴 ! 字符）。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ Checking if it's really there first.\nif (opts.yadda) {\n console.log(opts.yadda.toString());\n}\n\n\n\n\n\/\/ Basically saying \"trust me I know what I'm doing\"\n\/\/ with the '!' non-null assertion operator.\nopts.yadda!.toString()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"使用--noUncheckedIndexedAccess的一個後果是，即使在邊界檢查循環中，也會更嚴格地檢查對數組的索引。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function screamLines(strs: string[]) {\n \/\/ this will have issues\n for (let i = 0; i < strs.length; i++) {\n console.log(strs[i].toUpperCase());\n \/\/ ~~~~~~~\n \/\/ error! Object is possibly 'undefined'.\n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"如果不需要索引，則可以使用for–of循環或forEach調用來遍歷各個元素。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function screamLines(strs: string[]) {\n \/\/ this works fine\n for (const str of strs) {\n console.log(str.toUpperCase());\n }\n\n\n \/\/ this works fine\n strs.forEach(str => {\n console.log(str.toUpperCase());\n });\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"捕獲越界錯誤時這個標誌可能很方便，但它對於很多代碼來說可能顯得很累贅，因此--strict標誌不會自動啓用它。但如果你對這個特性很感興趣，也可以隨意嘗試它，看它是否適合你團隊的代碼庫！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"欲瞭解更多信息，請查看實現的"},{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/39560","title":"xxx","type":null},"content":[{"type":"text","text":"拉取請求"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"沒有baseUrl的paths"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"路徑映射是相當常用的，通常是爲了更好地導入，或者爲了模擬monorepo鏈接行爲。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"不幸的是，指定paths來啓用路徑映射時，還需要指定一個名爲baseUrl的選項，該選項也允許到達相對於baseUrl的bare specifier paths。它還經常會使自動導入使用較差的路徑。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在TypeScript 4.1中，可以在沒有baseUrl的情況下使用path選項，從而避免其中一些問題。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"checkJs隱含allowJs"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"以前，如果你要啓動一個checked的JavaScript項目，則必須同時設置allowJs和checkJs。這有點煩人，因此現在checkJs默認隱含了allowJs。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"欲瞭解更多信息，請查看"},{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/40275","title":"xxx","type":null},"content":[{"type":"text","text":"拉取請求"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"React 17 JSX工廠"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"TypeScript 4.1通過jsx編譯器選項的兩個新選項，支持了React 17即將推出的jsx和jsxs工廠函數："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"react-jsx"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"react-jsxdev"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"這些選項分別用於生產和開發編譯環境。一般來說，一個選項可以從另一個擴展而來。例如，用於生產構建的tsconfig.json可能如下所示："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ .\/src\/tsconfig.json\n{\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"es2015\",\n \"jsx\": \"react-jsx\",\n \"strict\": true\n },\n \"include\": [\n \".\/**\/*\"\n ]\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"用於開發的構建可能如下所示："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ .\/src\/tsconfig.dev.json\n{\n \"extends\": \".\/tsconfig.json\",\n \"compilerOptions\": {\n \"jsx\": \"react-jsxdev\"\n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"欲瞭解更多信息，請查看相應的"},{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/39199","title":"xxx","type":null},"content":[{"type":"text","text":"PR"}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"JSDoc @see標籤的編輯器支持"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"JSDoc @see標籤現在在TypeScript和JavaScript的編輯器中得到了更好的支持。這樣你就可以在標籤後的虛線名稱中使用go-to-definition之類的功能。例如，在下面的示例中，僅對JSDoc註釋中的first或C進行go-to-defintion即可："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ @filename: first.ts\nexport class C { }\n\n\n\/\/ @filename: main.ts\nimport * as first from '.\/first';\n\n\n\/**\n * @see first.C\n *\/\nfunction related() { "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"感謝積極貢獻者 Wenlu Wang 實現它！"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"重大更改"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"abstract成員不能被標記爲async"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"標記爲abstract的成員不能再標記爲async。此處的解決方法是移除async關鍵字，因爲調用方只關心返回類型。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"any\/unknown在falsy位置傳播"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"以前，對於像foo && somethingElse這樣的表達式，foo的類型是any或unknown的，整個表達式的類型將是somethingElse的類型。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"例如，以前在下列代碼中x的類型爲{ someProp: string }。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"declare let foo: unknown;\ndeclare let somethingElse: { someProp: string };\n\n\nlet x = foo && somethingElse;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"但在TypeScript 4.1中，我們會更謹慎地確定這種類型。由於對&&左側的類型一無所知，因此我們將向外傳播any和unknown，而不是將右側的類型傳播出去。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"它最常見的使用模式出現在檢查booleans的兼容性時，尤其是在謂詞函數中。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function isThing(x: any): boolean {\n return x && typeof x === 'object' && x.blah === 'foo';\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"一般來說，合適的解決方法是從foo && someExpression切換到!!foo && someExpression。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"條件spread創建可選屬性"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在JavaScript中，對象spread（例如{ ...foo }）不會對虛假值起作用。因此，在類似{ ...foo }的代碼中，如果foo爲null或undefined，則會跳過foo。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"許多用戶利用此優勢“有條件地”在屬性中spread。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"interface Person {\n name: string;\n age: number;\n location: string;\n}\n\n\ninterface Animal {\n name: string;\n owner: Person;\n}\n\n\nfunction copyOwner(pet?: Animal) {\n return {\n ...(pet && pet.owner),\n otherStuff: 123\n }\n}\n\n\n\/\/ We could also use optional chaining here:\n\n\nfunction copyOwner(pet?: Animal) {\n return {\n ...(pet?.owner),\n otherStuff: 123\n "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在這裏，如果定義了pet，則pet.owner的屬性將被spread進去；否則，不會將任何屬性spread到返回的對象中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"copyOwner的返回類型以前是基於每個spread的聯合類型："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"{ x: number } | { x: number, name: string, age: number, location: string }"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"這個操作是這樣的：如果定義了pet，Person的所有屬性都將存在；否則，所有屬性都不會在結果上定義。要麼全有，要麼都沒有。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"但有人把這種模式用得太過分了，在單個對象中塞幾百個spread，每個spread都可能添加數百或數千個屬性。事實證明，由於各種原因，這種做法的成本最後會飛天，並且往往不會帶來太多收益。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在TypeScript 4.1中，返回的類型改爲使用all-optional屬性。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"{\n x: number;\n name?: string;\n age?: number;\n location?: string;\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"這樣性能和代碼簡潔程度都會上一個臺階。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"欲瞭解更多信息，請參見原始更改（"},{"type":"link","attrs":{"href":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/40778","title":null,"type":null},"content":[{"type":"text","text":"https:\/\/github.com\/microsoft\/TypeScript\/pull\/40778"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]},{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"）。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"--declaration和--outFile需要包名稱根"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"當你有一個同時使用outFile和declaration，來爲你的項目發出單個.js文件以及相應的.d.ts文件的項目時，該聲明文件通常需要對模塊標識符進行某種後處理，才能對外部消費者有意義。例如，像這樣的項目："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ @filename: projectRoot\/index.ts\nexport * from \".\/nested\/base\";\n\n\n\/\/ @filename: projectRoot\/nested\/base.ts\nexport const a = \"123\""}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"將生成一個如下所示的.d.ts文件："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"declare module \"nested\/base\" {\n export const a = \"123\";\n}\ndeclare module \"index\" {\n export * from \"nested\/base\";\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"從技術上講這是準確的，但沒那麼有用。當請求生成單個.d.ts文件時，TypeScript 4.1會要求指定bundledPackageName。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"declare module \"hello\/nested\/base\" {\n export const a = \"123\";\n}\ndeclare module \"hello\" {\n export * from \"hello\/nested\/base\";\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"沒有這個選項的話，你可能會收到像下面這樣的錯誤消息："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"The `bundledPackageName` option must be provided when using outFile and node module resolution with declaration emit."}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"在 Promise中，resolve的參數不再可選"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在編寫如下代碼時："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"new Promise(resolve => {\n doSomethingAsync(() => {\n doSomething();\n resolve();\n })\n})"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"你可能會收到這樣的錯誤："}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":" resolve()\n ~~~~~~~~~\nerror TS2554: Expected 1 arguments, but got 0.\n An argument for 'value' was not provided."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"這是因爲resolve不再具有可選參數，因此默認情況下現在必須爲它傳遞一個值。一般來說，使用Promise時這樣會捕獲合法錯誤。典型的解決方法是爲其傳遞正確的參數，有時還要添加一個顯式的類型參數。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"new Promise(resolve => {\n \/\/ ^^^^^^^^\n doSomethingAsync(value => {\n doSomething();\n resolve(value);\n \/\/ ^^^^^\n })\n})"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"但有時確實需要在沒有參數的情況下調用resolve()。在這些情況下，我們可以給Promise一個顯式的void泛型類型參數（即將其寫爲Promise）。這利用了TypeScript 4.1中的新功能，其中可能是void的尾隨參數可以變爲可選。"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"new Promise(resolve => {\n \/\/ ^^^^^^\n doSomethingAsync(() => {\n doSomething();\n resolve();\n })\n})"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"TypeScript 4.1附帶了一個快速修復以幫助解決這個問題。"}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"下一步計劃"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"在接下來的幾周內，我們將密切注意TypeScript 4.1的穩定版本中需要包含的所有高優先級修復。如果可以的話，請試試我們的RC版本，幫助我們找出各種潛在問題。我們一直在努力改善大家的TypeScript體驗！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":"編程快樂！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}],"text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}},{"type":"strong"}],"text":"原文鏈接："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-1-rc\/#breaking-changes","title":null,"type":null},"content":[{"type":"text","text":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-1-rc\/#breaking-changes"}],"marks":[{"type":"color","attrs":{"color":"#494949","name":"user"}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}