TypeScript\u00a0\u662f\u4e00\u79cd\u901a\u8fc7\u6dfb\u52a0\u7c7b\u578b\u548c\u7c7b\u578b\u68c0\u67e5\u6784\u5efa\u5728\u00a0JavaScript\u00a0\u4e4b\u4e0a\u7684\u8bed\u8a00\u3002\u7c7b\u578b\u53ef\u4ee5\u63cf\u8ff0\u8bf8\u5982\u5bf9\u8c61\u7684\u5f62\u72b6\u3001\u5982\u4f55\u8c03\u7528\u51fd\u6570\u4ee5\u53ca\u5c5e\u6027\u662f\u5426\u53ef\u4ee5\u4e3a\u00a0null\u00a0\u6216\u00a0undefined\u00a0\u4e4b\u7c7b\u7684\u4e1c\u897f\u3002TypeScript\u00a0\u53ef\u4ee5\u68c0\u67e5\u8fd9\u4e9b\u7c7b\u578b\uff0c\u4ee5\u786e\u4fdd\u6211\u4eec\u4e0d\u4f1a\u5728\u7a0b\u5e8f\u4e2d\u51fa\u9519\uff0c\u8fd9\u6837\u6211\u4eec\u5c31\u53ef\u4ee5\u81ea\u4fe1\u5730\u7f16\u7801\u3002\u5b83\u8fd8\u53ef\u4ee5\u4e3a\u7f16\u8f91\u5668\u4e2d\u7684\u81ea\u52a8\u5b8c\u6210\u3001\u8f6c\u5230\u5b9a\u4e49\u548c\u91cd\u6784\u7b49\u5176\u4ed6\u5de5\u5177\u63d0\u4f9b\u652f\u6301\u3002\u4e8b\u5b9e\u4e0a\uff0c\u5982\u679c\u60a8\u4f7f\u7528\u8fc7\u00a0Visual Studio\u00a0\u6216\u00a0VS Code for JavaScript\u00a0\u7b49\u7f16\u8f91\u5668\uff0c\u60a8\u5176\u5b9e\u5df2\u7ecf\u4f53\u9a8c\u8fc7\u7531\u00a0TypeScript\u00a0\u63d0\u4f9b\u7684\u652f\u6301\u4e86\uff01<\/p>\n
TypeScript \u5f00\u53d1\u4eba\u5458\u7ecf\u5e38\u9762\u4e34\u4e24\u96be\u5883\u5730\uff1a\u6211\u4eec\u65e2\u8981\u786e\u4fdd\u67d0\u4e9b\u8868\u8fbe\u5f0f\u5339\u914d\u67d0\u4e9b\u7c7b\u578b\uff0c\u53c8\u8981\u4fdd\u7559\u8be5\u8868\u8fbe\u5f0f\u7684\u6700\u5177\u4f53\u7c7b\u578b\u4ee5\u7528\u4e8e\u63a8\u7406\u76ee\u7684\u3002<\/p>\n
\u65b0\u7684 satisfies \u8fd0\u7b97\u7b26\u8ba9\u6211\u4eec\u9a8c\u8bc1\u8868\u8fbe\u5f0f\u7684\u7c7b\u578b\u662f\u5426\u5339\u914d\u67d0\u79cd\u7c7b\u578b\uff0c\u800c\u4e0d\u66f4\u6539\u8be5\u8868\u8fbe\u5f0f\u7684\u7ed3\u679c\u7c7b\u578b\u3002\u4f8b\u5982\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 satisfies \u6765\u9a8c\u8bc1 palette \u7684\u6240\u6709\u5c5e\u6027\u662f\u5426\u4e0e string | number[] \u517c\u5bb9\uff1a<\/p>\n
type Colors = "red" | "green" | "blue";\n\ntype RGB = [red: number, green: number, blue: number];\n\nconst palette = {\n red: [255, 0, 0],\n green: "#00ff00",\n bleu: [0, 0, 255]\n\/\/ ~~~~ The typo is now caught!\n} satisfies Record<Colors, string | RGB>;\n\n\/\/ Both of these methods are still accessible!\nconst redComponent = palette.red.at(0);\nconst greenNormalized = palette.green.toUpperCase();<\/code><\/pre>\n\u4f7f\u7528 in \u8fd0\u7b97\u7b26\u7f29\u5c0f\u672a\u5217\u51fa\u5c5e\u6027\u7684\u8303\u56f4<\/h2>\n
\u4f5c\u4e3a\u5f00\u53d1\u4eba\u5458\uff0c\u6211\u4eec\u7ecf\u5e38\u9700\u8981\u5904\u7406\u5728\u8fd0\u884c\u65f6\u4e0d\u5b8c\u5168\u5df2\u77e5\u7684\u503c\u3002\u4e8b\u5b9e\u4e0a\uff0c\u6211\u4eec\u901a\u5e38\u4e0d\u77e5\u9053\u5c5e\u6027\u662f\u5426\u5b58\u5728\uff0c\u65e0\u8bba\u6211\u4eec\u662f\u4ece\u670d\u52a1\u5668\u83b7\u5f97\u54cd\u5e94\u8fd8\u662f\u8bfb\u53d6\u914d\u7f6e\u6587\u4ef6\u3002JavaScript \u7684 in \u8fd0\u7b97\u7b26\u53ef\u4ee5\u68c0\u67e5\u5bf9\u8c61\u4e0a\u662f\u5426\u5b58\u5728\u5c5e\u6027\u3002<\/p>\n
\u4ee5\u524d\uff0cTypeScript \u5141\u8bb8\u6211\u4eec\u7f29\u5c0f\u4efb\u4f55\u672a\u660e\u786e\u5217\u51fa\u5c5e\u6027\u7684\u7c7b\u578b\u7684\u8303\u56f4\u3002<\/p>\n
interface RGB {\nred: number;\ngreen: number;\nblue: number;\n}\n\ninterface HSV {\nhue: number;\nsaturation: number;\nvalue: number;\n}\n\nfunction setColor(color: RGB | HSV) {\nif ("hue" incolor) {\n\/\/ 'color' now has the type HSV\n }\n\/\/ ...\n}<\/code><\/pre>\n\u5728\u8fd9\u91cc\uff0cRGB \u7c7b\u578b\u6ca1\u6709\u5217\u51fa\u8272\u8c03\u5e76\u7f29\u5c0f\u8303\u56f4\uff0c\u7559\u7ed9\u6211\u4eec\u7684\u662f HSV \u7c7b\u578b\u3002<\/p>\n
TypeScript 4.9 \u4f7f in \u8fd0\u7b97\u7b26\u5728\u7f29\u5c0f\u672a\u5217\u51fa\u5c5e\u6027\u7684\u7c7b\u578b\u65f6\u66f4\u52a0\u5f3a\u5927\u3002\u8be5\u8bed\u8a00\u4e0d\u4f1a\u6309\u539f\u6837\u4fdd\u7559\u5b83\u4eec\uff0c\u800c\u662f\u5c06\u5b83\u4eec\u7684\u7c7b\u578b\u4e0e Record<“property-key-being-checked”, unknown> \u76f8\u4ea4\u3002<\/p>\n
interface Context {\n packageJSON: unknown;\n}\n\nfunction tryGetPackageName(context: Context): string | undefined {\nconst packageJSON = context.packageJSON;\n\/\/ Check to see if we have an object.\nif (packageJSON && typeof packageJSON === "object") {\n\/\/ Check to see if it has a string name property.\nif ("name" in packageJSON && typeof packageJSON.name === "string") {\n\/\/ Just works!\nreturn packageJSON.name;\n }\n }\nreturn undefined;\n}<\/code><\/pre>\nTypeScript 4.9 \u8fd8\u52a0\u5f3a\u4e86\u4e00\u4e9b\u5173\u4e8e\u5982\u4f55\u4f7f\u7528 in \u7684\u68c0\u67e5\uff0c\u786e\u4fdd\u5de6\u4fa7\u53ef\u5206\u914d\u7ed9\u7c7b\u578b string | number | symbol\uff0c\u53f3\u4fa7\u53ef\u5206\u914d\u7ed9\u5bf9\u8c61\u3002\u8fd9\u6709\u52a9\u4e8e\u68c0\u67e5\u6211\u4eec\u662f\u5426\u4f7f\u7528\u4e86\u6709\u6548\u7684\u5c5e\u6027\u952e\uff0c\u800c\u4e0d\u662f\u4e0d\u5c0f\u5fc3\u68c0\u67e5\u57fa\u5143\u3002<\/p>\n
\u81ea\u52a8\u8bbf\u95ee\u5668<\/h2>\n
TypeScript 4.9 \u652f\u6301 ECMAScript \u4e2d\u5373\u5c06\u63a8\u51fa\u7684\u529f\u80fd\uff0c\u79f0\u4e3a\u81ea\u52a8\u8bbf\u95ee\u5668\u3002\u81ea\u52a8\u8bbf\u95ee\u5668\u7684\u58f0\u660e\u5c31\u50cf\u7c7b\u7684\u5c5e\u6027\u4e00\u6837\uff0c\u9664\u4e86\u5b83\u4eec\u662f\u7528 accessor \u5173\u952e\u5b57\u58f0\u660e\u3002<\/p>\n
class Person {\n accessor name: string;\n \n constructor(name: string) {\n this.name = name;\n }\n}<\/code><\/pre>\n\u68c0\u67e5 NaN \u662f\u5426\u76f8\u7b49<\/h2>\n
JavaScript \u5f00\u53d1\u4eba\u5458\u7684\u4e00\u4e2a\u4e3b\u8981\u96be\u9898\u662f\u4f7f\u7528\u5185\u7f6e\u7684\u76f8\u7b49\u8fd0\u7b97\u7b26\u68c0\u67e5\u503c NaN\u3002\u5bf9\u4e8e\u67d0\u4e9b\u80cc\u666f\uff0cNaN \u662f\u4e00\u4e2a\u7279\u6b8a\u7684\u6570\u503c\uff0c\u4ee3\u8868\u201c\u4e0d\u662f\u6570\u5b57\u201d\u3002\u6ca1\u6709\u4ec0\u4e48\u80fd\u7b49\u4e8e NaN\u2014\u2014\u5373\u4f7f\u662f NaN\uff01\u4f46\u81f3\u5c11\u5bf9\u79f0\uff0c\u4e00\u5207\u603b\u662f\u4e0d\u7b49\u4e8e NaN\u3002<\/p>\n
\u4e25\u683c\u6765\u8bf4\uff0c\u8fd9\u4e0d\u662f\u7279\u5b9a\u4e8e JavaScript \u7684\u95ee\u9898\uff0c\u56e0\u4e3a\u4efb\u4f55\u5305\u542b IEEE-754 \u6d6e\u70b9\u6570\u7684\u8bed\u8a00\u90fd\u5177\u6709\u76f8\u540c\u7684\u884c\u4e3a\u3002\u4f46\u662f JavaScript \u7684\u4e3b\u8981\u6570\u5b57\u7c7b\u578b\u662f\u6d6e\u70b9\u6570\uff0c\u800c JavaScript \u4e2d\u7684\u6570\u5b57\u89e3\u6790\u901a\u5e38\u4f1a\u5bfc\u81f4 NaN\u3002\u53cd\u8fc7\u6765\uff0c\u68c0\u67e5 NaN \u6700\u7ec8\u53d8\u5f97\u76f8\u5f53\u666e\u904d\uff0c\u6b63\u786e\u7684\u65b9\u6cd5\u662f\u4f7f\u7528 Number.isNaN\u2014\u2014\u4f46\u6b63\u5982\u6211\u4eec\u63d0\u5230\u7684\uff0c\u5f88\u591a\u4eba\u4e0d\u5c0f\u5fc3\u6700\u7ec8\u4f7f\u7528 someValue === NaN \u8fdb\u884c\u68c0\u67e5\u3002<\/p>\n
TypeScript \u73b0\u5728\u4e0e NaN \u76f4\u63a5\u6bd4\u8f83\u65f6\u4f1a\u51fa\u9519\uff0c\u5e76\u4e14\u4f1a\u5efa\u8bae\u4f7f\u7528 Number.isNaN \u7684\u4e00\u4e9b\u53d8\u4f53\u3002<\/p>\n
function validate(someValue: number) {\nreturn someValue !== NaN;\n\/\/ ~~~~~~~~~~~~~~~~~\n\/\/ error: This condition will always return 'true'.\n\/\/ Did you mean '!Number.isNaN(someValue)'?\n}<\/code><\/pre>\n\u6211\u4eec\u8ba4\u4e3a\uff0c\u6b64\u66f4\u6539\u5e94\u8be5\u4e25\u683c\u6709\u52a9\u4e8e\u6355\u83b7\u521d\u5b66\u8005\u9519\u8bef\uff0c\u7c7b\u4f3c\u4e8e TypeScript \u5f53\u524d\u5728\u4e0e\u5bf9\u8c61\u548c\u6570\u7ec4\u6587\u5b57\u8fdb\u884c\u6bd4\u8f83\u65f6\u53d1\u51fa\u9519\u8bef\u7684\u65b9\u5f0f\u3002<\/p>\n
File-Watching \u4f7f\u7528\u6587\u4ef6\u7cfb\u7edf\u4e8b\u4ef6<\/h2>\n
\u5728 TypeScript 4.9 \u4e2d\uff0c\u6587\u4ef6\u76d1\u89c6\u9ed8\u8ba4\u7531\u6587\u4ef6\u7cfb\u7edf\u4e8b\u4ef6\u63d0\u4f9b\u652f\u6301\uff0c\u53ea\u6709\u5728\u6211\u4eec\u672a\u80fd\u8bbe\u7f6e\u57fa\u4e8e\u4e8b\u4ef6\u7684\u76d1\u89c6\u7a0b\u5e8f\u65f6\u624d\u4f1a\u56de\u9000\u5230\u8f6e\u8be2\u3002\u5bf9\u4e8e\u5927\u591a\u6570\u5f00\u53d1\u4eba\u5458\u6765\u8bf4\uff0c\u5f53\u4ee5 –watch \u6a21\u5f0f\u8fd0\u884c\u6216\u4f7f\u7528 TypeScript \u652f\u6301\u7684\u7f16\u8f91\u5668\uff08\u5982 Visual Studio \u6216 VS Code\uff09\u8fd0\u884c\u65f6\uff0c\u8fd9\u5e94\u8be5\u4f1a\u63d0\u4f9b\u66f4\u5c11\u7684\u8d44\u6e90\u5bc6\u96c6\u578b\u4f53\u9a8c\u3002<\/p>\n
\u6587\u4ef6\u76d1\u89c6\u7684\u5de5\u4f5c\u65b9\u5f0f\u4ecd\u7136\u53ef\u4ee5\u901a\u8fc7\u73af\u5883\u53d8\u91cf\u548c watchOptions \u8fdb\u884c\u914d\u7f6e\u3002\u4e00\u4e9b\u7f16\u8f91\u5668\u5982 VS Code \u53ef\u4ee5\u72ec\u7acb\u652f\u6301 watchOptions\u3002\u4f7f\u7528\u6e90\u4ee3\u7801\u9a7b\u7559\u5728\u7f51\u7edc\u6587\u4ef6\u7cfb\u7edf\uff08\u5982 NFS \u548c SMB\uff09\u4e0a\u7684\u66f4\u5947\u7279\u8bbe\u7f6e\u7684\u5f00\u53d1\u4eba\u5458\u53ef\u80fd\u9700\u8981\u9009\u62e9\u56de\u5230\u65e7\u884c\u4e3a\u3002\u4e0d\u8fc7\uff0c\u5982\u679c\u670d\u52a1\u5668\u5177\u6709\u5408\u7406\u7684\u5904\u7406\u80fd\u529b\uff0c\u5219\u542f\u7528 SSH \u5e76\u8fdc\u7a0b\u8fd0\u884c TypeScript \u53ef\u80fd\u4f1a\u66f4\u597d\uff0c\u8fd9\u6837\u5b83\u5c31\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u672c\u5730\u6587\u4ef6\u3002VS Code \u6709\u5f88\u591a\u8fdc\u7a0b\u6269\u5c55\u6765\u7b80\u5316\u8fd9\u4ef6\u4e8b\u3002<\/p>\n
\u7f16\u8f91\u5668\u7684\u201cRemove Unused Imports\u201d\u548c\u201cSort Imports\u201d\u547d\u4ee4<\/h2>\n
\u5728 TypeScript 4.3 \u4e2d\uff0c\u6211\u4eec\u5f15\u5165\u4e86\u4e00\u4e2a\u540d\u4e3a\u201cSort Imports\u201d\u7684\u547d\u4ee4\uff0c\u5b83\u53ea\u4f1a\u5bf9\u6587\u4ef6\u4e2d\u7684\u5bfc\u5165\u8fdb\u884c\u6392\u5e8f\uff0c\u4f46\u4e0d\u4f1a\u5220\u9664\u5b83\u4eec\u2014\u2014\u5e76\u4e14\u4f1a\u50cf\u8fd9\u6837\u91cd\u5199\u6587\u4ef6\u3002<\/p>\n
import { bar, foo } from ".\/helper";\nimport { HoneyBadger, Moose, Zebra } from".\/zoo";\n\nlet x: Moose | HoneyBadger = foo();<\/code><\/pre>\n\u201cSort Imports\u201d\u7684\u8b66\u544a\u662f\uff0c\u5728 Visual Studio Code \u4e2d\uff0c\u6b64\u529f\u80fd\u4ec5\u53ef\u7528\u4f5c\u4fdd\u5b58\u65f6\u547d\u4ee4\uff0c\u800c\u4e0d\u662f\u53ef\u624b\u52a8\u89e6\u53d1\u7684\u547d\u4ee4\u3002<\/p>\n
TypeScript 4.9 \u589e\u52a0\u4e86\u53e6\u4e00\u534a\uff0c\u73b0\u5728\u63d0\u4f9b\u4e86\u201cRemove Unused Imports\u201d\u3002TypeScript \u73b0\u5728\u5c06\u5220\u9664\u672a\u4f7f\u7528\u7684\u5bfc\u5165\u540d\u79f0\u548c\u8bed\u53e5\uff0c\u4f46\u4f1a\u5355\u72ec\u4fdd\u7559\u76f8\u5bf9\u987a\u5e8f\u3002<\/p>\n
import { Moose, HoneyBadger } from".\/zoo";\nimport { foo } from ".\/helper";\n\nlet x: Moose | HoneyBadger = foo();<\/code><\/pre>\n\u6240\u6709\u5e0c\u671b\u4f7f\u7528\u4efb\u4e00\u547d\u4ee4\u7684\u7f16\u8f91\u5668\u90fd\u53ef\u4ee5\u4f7f\u7528\u6b64\u529f\u80fd\uff1b\u4f46\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0cVisual Studio Code\uff081.73 \u53ca\u66f4\u9ad8\u7248\u672c\uff09\u5c06\u5185\u7f6e\u652f\u6301\uff0c\u5e76\u5c06\u901a\u8fc7\u5176\u547d\u4ee4\u9762\u677f\u663e\u793a\u8fd9\u4e9b\u547d\u4ee4\u3002<\/p>\n