如何高效学习 TypeScript？
TypeScript 的学习曲线陡峭是出了名的，尤其对于没有接触过或不熟悉面向对象编程 (OOP) 的程序员来说更是如此。此外，即使你熟悉 OOP，也仍然有很多 JavaScript 的例外情况需要了解。
问题是：如何才能高效地学习 TypeScript？
如何判断它是什么类型？
刚开始学习 TypeScript 时，你可能会感到迷茫。我也是这样，努力弄清楚它是什么类型的。
从你的集成开发环境（IDE）获取帮助。
我目前正在使用 Visual Studio Code，它与 TypeScript 完美集成。当你将鼠标悬停在脚本中的变量上时，就可以看到 TypeScript 生成的类型信息。
如果看不到，您可以将鼠标悬停在上面并点击right click -> to see type definition。然后 VSCode 应该会显示类型定义所在的文件。
输入完成后，VSCode 也可以自动补全对象了！太棒了！
你的最后手段：DefinitelyTyped
对于像 React 这样的应用程序，它们在DefinitelyTyped仓库中有自己的类型定义。例如，如果您想查找 React 是如何定义 `<type>` 的<a>，可以在`DefinitelyTyped/types/react/index.d.ts`中查找，它位于此处。React.AnchorHTMLAttributes
如何使用？很简单，您可以尝试一下：
interface Link extends React.AnchorHTMLAttributes<HTMLElement> {
...yourProps
}
即使你没有定义任何 props，你仍然可以这样使用 Link 组件而不会出现 TypeScript 代码检查错误：
<Link href="<YOUR-LINK>">My first link</Link>
这是因为你已经扩展了 React 的类型定义，所以你可以直接使用它，而无需自己定义它们。
如何编写自己的字体？
学习 TypeScript 时，提升技能的最佳方法就是多加练习。TypeScript官方文档是一个很好的起点。
在编写类型定义时，我认为以下方法对于提高工作效率非常有用。
联合类型
type Button = {
variant: 'primary' | 'secondary';
};
联合类型可以帮助你进一步限制输入，例如，在上面的Button组件中，你可以只string为 variant props 编写代码。这意味着你可以输入任何你想要的字符串（这可能会破坏你的代码）。实现联合类型后，你只能输入字符串primary或值secondary。
如果您尝试输入除 ` primary\n` 或 `\n`之外的字符串secondary，TypeScript 将阻止您！
交叉类型
您还可以将不同类型的元素组合在一起：
type Button = {
variant: 'primary' | 'secondary';
};
type Link = {
href: string;
};
type ButtonWithLink = Button & Link;
在上面的例子中，ButtonWithLink它同时具有属性Button和类型。这意味着你可以在这个新类型中Link使用相同的属性，例如variant或。href
类型
在复杂的应用程序中，拥有一个庞大的对象是很正常的，例如：
const jsonObj = {
type: 'test',
variant: 'test',
value: 3,
disabled: false
purchase: {
name: 'T-shirt';
qty: 200
type: {
size: 'XL',
color: 'white'
...
}
...
}
};
type JsonType = typeof jsonObj;
// Equals to
// type JsonType = {
// type: string,
// variant: string,
// value: number,
// disabled: boolean,
// purchase: {
// name: string;
// type: {
// size: string;
// color: string;
// ...
// }
// ...
// }
// }
以上示例数据采用的是简单的数据结构，您仍然可以手动输入。但是，当您遇到包含嵌套对象或数组的 JSON 对象时，该typeof函数就非常有用。
关键
同样的道理也适用于keyof，它会获取对象中的所有键。
const jsonObj = {
type: 'test',
variant: 'test',
value: 3,
disabled: false
color: {
red: '#f44336',
purple: '#9c27b0',
pink: '#e91e63'
}
};
type Color = keyof typeof jsonObj.color;
// Equals to
// type Color = "red" | "purple" | "pink"
部分的
Partial当你的类型中只需要一个字段时，这种方法很有用。例如：
type Person = {
name: string;
age: number;
email: string;
};
const updateData = (userData: Partial<Person>) => {
// so you can just update one field
};
请注意，Partial它在底层将所有字段都设为可选，因此在使用时请确保不需要必填字段。
type Partial<T> = {
[P in keyof T]?: T[P];
};
// all fields are optional in Partial
如果您想了解更多信息，可以查看官方文档。
我的旅程
TypeScript乍一看挺吓人的。
一年前，我尝试自学 TypeScript，强迫自己使用 Angular，因为 Angular 本身就使用 TypeScript。然而，即使我完成了 Angular 的小项目，我觉得自己对 TypeScript 的了解也只是皮毛而已。几个月前，我开始在公司使用 TypeScript，看到其他人是如何编写 TypeScript 代码的，我突然学到了很多关于如何使用 `<type>`、`<type>` 、keyof` <type> ` 等的知识。typeofPartialPick
关键在于多写，并且始终找到最佳的打字方式（即找到最佳的偷懒方式！）。
希望我的 TypeScript 学习历程也能对你有所帮助！