刘勇虎的官方网站

目录

• 目录
  • 可选参数与结构
  • Utility Types
    • 转可选类型 - Partial<Type>
    • 转必填类型 - Required<Type>
    • 只读类型 - Readonly<Type>
    • 构造类型 - Record<Keys, Type>
  • 类型推断
    • 默认类型推断
    • 显式类型注解
  • 接口与类型别名
    • 接口
    • 类型别名
  • 常见类型错误
    • 类型不匹配
    • 联合类型
    • 交叉类型
  • 总结

可选参数与结构

const originLayout = ({
  lookFor = [],
  savedViews = [],
}: GroupSeniorLayoutParams = {}) => {
  // 函数体
};

在这个例子中，lookFor 和 savedViews 都是可选参数，并且有默认值。这种方式可以避免在调用函数时必须传递所有参数，提高了代码的灵活性。

Utility Types

TypeScript 提供了一些实用的工具类型，可以帮助你在编写类型时更加灵活和方便。

转可选类型 - Partial<Type>

interface User {
  name: string;
  age: number;
}

type PartialUser = Partial<User>; // { name?: string; age?: number; }

Partial<T> 将 T 中的所有属性变为可选。

转必填类型 - Required<Type>

type RequiredUser = Required<PartialUser>; // { name: string; age: number; }

Required<T> 将 T 中的所有属性变为必填。

只读类型 - Readonly<Type>

type ReadonlyUser = Readonly<User>; // { readonly name: string; readonly age: number; }

Readonly<T> 将 T 中的所有属性变为只读。

构造类型 - Record<Keys, Type>

type Keys = 'a' | 'b' | 'c';
type Values = string;

type RecordExample = Record<Keys, Values>; // { a: string; b: string; c: string; }

Record<K, T> 创建一个对象类型，其键为 K，值为 T。

类型推断

TypeScript 的类型推断机制非常强大，但在某些情况下可能会导致意外的结果。

默认类型推断

let message = "Hello, World!";
// message 的类型被推断为 string

显式类型注解

let message: string = "Hello, World!";

显式类型注解可以提高代码的可读性和可维护性。

接口与类型别名

接口

接口主要用于描述对象的结构，可以被实现和继承。

interface User {
  name: string;
  age: number;
}

class Admin implements User {
  name: string;
  age: number;
  role: string;
}

类型别名

类型别名主要用于创建新的类型名称，不能被实现或继承。

type User = {
  name: string;
  age: number;
};

function greet(user: User) {
  console.log(`Hello, ${user.name}!`);
}

常见类型错误

类型不匹配

let value: number = "123"; // Type 'string' is not assignable to type 'number'.

联合类型

let value: string | number = "123";
value = 456; // 合法
value = true; // Type 'boolean' is not assignable to type 'string | number'.

交叉类型

type Admin = { role: string };
type User = { name: string };

type AdminUser = Admin & User;

const adminUser: AdminUser = {
  role: "admin",
  name: "John Doe"
};

Utility Types

转可选类型 - Partial

总结

TypeScript 的类型系统非常强大，但也有一些常见的坑点需要注意。通过了解这些坑点和工具类型，可以更好地利用 TypeScript 编写健壮和可维护的代码。

希望这些内容对你有所帮助！如果有更多具体的问题或需要进一步补充的内容，请告诉我。