- event类型的声明
1.1. 如果只有一个event参数的情况下，只需指定回调函数类型即可
const toggleYear: React.MouseEventHandler = (e) => {
e.preventDefault()
setDate(new Date((date as any) - (365*24*60*60*1000)))
}
<Icon onClick={(e) => toggleYear(e)}/>
1.2. 即有event又有其他参数的情况，函数声明的时候指定event为React.对应的事件<对应执行事件的标签>
const toggleYear = (e: React.MouseEvent<SVGElement>, type: number) => {
e.preventDefault()
setDate(new Date((date as any) - (365*24*60*60*1000) * type))
}
<Icon onClick={(e) => toggleYear(e, 1)}/>
- 如果绑定事件的时候报this问题，那么就只需要删除绑定事件的事件类型即可
只需删除MouseEventHandler，然后指定e为MouseEvent即可
const onMouseMove = (e: MouseEvent) => {
}
解决办法：查看ReactDOM的引入方式是否正确，改成下面的
import ReactDOM from 'react-dom'
- 接口里的某一项可以单独作为类型使用，可以把它当做js对象使用对象[key]
interface Context {
lists: {[key: string]: string[]}
}
const lists: Context['lists'] = {}
- useReducer中的类型声明
1). 一个泛型两个参数
interface State {
inputValue: string
}
interface Action extends State{
type: string
}
const initState: State = {
inputValue: 'aaa'
}
type Reducer = (state: State, action: Action) => State
const reducer: Reducer = (state, action) => {
switch (action.type) {
case 'modify':
return {...state, inputValue: action.inputValue}
default:
throw new Error()
}
}
const [state, dispatch] = useReducer<Reducer>(reducer,initState)
因为上面的defaultStore指定了类型为Prop，所以错误
- 正确写法
const defaultStore = {
inputValue: '哈哈',
lists: []
}
- 当我们要对类型做一种确定的组合关系的时候，而这个类型又可能有多个选择，我们可以通过联合类型确定他们之间的关系如下：
我的selected: string[] | string
multiple: true | false
我们想要selected是string[]时对应 multiple是true，selected是string时，对应multiple是false
所以我们可以这样写：
type A = { selected: string[], multiple: true}
type B = { selected: string, multiple: false}
type Prop = {
sourceData: SourceData[];
onChange?: (data: SourceData, bool: boolean) => void;
} & (A | B)
- 如果一个类型需要被多次使用你可以在当前目录下定义一个.d.ts文件，把你需要多次用到的类型放到这个文件里，注意只能在当前同级目录下定义.d.ts
- newTree/test.d.ts
interface SourceDataItem {
text: string;
value: string;
children?: SourceDataItem[]
}
- newTree/newTree.tsx
interface Props {
item: SourceDataItem;
level: number;
}
7.联合类型数组声明
如果数组里面的类型使用了 |那我我们就需要把它们用括号包在一起，然后外面使用[]
type ShareListType = {
icon: string;
text: string;
}
错误写法：
const options: ShareListType[] | (ShareListType[])[]
正确写法：
const options: (ShareListType | ShareListType[])[]
- antd Table Columns 类型
import { ColumnProps } from 'antd/es/table';
export type CouponData = {
title: string;
couponType: string;
couponUri: string;
condition: string;
receiveNum: number | string;
createTime: string;
}
const columns: ColumnProps<CouponData>[] = [
{
title: '名称',
dataIndex: 'title',
key: 'title',
},
...
]
- 函数式泛型传值写法
普通函数写法：
function getDepAndBasicList<T>(data: T[], key?: string) {
return {
basicData: data.filter(item => displayDepartment ? !Number(typeof item === 'string' ? item : item[key!]) : (typeof item === 'string' ? item : item[key!])),
departData: data.filter(item => displayDepartment && Number(typeof item === 'string' ? item : item[key!]))
}
}
函数式写法：
const getDepAndBasicList: <T>(data: T[], key?: string) => { basicData: T[]; departData: T[]} = (data, key) => {
return {
basicData: data.filter(item => displayDepartment ? !Number(!key ? item : item[key]) : (!key ? item : item[key])),
departData: data.filter(item => displayDepartment && Number(!key ? item : item[key]))
}
}
- 如果一个参数的类型是联合类型，当我们传入不同的类型提示不能把某一类型赋值给另一类型的时候，解决方式有三种：
比如：string | boolean，提示说不能把 string 类型赋值给 boolean 类型
1). 直接用 as ，让当前参数 as boolean（不推荐）
2). 使用类型断言
if (typeof param === 'string') {
} else {}
3). 让接受的参数作为泛型，调用的时候把需要的类型传入
function test<T>(param: T) {
}
test('aaa')
test(true)
网友评论