1.引入React 的方式
allowSyntheticDefaultImports
2.函数式组件的声明方式
- 第一种：也是比较推荐的一种，使用 React.FunctionComponent，简写形式：React.FC:
type AppProps = {
message: string
}
const App: React.FC<AppProps> = ({ message, children }) => (
<div>
{message}
{children}
</div>
)
- 第二种：使用 PropsWithChildren，这种方式可以为你省去频繁定义 children 的类型，自动设置 children 类型为 ReactNode:
type AppProps = React.PropsWithChildren<{ message: string }>
const App = ({ message, children }: AppProps) => (
<div>
{message}
{children}
</div>
)
- 第三种：直接声明:
type AppProps = {
message: string
children?: React.ReactNode
}
const App = ({ message, children }: AppProps) => (
<div>
{message}
{children}
</div>
)
使用用 React.FC 声明函数组件和普通声明以及 PropsWithChildren 的区别是：
- React.FC 显式地定义了返回类型，其他方式是隐式推导的
- React.FC 对静态属性：displayName、propTypes、defaultProps 提供了类型检查和自动补全
- React.FC 为 children 提供了隐式的类型（ReactElement | null），但是目前，提供的类型存在一些限制
比如以下用法 React.FC 会报类型错误:
const App: React.FC = props => props.children
// Type 'ReactNode' is not assignable to type 'ReactElement<any, any> | null'.
// Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)
const App: React.FC = () => [1, 2, 3]
const App: React.FC = () => 'hello'
solution:
const App: React.FC<{}> = props => props.children as any
const App: React.FC<{}> = () => [1, 2, 3] as any
const App: React.FC<{}> = () => 'hello' as any
或者
const App: React.FC<{}> = props => (props.children as unknown) as JSX.Element
const App: React.FC<{}> = () => ([1, 2, 3] as unknown) as JSX.Element
const App: React.FC<{}> = () => ('hello' as unknown) as JSX.Element
Hooks
useState
大部分情况下，TS 会自动为你推导 state 的类型:
const [val, toggle] = React.useState(false)
const [obj] = React.useState({ name: 'sj' })
const [arr] = React.useState(['One', 'Two'])
使用推导类型作为类型:
export default function App() {
// user会自动推导为类型: {name: string}
const [user] = React.useState({ name: 'sj', age: 32 })
// 使用推导类型作为类型:
const showUser = React.useCallback((obj: typeof user) => {
return `My name is ${obj.name}, My age is ${obj.age}`
}, [])
return <div className="App">用户: {showUser(user)}</div>
}
状态初始值为空时（null），注意要显式地声明类型
type User = {
name: string
age: number
}
const [user, setUser] = React.useState<User | null>(null)
useRef
当初始值为 null 时，有两种创建方式:
const RefHook: React.FC<AppProps> = ({ message, children }) => {
const ref1 = React.useRef<HTMLInputElement>(null)
const ref2 = React.useRef<HTMLInputElement | null>(null)
}
区别在于：
- 第一种方式的 ref1.current 是只读的（read-only）,会报错，并且可以传递给内置的 ref 属性，绑定 DOM 元素 ；
- 第二种方式的 ref2.current 是可变的（类似于声明类的成员变量）
两种方式默认都会报: Object is possibly 'null'.ts(2531) ，solution:
Good
const onButtonClick = () => {
ref1.current?.focus()
ref2.current?.focus()
}
// Bad
function MyComponent() {
const ref1 = React.useRef<HTMLDivElement>(null!)
React.useEffect(() => {
// 不需要做类型检查，需要人为保证ref1.current.focus一定存在
doSomethingWith(ref1.current.focus())
})
return <div ref={ref1}> etc </div>
}
useEffect
注意useEffect回调函数的返回值只能是函数或者 undefined
function EffectHook() {
// undefined作为回调函数的返回值
React.useEffect(() => {
// do something...
}, [])
// 返回值是一个函数
React.useEffect(() => {
// do something...
return () => {}
}, [])
}
useMemo / useCallback
两者都可以直接从它们返回的值中推断出它们的类型 useCallback 的参数默认指定为 any
同时也支持传入泛型， useMemo 的泛型指定了返回值类型，useCallback 的泛型指定了参数类型
自定义 Hooks
Union 类型: a | b
自定义 Hook 的返回值如果是数组类型，TS 会自动推导为 Union 类型，而我们实际需要的是数组里里每一项的具体类型，需要手动添加 const 断言 进行处理：
function useLoading() {
const [isLoading, setState] = React.useState(false)
const load = (aPromise: Promise<any>) => {
setState(true)
return aPromise.then(() => setState(false))
}
// 实际需要: [boolean, typeof load] 类型
// 而不是自动推导的：(boolean | typeof load)[]
return [isLoading, load] as const
}
如果使用 const 断言遇到问题，也可以直接定义返回类型:
export function useLoading(): [
boolean,
(aPromise: Promise<any>) => Promise<any>
] {
const [isLoading, setState] = React.useState(false)
const load = (aPromise: Promise<any>) => {
setState(true)
return aPromise.then(() => setState(false))
}
return [isLoading, load]
}
如果有大量的自定义 Hook 需要处理，这里有一个方便的工具方法可以处理 tuple 返回值:
// 返回每个的type
function tuplify<T extends any[]>(...elements: T) {
return elements
}
function useTupleLoading() {
const [isLoading, setState] = React.useState(false)
const load = (aPromise: Promise<any>) => {
setState(true)
return aPromise.then(() => setState(false))
}
// [boolean, typeof load]
return tuplify(isLoading, load)
}
Types or Interfaces
interface 和 type 在 ts 中是两个不同的概念，但在 React 大部分使用的 case 中，interface 和 type 可以达到相同的功能效果，type 和 interface 最大的区别是：
type 类型不能二次编辑，而 interface 可以随时扩展
interface Animal {
name: string
}
// 可以继续在原有属性基础上，添加新属性：color
interface Animal {
color: string
}
/********************************/
type Animal = {
name: string
}
// type类型不支持属性扩展
// Error: Duplicate identifier 'Animal'
type Animal = {
color: string
}
获取未导出的 Type
某些场景下我们在引入第三方的库时会发现想要使用的组件并没有导出我们需要的组件参数类型或者返回值类型，这时候我们可以通过 ComponentProps/ ReturnType 来获取到想要的类型。
那么如何选择type / interface？有几种常用规则：
- 在定义公共 API 时(比如编辑一个库）使用 interface，这样可以方便使用者继承接口；
- 在定义组件属性（Props）和状态（State）时，建议使用 type，因为 type的约束性更强
implements 与 extends 静态操作，是否支持使用联合类型？
class Point {
x: number = 2
y: number = 3
}
interface IShape {
area(): number
}
type Perimeter = {
perimeter(): number
}
type RectangleShape = (IShape | Perimeter) & Point
class Rectangle implements RectangleShape {
x = 2
y = 3
area() {
return this.x + this.y
}
}
interface ShapeOrPerimeter extends RectangleShape {}
因此，在使用组件内参数类型时候建议使用查找类型访问组件属性类型
通过查找类型减少 type 的非必要导出，如果需要提供复杂的 type，应当提取到作为公共 API 导出的文件中。
// counter.tsx
import * as React from 'react'
export type Props = {
name: string
}
const Counter: React.FC<Props> = props => {
return <></>
}
export default Counter
在其他引用它的组件中我们有两种方式获取到 Counter 的参数类型
（推荐）通过 typeof 操作符
// Great
import Counter from './d-tips1'
type PropsNew = React.ComponentProps<typeof Counter> & {
age: number
}
const App: React.FC<PropsNew> = props => {
return <Counter {...props} />
}
export default App
import Counter, { Props } from './d-tips1'
type PropsNew = Props & {
age: number
}
const App: React.FC<PropsNew> = props => {
return (
<>
<Counter {...props} />
</>
)
}
export default App
Props
通常我们使用 type 来定义 Props，为了提高可维护性和代码可读性，在日常的开发过程中我们希望可以添加清晰的注释。
type OtherProps = {
name: string
color: string
}
增加相对详细的注释，使用时会更清晰，需要注意，注释需要使用 /**/ ， // 无法被 vscode 识别
// Great
/**
* @param color color
* @param children children
* @param onClick onClick
*/
type Props = {
/** color */
color?: string
/** children */
children: React.ReactNode
/** onClick */
onClick: () => void
}
// type Props
// @param color — color
// @param children — children
// @param onClick — onClick
const Button: React.FC<Props> = ({ children, color = 'tomato', onClick }) => {
return (
<button style={{ backgroundColor: color }} onClick={onClick}>
{children}
</button>
)
}
常用 Props ts 类型
基础属性类型
type AppProps = {
message: string
count: number
disabled: boolean
/** array of a type! */
names: string[]
/** string literals to specify exact string values, with a union type to join them together */
status: 'waiting' | 'success'
/** 任意需要使用其属性的对象（不推荐使用，但是作为占位很有用） */
obj: object
/** 作用和`object`几乎一样，和 `Object`完全一样 */
obj2: {}
/** 列出对象全部数量的属性 （推荐使用） */
obj3: {
id: string
title: string
}
/** array of objects! (common) */
objArr: {
id: string
title: string
}[]
/** 任意数量属性的字典，具有相同类型*/
dict1: {
[key: string]: MyTypeHere
}
/** 作用和dict1完全相同 */
dict2: Record<string, MyTypeHere>
/** 任意函数 */
onSomething: Function
/** 没有参数&返回值的函数 */
onClick: () => void
/** 携带参数的函数 */
onChange: (id: number) => void
/** 携带点击事件的函数 */
onClick(event: React.MouseEvent<HTMLButtonElement>): void
/** 可选的属性 */
optional?: OptionalType
}
常用 React 属性类型
export declare interface AppBetterProps {
children: React.ReactNode // 一般情况下推荐使用，支持所有类型 Great
functionChildren: (name: string) => React.ReactNode
style?: React.CSSProperties // 传递style对象
onChange?: React.FormEventHandler<HTMLInputElement>
}
export declare interface AppProps {
children1: JSX.Element // 差, 不支持数组
children2: JSX.Element | JSX.Element[] // 一般, 不支持字符串
children3: React.ReactChildren // 忽略命名，不是一个合适的类型，工具类类型
children4: React.ReactChild[] // 很好
children: React.ReactNode // 最佳，支持所有类型 推荐使用
functionChildren: (name: string) => React.ReactNode // recommended function as a child render prop type
style?: React.CSSProperties // 传递style对象
onChange?: React.FormEventHandler<HTMLInputElement> // 表单事件, 泛型参数是event.target的类型
}
Forms and Events
onChange 事件
change 事件，有两个定义参数类型的方法。
import * as React from 'react'
type changeFn = (e: React.FormEvent<HTMLInputElement>) => void
const App: React.FC = () => {
const [state, setState] = React.useState('')
// 使用推断的方法签名
const onChange: changeFn = e => {
setState(e.currentTarget.value)
}
return (
<div>
<input type="text" value={state} onChange={onChange} />
</div>
)
}
import * as React from 'react'
const App: React.FC = () => {
const [state, setState] = React.useState('')
// 强制使用 @types / react 提供的委托类型
const onChange: React.ChangeEventHandler<HTMLInputElement> = e => {
setState(e.currentTarget.value)
}
return (
<div>
<input type="text" value={state} onChange={onChange} />
</div>
)
}
onSubmit
如果不太关心事件的类型，可以直接使用 React.SyntheticEvent. 如果目标表单有想要访问的自定义命名输入，可以使用类型扩展
import * as React from 'react'
const App: React.FC = () => {
const onSubmit = (e: React.SyntheticEvent) => {
e.preventDefault()
const target = e.target as typeof e.target & {
password: { value: string }
} // 类型扩展
const password = target.password.value
}
return (
<form onSubmit={onSubmit}>
<div>
<label>
Password:
<input type="password" name="password" />
</label>
</div>
<div>
<input type="submit" value="Log in" />
</div>
</form>
)
}
Operators
常用的操作符，常用于类型判断
- typeof and instanceof: 用于类型区分
- keyof: 获取 object 的 key
- O[K]: 属性查找
[K in O]: 映射类型+ or - or readonly or ?: 加法、减法、只读和可选修饰符- x ? Y : Z: 用于泛型类型、类型别名、函数参数类型的条件类型
- !: 可空类型的空断言
- as: 类型断言
- is: 函数返回类型的类型保护
Useful tips
不要在 type 或 interface 中使用函数声明
保持一致性，类型/接口的所有成员都通过相同的语法定义。
事件处理
当我们注册一个 Touch 事件，然后错误的通过事件处理函数中的 event 对象去获取其 clientY 属性的值，在这里我们已经将 event 设置为 any 类型，导致 TypeScript 在编译时并不会提示我们错误， 当我们通过 event.clientY 访问时就有问题了，因为 Touch 事件的 event 对象并没有 clientY 这个属性。
通过 interface 对 event 对象进行类型声明编写的话又十分浪费时间，幸运的是 React 的声明文件提供了 Event 对象的类型声明。
Event 事件对象类型
- ClipboardEvent<T = Element> 剪切板事件对象
- DragEvent<T =Element> 拖拽事件对象
- ChangeEvent<T = Element> Change 事件对象
- KeyboardEvent<T = Element> 键盘事件对象
- MouseEvent<T = Element> 鼠标事件对象
- TouchEvent<T = Element> 触摸事件对象
- WheelEvent<T = Element> 滚轮时间对象
- AnimationEvent<T = Element> 动画事件对象
- TransitionEvent<T = Element> 过渡事件对象
事件处理函数类型 使用 React 声明文件所提供的 EventHandler 类型别名，通过不同事件的 EventHandler 的类型别名来定义事件处理函数的类型
/**
* bivarianceHack 为事件处理函数的类型定义，函数接收一个 event 对象，
* 并且其类型为接收到的泛型变量 E 的类型, 返回值为 void
*/
type EventHandler<E extends React.SyntheticEvent<any>> = {
bivarianceHack(event: E): void
}['bivarianceHack']
type ReactEventHandler<T = Element> = EventHandler<React.SyntheticEvent<T>>
type ClipboardEventHandler<T = Element> = EventHandler<React.ClipboardEvent<T>>
type DragEventHandler<T = Element> = EventHandler<React.DragEvent<T>>
type FocusEventHandler<T = Element> = EventHandler<React.FocusEvent<T>>
type FormEventHandler<T = Element> = EventHandler<React.FormEvent<T>>
type ChangeEventHandler<T = Element> = EventHandler<React.ChangeEvent<T>>
type KeyboardEventHandler<T = Element> = EventHandler<React.KeyboardEvent<T>>
type MouseEventHandler<T = Element> = EventHandler<React.MouseEvent<T>>
type TouchEventHandler<T = Element> = EventHandler<React.TouchEvent<T>>
type PointerEventHandler<T = Element> = EventHandler<React.PointerEvent<T>>
type UIEventHandler<T = Element> = EventHandler<React.UIEvent<T>>
type WheelEventHandler<T = Element> = EventHandler<React.WheelEvent<T>>
type AnimationEventHandler<T = Element> = EventHandler<React.AnimationEvent<T>>
type TransitionEventHandler<T = Element> = EventHandler<
React.TransitionEvent<T>
>
关于为何是用 bivarianceHack 而不是(event: E): void，这与 strictfunctionTypes 选项下的功能兼容性有关。(event: E): void，如果该参数是派生类型，则不能将其传递给参数是基类的函数。
Promise 类型
使用 async 函数时候函数调用 会 return 一个 Promise 对象，可以使用 then 方法添加回调函数。Promise 是一个泛型类型，T 泛型变量用于确定 then 方法时接收的第一个回调函数的参数类型。
Generic type
当我们需要一个 id 函数，函数的参数可以是任何值，返回值就是将参数原样返回，并且其只能接受一个参数，在 js 时代我们会很轻易地甩出一行:
const id = arg => arg
如果不使用泛型，我们只能重复的进行定义
type idBoolean = (arg: boolean) => boolean
type idNumber = (arg: number) => number
type idString = (arg: string) => string
使用泛型:
function id<T>(arg: T): T {
return arg
}
// 或
const id1: <T>(arg: T) => T = arg => {
return arg
}
泛型参数的组件
const TestB = ({ name, name2 }: { name: string; name2?: string }) => {
return (
<div className="test-b">
TestB--{name}
{name2}
</div>
)
}
如果想不指定传参格式，而是想通过传入参数的类型去推导实际类型，这就要用到泛型:
type Props<T> = {
name: T
chineseName?: T
}
const TestC: <T>(props: Props<T>) => React.ReactElement = ({ name, chineseName }) => {
return (
<div className="test-b">
TestB--{name}
{chineseName}
</div>
)
}
const TestD = () => {
return (
<div>
<TestC<string> name="123" />
</div>
)
}
什么时候使用泛型?
- 函数参数/返回值 是多种类型的时候
- 需要被用到很多地方的时候，比如常用的工具泛型 Partial:
// 将类型的属性变成可选
type Partial<T> = { [P in keyof T]?: T[P] }
// 使用递归实现深层属性可选
type DeepPartial<T> = T extends Function
? T
: T extends object
? { [P in keyof T]?: DeepPartial<T[P]> }
: T
type PartialedWindow = DeepPartial<Window>
