目录
- 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;
}
