使用 TypeScript 在 useState React Hook 上设置类型
Set types on useState React Hook with TypeScript
我正在迁移 React with TypeScript 项目以使用钩子功能 (React v16.7.0-alpha),但我不知道如何设置解构元素的类型。
这是一个例子:
interface IUser {
name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});
我想强制 user
变量为 IUser
类型。我唯一成功的尝试是分两个阶段进行:键入,然后初始化:
let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});
但我确信有更好的方法。此外,setUser
应该被初始化为一个函数,它接受 IUser
作为输入,returns 什么都没有。
此外,值得注意的是,使用 const [user, setUser] = useState({name: 'Jon'});
没有任何初始化工作正常,但我想利用 TypeScript 强制对 init 进行类型检查,特别是如果它依赖于某些道具。
感谢您的帮助。
使用这个
const [user, setUser] = useState<IUser>({name: 'Jon'});
首先 useState
采用泛型,这将是您的 IUser。如果您随后想要传递由 useState
返回的第二个解构元素,您将需要导入 Dispatch。考虑你的示例的这个扩展版本,它有一个点击处理程序:
import React, { useState, Dispatch } from 'react';
interface IUser {
name: string;
}
export const yourComponent = (setUser: Dispatch<IUser>) => {
const [user, setUser] = useState<IUser>({name: 'Jon'});
const clickHander = (stateSetter: Dispatch<IUser>) => {
stateSetter({name : 'Jane'});
}
return (
<div>
<button onClick={() => { clickHander(setUser) }}>Change Name</button>
</div>
)
}
看到这个answer。
您也可以在之前声明初始状态,然后可以随时调用它:
type User = typeof initUser;
const initUser = {name: 'Jon'}
...
const [user, setUser] = useState<User>(initUser);
关于我的接口前缀:https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface
https://fettblog.eu/typescript-react/hooks/
// import useState next to FunctionComponent
import React, { FunctionComponent, useState } from 'react';
// our components props accept a number for the initial value
const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
// since we pass a number here, clicks is going to be a number.
// setClicks is a function that accepts either a number or a function returning
// a number
const [clicks, setClicks] = useState(initial);
return <>
<p>Clicks: {clicks}</p>
<button onClick={() => setClicks(clicks+1)}>+</button>
<button onClick={() => setClicks(clicks-1)}>-</button>
</>
}
class Form {
id: NullNumber = null;
name = '';
startTime: NullString = null;
endTime: NullString = null;
lunchStart: NullString = null;
lunchEnd: NullString = null;
[key: string]: string | NullNumber;
}
export const EditDialog: React.FC = () => {
const [form, setForm] = useState<Form>(new Form());
const inputChange = (e: ChangeEvent<HTMLInputElement>) => {
const element = e.target;
setForm((form: Form) => {
form[element.name] = element.value;
return form;
})
}
return (
<Box pt={3}>
<TextField
required
name="name"
label="Наименование"
defaultValue={form.name}
onChange={inputChange}
fullWidth
/>
</Box>
);
}
我正在迁移 React with TypeScript 项目以使用钩子功能 (React v16.7.0-alpha),但我不知道如何设置解构元素的类型。
这是一个例子:
interface IUser {
name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});
我想强制 user
变量为 IUser
类型。我唯一成功的尝试是分两个阶段进行:键入,然后初始化:
let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});
但我确信有更好的方法。此外,setUser
应该被初始化为一个函数,它接受 IUser
作为输入,returns 什么都没有。
此外,值得注意的是,使用 const [user, setUser] = useState({name: 'Jon'});
没有任何初始化工作正常,但我想利用 TypeScript 强制对 init 进行类型检查,特别是如果它依赖于某些道具。
感谢您的帮助。
使用这个
const [user, setUser] = useState<IUser>({name: 'Jon'});
首先 useState
采用泛型,这将是您的 IUser。如果您随后想要传递由 useState
返回的第二个解构元素,您将需要导入 Dispatch。考虑你的示例的这个扩展版本,它有一个点击处理程序:
import React, { useState, Dispatch } from 'react';
interface IUser {
name: string;
}
export const yourComponent = (setUser: Dispatch<IUser>) => {
const [user, setUser] = useState<IUser>({name: 'Jon'});
const clickHander = (stateSetter: Dispatch<IUser>) => {
stateSetter({name : 'Jane'});
}
return (
<div>
<button onClick={() => { clickHander(setUser) }}>Change Name</button>
</div>
)
}
看到这个answer。
您也可以在之前声明初始状态,然后可以随时调用它:
type User = typeof initUser;
const initUser = {name: 'Jon'}
...
const [user, setUser] = useState<User>(initUser);
关于我的接口前缀:https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface
https://fettblog.eu/typescript-react/hooks/
// import useState next to FunctionComponent
import React, { FunctionComponent, useState } from 'react';
// our components props accept a number for the initial value
const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
// since we pass a number here, clicks is going to be a number.
// setClicks is a function that accepts either a number or a function returning
// a number
const [clicks, setClicks] = useState(initial);
return <>
<p>Clicks: {clicks}</p>
<button onClick={() => setClicks(clicks+1)}>+</button>
<button onClick={() => setClicks(clicks-1)}>-</button>
</>
}
class Form {
id: NullNumber = null;
name = '';
startTime: NullString = null;
endTime: NullString = null;
lunchStart: NullString = null;
lunchEnd: NullString = null;
[key: string]: string | NullNumber;
}
export const EditDialog: React.FC = () => {
const [form, setForm] = useState<Form>(new Form());
const inputChange = (e: ChangeEvent<HTMLInputElement>) => {
const element = e.target;
setForm((form: Form) => {
form[element.name] = element.value;
return form;
})
}
return (
<Box pt={3}>
<TextField
required
name="name"
label="Наименование"
defaultValue={form.name}
onChange={inputChange}
fullWidth
/>
</Box>
);
}