如何查找TypeScript的各类可用类型及对应使用场景

为什么在TS官方文档找不到CSS.Properties、JSX.Element这类类型 #

这些类型不属于TypeScript的内置基础类型，是社区为对应技术栈维护的第三方类型定义里的扩展类型：

• JSX.Element是React生态的类型定义包@types/react提供的类型，用于描述React组件返回的JSX节点结构
• CSS.Properties同样是@types/react中封装的类型，专门用于定义React组件接收的内联样式参数

如何确定需要使用的对应类型 #

• 从使用的技术栈出发：不同框架、工具库都会配套对应的类型定义包，所有和该技术栈相关的类型，都可以在对应包的.d.ts声明文件中查询。你在IDE中把鼠标悬停在对应类型上，即可触发跳转查看完整的类型定义、注释说明和适用场景。
• 用类型推断反推：如果不知道某段值应该对应什么类型，可以先写实际的业务值，查看TS自动推断出的类型，直接复用该类型即可。比如你先写const testStyle = { width: 100, color: '#fff' }，悬停查看testStyle的类型，就能拿到对应的CSS样式类型定义。
• 目前没有覆盖所有场景的全局类型汇总，因为TS的类型生态和具体技术栈强绑定，不同库都会自定义扩展类型，只需要掌握你常用技术栈的配套类型即可。

函数类型的定义方法 #

你可以根据业务约束灵活选择：

• 如果需要明确约束入参和返回值，直接用(参数名: 参数类型, ...) => 返回值类型的语法定义，比如接收两个数字返回数字的函数变量可以写为：

  const X: (a: number, b: number) => number = (a, b) => a + b
  

• 如果不需要严格约束，无入参无返回的函数可以用() => void类型，通用宽松函数类型可以用Function（该类型不会校验入参和返回值，不推荐优先使用）
• 如果是框架提供的特定场景函数，比如React的事件处理函数，直接使用框架封装好的对应类型即可，不需要手动定义结构。

内容的提问来源于stack exchange，提问作者CODEforDREAM