TypeScript（-1）：ts + react 常用知识点

目录

• 1 class 组件 props 约束
• 2 class 组件 state 约束
• 3 函数组件 props 约束
• 4 useState 约束

1 class 组件参数 props 约束

可以使用接口 interface 或者 类型 type 对类的 props 进行约束，如下：

interface IProps {
  name: string;
  age?: number;
}

或者

type IProps = {
   name: string;
  age?: number;
}

class Form extends React.Component<IProps> {
  ...
}

2 class 组件的 state 约束

• 第一种方式，对 class 类的 state 状态进行约束，可以通过在类头部新增约束，如下：

interface IProps {
  data: string;
}

interface IState {
  name: string;
  age: number;
}

class Form extends React.Component<IProps, IState> {
  state = {
    name: '1111',
    age: 11
  }
  ...
}

• 另外，可以直接在 state 后面新增约束，如下：

interface IProps {
  data: string;
}

interface IState {
  name: string;
  age: number;
}

class Form extends React.Component<IProps> {
  state: IState = {
    name: '1111',
    age: 11
  }
  ...
}

3 函数组件 props 约束

与 class 组件相比，函数组件约束 props，会有所不同，代码如下：

import React from 'react';

interface IProps {
  data: string;
}

const Func = (props: IProps) => {
  ...
}

export default Func;

同时，也可以对 props 参数进行解构，如下：

import React from 'react';

interface IProps {
  data: string;
}

const Func = ({ data }: IProps) => {
  ...
}

export default Func;

另外，也是可以利用 React.FunctionComponent，对函数组件进行 泛型 约束，代码如下：

import React from 'react';

interface IProps {
  data: string;
}

const Func: React.FunctionComponent<IProps> = ({ data }) => {
  ...
}

export default Func;

4 useState 约束

const [name, setName] = useState<string>('');

5 input onChange 事件， event 参数参数约束

export interface IInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
  /** input 大小 */
  size?: InputSize;
  /** input 是否禁用 */
  disabled?: boolean;
  /** input 图标 */
  icon?: React.ReactNode;
  /** input 前缀 */
  prepend?: string | ReactElement;
  /** input 后缀 */
  suffix?: string;
  /** input 类名 */
  className?: string;
  /** onChange 事件 */
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}


<Input
  placeholder="请输入"
  className="my-input"
  size="md"
  prepend="https://"
  suffix=".com"
  icon={<SearchOutlined />}
  onChange={e => onChangeInput(e)}
  defaultValue="1212"
  value="323"
/>


function onChangeInput(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}

<input type="text" onChange="this.handleChange" value="111">

handleChange = (e: React.FormEvent<HTMLInputElement>) => {
  ...
}

小技巧，多个 input，使用同一个函数处理：

interface ISate {
  age: number;
  name: string;
  [key: string]: number | string;
}

class Form extends Component<{}, ISate> {
  state = {
    name: '',
    age: 0
  }
  
  handleChange = (e: React.FormEvent<HTMLInputElement>) => {
    const { name, value }: { name: string, value: number | string } = e.currentTarget;
    this.setState({
      [name]: value
    })
  }

  render() {
    return (
      <div>
        <input type="text" name="name" value={this.state.name} />
        <input type="text" name="age" value={this.state.age} />
      </div>
    )
  }  

}

6 数组定义

enum Player {
  One: 1, 
  Two: 2,
}

interface IState {
  board: Player[]
}

class Form extends Component<{}, ISate> {
  state = {
    board: [Player.One, Player.Two],
  }
  
}

7 填坑

7.1 接口不相容，使用 Omit 解决

Interface 'IAutoCompleteProps' incorrectly extends interface 'IInputProps'.
Types of property 'onSelect' are incompatible.
...

这个报错的意思为 IAutoCompleteProps 接口错误的继承 IInputProps，IAutoCompleteProps 定义的接口 onSelect 和 IInputProps 的 onSelect 不相容。

解决的方案是可以使用 ts 提供的 Omit 方法解决， Omit 的意思为使用我们自定好的接口，如下：

export interface IAutoCompleteProps extends Omit<IInputProps, 'onSelect'>{
  /** fetchSuggest 事件 */
  fetchSuggest?: (keyword: string) => string[];
  /** onSelect 事件 */
  onSelect?: (item: string) => void;
}