FAQ
- div 上用到 scrollTop 属性，但 ts 报了的错误（TypeScript 如何向 HTML DOM 元素扩展属性？）
TypeScript 如何向 HTML DOM 元素扩展类型声明
- 当时间日期相减时，会报 算术运算右侧必须是 "any"、"number"、"bigint" 或枚举类型。的错误
TypeScript定义禁止直接比较日期，因此必须先将它们转换为数字。
new Date("2020-09-27 15:00:00").getTime() - new Date("2020-09-27 13:10:00").getTime()
//or
Number(new Date("2020-09-27 15:00:00")) - Number(new Date("2020-09-27 13:10:00"))
- 在 tsx 中，引入的组件是 jsx 写的时，ts 会报无法找到模块的声明文件
无法找到模块“@/component/XXX”的声明文件。“e:/xxx/src/component/XXX/index.jsx”隐式拥有 "any" 类型。
在.d.ts中声明一下
declare module "@/component/XXX";
- 在使用自定义Hook时，希望在解构赋值数组时，分解位置获得正确的类型。
function useChestnut() {
const [one, setOne] = useState(true);
const [two, seTwo] = useState(123);
......
return [one, two];
}
// const one: number | boolean
// const two: number | boolean
const [one, two] = useChestnut();
数组类型的值只有显示添加了元组类型注解后，ts 才会把它当作元组，否则推论出来的类型就是普通的数组类型。
return [one, two] as const;
//or
return [one, two] as [boolean, number];
或者直接定义返回的类型
function useChestnut() : [boolean, number] {
......
}
5.在 TypeScript 中，应该如何声明函数的 this 的类型？
"this" 隐式具有类型 "any"，因为它没有类型注释。
只需要在函数的第一个参数中声明 this 指定的对象。（表面上 this 占据了第一个形参的位置，但 TypeScript 转译为 JavaScript 后，“伪形参” this 会被抹掉，有点特别的一个特性）
function chestnut(this: Window) {
console.log(this);
}
实际调用中 this 的指向与指定的 this 指向不同，TypeScript 就能发现 this 指向的错误了。
6.已有某属性是 number 类型，需其他任意属性是 string 类型。该如何定义类型？
错误代码大概是如下所示：
type ChestnutType = {
chestnut: number;
[key: string]: string;
};
因为属性的类型必须是对应索引的类型的子集，所以上面会出现错误提示。
应该如何定义它的类型且不提示错误呢？关键点：类型缩减。
（找到 number 和 string 类型的共同子类型 never。这样 chestnut 类型缩减之后的类型就是 number，同时也满足属性和 string 索引类型的约束关系）
代码如下：
type ChestnutType =
| {
chestnut: number;
}
| {
chestnut: never;
[key: string]: string;
};
7.如何自定义一个泛型工具
关于接口类型与类型别名
刚入 ts 的人肯定都会对于使用 interface 还是 type 来声明类型纠结过。
先说我总结后的结论：请优先使用 type 声明类型吧，除非你需要 interface 声明合并的特性。
首先官网对于 interface 和 type 的区别的描述 简单来说 ：
接口和类型别名非常相似，几乎接口的所有特性在类型中都是可用的，关键区别在于类型不能重新添加新属性，而接口总是可扩展的。
我们使用 ts 大多处在业务开发，主要就是用 ts 来定义 Props 以及接口数据类型。而 type 会比 interfere 更方便，代码也更简洁。
interfere 无法使用：联合类型（&）和交叉类型（｜），所以扩展属性 interfere 需要写 extends ，代码远不如 type 直接 & 来的简洁。
in 和 keyof 也只能在类型别名定义中使用。例（就是泛型工具 Partial）：
type Partial<T> = {
[P in keyof T]?: T[P]
}
但当你处在特定的场景（需对全局变量、第三方库的类型做扩展）时，用 interface 吧，因为声明合并的这个特性会使得我们极其方便。（比如给window对象添加一个自定义的属性或者方法时）
其他
-
如何理解泛型
最开始的时候，我对泛型的理解仅仅是：类似于定义函数参数，在调用时给泛型传入明确的类型参数。
之后我渐渐了解到，设计泛型的目的是：在于有效约束类型成员之间的关系，比如函数参数和返回值、类或者接口成员和方法之间的关系。
(ps:泛型工具的本质就是构造复杂类型的泛型) -
对象字面的 freshness 特性
在 TypeScript 中，如果两个类型的结构一致，则它们是互相兼容的。
也就是说包含多余属性的变量 B 可以赋值给变量 A。但是如果我们直接将一个与变量 B 完全一样结构的对象字面量赋值给变量 A，则会提示一个 ts(2322) 类型不兼容的错误，这就是对象字面的 freshness 特性。
（也就是说没有被变量接收时，会对对象字面量的赋值操作进行严格的类型检测，只有目标变量的类型与对象字面量的类型完全一致时，对象字面量才可以赋值给目标变量，否则会提示类型错误。）
当然，我们也可以通过使用变量接收对象字面量或使用类型断言解除 freshness。
- 在对接接口数据时，不想一点一点手写 ts 类型？
在 vs code 里有个 json2ts 插件。只要复制粘贴，可以帮助我们快速转换为 TypeScript 接口类型。
TypeScript 学习链接
-
TypeScript 官方文档
官方的才是最新最全的自然不用多说。 -
TypeScript 入门教程：从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。
这本书里的 TypeScript 知识非常基础，非常适合作为学习 TypeScript 的第一本书，也是我学习 TypeScript 的第一本书。
里面有一章节声明文件，整理的很好，用来查阅再好不过了。
- 一份不可多得的 TS 学习指南：从 16 个方面入手，带你一步步学习 TypeScript。
这篇文章可以说是写的非常细了，可以补充到上面一本书所没涉及到的许多知识点，也可用来当做知识点遗忘时的资料查阅。
里面有个小节，把 tsconfig.json 中的 compilerOptions 每个选项都详细的说明了。（当然你也可以查看官网的 tsconfig）
字节跳动前端从类型、运算符、操作符、泛型的角度来系统介绍常见的 TypeScript 文章没有好好讲解的功能点。
刚入门 ts 的人可能都有遇到过这个问题：不知道该如何在事件处理函数中声明 Event 事件对象的类型。那么这篇文章中有个小节可以让你掌握 Event 对象的类型声明。
网友评论