React中,ts定义类型的写法
2024-07-29 本文已影响0人
IamaStupid
定义一个普通变量
let flag:boolean = false
let updateMember: Object | number | null = 1;
通过useRef定义一个Dom对象,从而获取dom的value
let pwdRef = useRef<HTMLInputElement>(null);
定义一个有参数,有返回值的普通函数
function sum(a:number, b:number): number {
return a + b
}
定义一个弹窗组件,组件函数的参数类型,用type这种方式来定义
type UserEditProps = { ajaxAddUser: Function };
function UserEditModal({ ajaxAddUser }: UserEditProps) {
......
}
export default UserEditModal;
用as、限定值类型来定义useState变量
type AlertStatus = 'error' | 'info' | 'warning' | 'success' | 'loading' | undefined;
function UserPage() {
....
let [alertObx, setAlertObx] = useState({
isVisible: false,
status: undefined,
desp: ''
} as { isVisible: boolean; status: AlertStatus; desp: string });
....
return (
......
{alertObx.isVisible && (
<Alert status={alertObx.status} className="chakra-alert-my1">
<AlertIcon />
{alertObx.desp}
</Alert>
)}
......
)
}
export default UserPage;
一个复杂的对象,如果只用到其中的某个属性,可以简单只定义它,其他不用的,可以不定义
export const addUserList = (data: { password: string }) =>
POST('/support/user/account/add', {
...data,
password: hashStr(data.password)
});
// 如果只定义data:Object,会报错:Object属性没有password
// 但如果把User里面的属性全部定义一遍,是个工作量很大的事情,偷懒一下,只定义这个password即可
定义一个{key: value},但是value必须是string,这样的对象类型
type KeyValueString = {
[key: string]: string; // 对象的键是任意的字符串,值是字符串类型
};
export async function updateMember(userId: string, param: KeyValueString) {
...
}