ts相关技巧

1. 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)}/>

2. 如果绑定事件的时候报this问题，那么就只需要删除绑定事件的事件类型即可

只需删除MouseEventHandler，然后指定e为MouseEvent即可

const onMouseMove = (e: MouseEvent) => {

  }

解决办法：查看ReactDOM的引入方式是否正确，改成下面的

import ReactDOM from 'react-dom'

4. 接口里的某一项可以单独作为类型使用，可以把它当做js对象使用对象[key]

interface Context {
  lists: {[key: string]: string[]}
}
const lists: Context['lists'] = {}

5. 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: []
}

5. 当我们要对类型做一种确定的组合关系的时候，而这个类型又可能有多个选择，我们可以通过联合类型确定他们之间的关系如下：
   我的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)

6. 如果一个类型需要被多次使用你可以在当前目录下定义一个.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[])[]

8. 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',
    },
...
]

9. 函数式泛型传值写法
   普通函数写法：

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]))
    }
  }

10. 如果一个参数的类型是联合类型，当我们传入不同的类型提示不能把某一类型赋值给另一类型的时候，解决方式有三种：
    比如：string | boolean，提示说不能把 string 类型赋值给 boolean 类型
    1). 直接用 as ，让当前参数 as boolean（不推荐）
    2). 使用类型断言

if (typeof param === 'string') {
} else {}

3). 让接受的参数作为泛型，调用的时候把需要的类型传入

function test<T>(param: T) {

}
test('aaa')
test(true)