React-TS

函数组件

import {FC} from 'react'
const Comp:FC=()=>{

}

Props 语法: props: 接口/类型

interface IProps {
  data: number
}

const CompA = (props: IProps) => {
  const { data } = props

  return<>
    {data}
  </>
}

动态Props 语法:

<泛型 extents Props类型>(props: 泛型)

箭头函数的类型为

<泛型 extents 类型>(props: 泛型)

const CompB = <P extents {data:number}>(props: P) =>{
	return <>{props}</>
}

function App () {
  const [data] = useState(20)

  return (
    <>
      <CompB data={ data } />
    </>
  )
}

HTML常见事件类型:

ChangeEvent<HTMLElement>
FormEvent<HTMLElement>

HTML事件处理函数类型

const changeHandler: ChangeEventHandler<HTMLELement> = (e)=>{
	e.currentTarget.value
}

<label htmlFor="">
  <input type="text" name="" id="" onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeHandle(e) } />
</label>

工具类

Partial 可选
Required 必选
Pick 语法

Pick<T,K extends keyof T>

从T的类型挑选部分属性作为K的类型

// 从IPerson取出age属性作为XiaoMing的类型
interface IPerson {
	name: string
	age: number
}

type XiaoMing = Pick<IPerson, 'age'>

组合类型 &

interface IPerson {
  name: string
  id: number
  age: number
}
type IGender = 'women' | 'man' | 'unknown'
type XiaoMing = { gender: IGender, adder: string }

type XiaoHong = IPerson & XiaoMing

const xiaohong: XiaoHong = {
  id: 1,
  age: 18,
  name: '12',
  gender: 'man',
  adder: 'ad',
}

Record 将一个类型为另一个类型的属性

语法

Record<属性,属性的值的类型>

interface IPerson {
  name: string
  id: number
  age: number
}

type XiaoWang = 'adder' | 'gender'
// xiaoWang的两个属性adder与gender的值为IPerson接口定义的类型
const xiaoWang: Record<XiaoWang, IPerson2> = {
  gender:{
    name:'as',
    age:19,
    id:1
  },
  adder:{
    name: 'as',
    age: 19,
    id: 1
  }
}

Exclude 语法

Exclue<类型A,从类型排除的类型>

type Gender = 'women' | 'man' | 'unknown'
type newGender = Exclude<Gender, 'unknown'>
const gender1: newGender = 'women' // ok
const gender2: newGender = 'man' // ok
const gender3: newGender = 'unknown' // error

Omit 语法

Omit<类型A,从类型A去除的属性>

interface Person {
	age: number
	name: string
}
type Xm = Omit<Person,'age'>
const xm:Xm = {
	name:'ad'
}

ReturnType 返回函数返回值的类型语法

Return<typeof 函数>

function foo(type): boolean {
  return type === 0
}

type FooType = ReturnType<typeof foo>