一、怎么在项目中引入
- 目前主流框架都集成了ts,在使用脚手架执行时可配置
- 单独在仓库中引入
1 npm i typescript --save-dev
2 配置tsconfig.json
3 类型定义插件:@types/react、@types/react-dom
// 如果使用的是rsbuild进行打包,[不需要单独处理文件解析工作](https://rsbuild.dev/zh/guide/basic/typescript)
4 处理.ts、.tsx文件:ts-loader | @babel/preset-typescript
二、泛型
用来定义非指定数据类型的ts结构
函数泛型:
function demo<T>(arg: T): T {
console.log(arg, '===')
return arg
}
接口泛型:
interface KeyValuePair<K, V> {
key: K;
value: V;
}
三、Pick、Omit、Partial、Required
Pick: Pick<TargetObject, 'name' | 'age'>,选择需要的属性 name、age
Omit: Omit<TargetObject, 'name'>,排除掉不需要的属性 name
Partial: Partial< TargetObject >,所有属性变为可选的
Required: Required< TargetObject >, 所有属性变为必填
四、type、interface
interface:声明合并、常用来定义接口类型、定义对象类型
interface Test{
first:string
second:string
}
type: 可以定义非对象类型
type Shape = { name: string }
五、unknown 、any
- unknown比any的检查更加严格,any什么检查都不做,unknown要求先收窄类型
- unkonwn 不能 赋值给已知类型的变量