美文网首页
React中,ts定义类型的写法

React中,ts定义类型的写法

作者: IamaStupid | 来源:发表于2024-07-29 16:27 被阅读0次

    定义一个普通变量

    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) {
    ...
    }
    

    相关文章

      网友评论

          本文标题:React中,ts定义类型的写法

          本文链接:https://www.haomeiwen.com/subject/yjjwhjtx.html