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) {
...
}
上一篇下一篇

猜你喜欢

热点阅读