学习【Typescript】使用总结

* 使用总结

1、[key: string]: any

interface TAnyField {
    [key: string]: any;
};

[key: string]: any表示这个接口可以包含任意数量的属性，这些属性的键的字符串类型，值可以是任意类型(any)

这个接口是使用场景是需要一个灵活的对象结构，其中键和值的类型不固定，如：

const example: TAnyField = {
    name: "John",
    age: 30,
    isStudent: false
};

2、keyof & typeof

• keyof：用于获取一个对象类型中所有键的联合类型。会生成一个新的类型，这个类型包含了原类型中所有属性的键名

  interface Person {
    name: string,
    age: number
  }
  // 想要获取这个接口中所有键的联合类型
  type PersonKeys = keyof Person;
  // 等同于
  type PersonKeys = "name" | "age"
  

  在处理泛型，动态属性访问以及构建更复杂的类型映射时

• typeof：用于获取一个变量或值的类型。

  const obj = { x: 1, y: 2 };  
  type ObjType = typeof obj; // ObjType 的类型为 { x: number; y: number; }  
  ​
  const arr = [1, 2, 3];  
  type ArrType = typeof arr; // ArrType 的类型为 number[]  
  ​
  function greet(name: string): void {  
      console.log(`Hello, ${name}!`);  
  }  
  type GreetType = typeof greet; // GreetType 的类型为 (name: string) => void
  

解决：动态设置 formState 报错

formState[currentField]，currentField报错

const formState = {
  name: '',
  age: 0
}
const {field} = props
const currentField = field as keyof typeof formState
// formState[currentField]
​

type a = typeof formState a 的类型{name: string, age: number}

type b = keyof a b 的类型 name | age

const c = field as b field 的值是 formState 对象中一个有效性的键

3、unknown、any、never

• unknown：表示一个未知的类型，不确定一个变量的类型时使用

  • 与 any 不同，unknown 类型的变量在使用之前需要进行类型检查或者类型断言
  • unknown 类型可以被分配给 unknown 或者 any 类型，但不能被分配给其他任何类型

  let value: unknown;
  value = 42; // 可以
  value = 'hello'; // 可以
  ​
  if (typeof value === 'string') {
    console.log(value.length); // 可以,因为已经进行了类型检查
  }
  ​
  let x: string = value; // 错误,需要类型断言
  let y: string = value as string; // 正确
  

• any：类型可以被分配给任何其他类型。赋给其他变量，其他变量的类型也会被修改成any类型

unknown 和 any 都有它们各自的用途,但 unknown 更加类型安全,因为它要求您在使用该类型之前进行类型检查或断言。当您不确定变量的类型时,使用 unknown 通常是更好的选择,因为它可以帮助您编写更加健壮和可维护的代码。

• never：表示一个永远不会发生的情况

  • 穷尽性检查：在 switch 语句中，当你确保已经覆盖了所有可能的情况时，可以将 default 分支的类型设置成 never

  • 类型保护：当确定一个变量的类型永远不会是某种特定类型时，可以用 never 来表示这种情况，以增强类型安全性

  • 异常处理：当一个函数抛出异常而不会返回任何值时，可以将其返回类型设置为 never

  • 无限循环：当一个函数包含一个无限循环时，其返回类型可以是 never

    function infiniteLoop(): never {
      while (true) {
        // 永远执行下去
      }
    }
    

4、Partial

Partial<T>创建一个新的类型，其属性都是可选的

• 部分对象更新：更新一个对象的部分属性，使用Partial<T>创建一个新对象，只包含需要更新的属性

  interface User {
    name: string;
    email: string;
    age: number;
  }
  ​
  const updateUser = (user: User, patch: Partial<User>) => {
    return { ...user, ...patch };
  };
  ​
  const existingUser: User = {
    name: 'John Doe',
    email: 'john@example.com',
    age: 30
  };
  ​
  const updatedUser = updateUser(existingUser, { email: 'new@example.com' });
  // updatedUser 现在是 { name: 'John Doe', email: 'new@example.com', age: 30 }
  

• 表单初始化：使用 Partial<T> 可以方便地创建一个包含所有表单字段的初始对象,其中部分字段可以为空。

  interface FormState {
    name: string;
    email: string;
    password: string;
  }
  ​
  const initialFormState: Partial<FormState> = {
    name: '',
    email: '',
    password: ''
  };
  

• API响应处理：创建一个新对象,其属性是可选的,以匹配 API 响应的结构。

  interface User {
    id: number;
    name: string;
    email: string;
  }
  ​
  const fetchUser = async (id: number): Promise<Partial<User>> => {
    const response = await fetch(`/api/users/${id}`);
    return await response.json();
  };