TypeScript使用技巧

TypeScript作为JavaScript的超集,通过提供静态类型系统和对ES6+新特性的支持,使JavaScript开发变得更加高效和可维护。掌握TypeScript的使用技巧,可以帮助我们更好地开发和组织JavaScript项目。刚开始用的时候感觉好多限制，特别是配置静态类型检测后就容易各种报错，恨不得都用any， 那岂不是成了AnyScript，不过熟能生巧，用得多了就会爱上这个语言。这里总结了一些平时用到ts技巧。

使用技巧

当使用TypeScript进行开发时，有一些常用的技巧可以帮助你提高代码质量和开发效率。以下是一些TypeScript使用技巧：

1. 类型注解和类型推断：尽量为变量、函数参数、函数返回值等添加类型注解，以增加代码的可读性和类型安全性。同时，TypeScript也会自动推断很多类型，充分利用类型推断特性。

2. 使用接口和类型别名：使用接口和类型别名来定义自定义类型，使代码更具表达力和清晰度。

// 使用接口
interface Person {
  name: string;
  age: number;
}

// 使用类型别名
type Point = { x: number; y: number };

3. 泛型：使用泛型来增加代码的灵活性，使函数和类能够处理多种类型的数据。

function toArray<T&gt;(value: T): T[] {
  return [value];
}

4. 枚举：使用枚举来定义一组具有名字的常量值，提高代码可读性。

enum Color {
  Red,
  Green,
  Blue,
}

5. 非空断言和可选链：使用非空断言（!）来告诉编译器一个值一定不为null或undefined，使用可选链（?.）来简化处理可能为null或undefined的属性和方法。

const name: string = maybeName!; // 非空断言
const age = person?.age; // 可选链

6. 确定赋值断言：在声明变量时使用确定赋值断言（!）来告诉编译器该变量一定会在使用前被赋值。

let value!: number;

TypeScript内置的工具类型

当使用 TypeScript 进行开发时，有一些常用的类型工具（utility types）可以帮助你更好地处理类型，并提高代码质量和开发效率。下面是对 Partial、Record、Pick、Omit、Exclude 和 Parameters 这些类型工具的中文详细解释：

1. Partial<Type>（部分类型）:

   • Partial 是 TypeScript 内置的一个类型工具，用于使给定类型的所有属性变为可选属性。
   • 它创建了一个新的类型，其中给定类型 Type 的所有属性都变成了可选属性。
   • 示例：

   interface Person {
     name: string;
     age: number;
   }
   
   type PartialPerson = Partial<Person>;
   
   // 等同于：
   // interface PartialPerson {
   //   name?: string;
   //   age?: number;
   // }
   

2. Record<Key, Type>（记录类型）:

   • Record 是 TypeScript 内置的类型工具，用于创建一个由指定键和给定值类型组成的对象类型。
   • 它接受两个类型参数 Key 和 Type，并创建一个对象类型，其中每个属性的键是类型 Key，值是类型 Type。
   • 示例：

   type AgeMap = Record<string, number>;
   
   // 等同于：
   // interface AgeMap {
   //   [key: string]: number;
   // }
   

3. Pick<Type, Keys>（挑选类型）:

   • Pick 是 TypeScript 内置的类型工具，用于从给定类型中挑选出特定的属性形成新的类型。
   • 它接受两个类型参数 Type 和 Keys，并创建一个新的类型，其中只包含类型 Type 中由 Keys 指定的属性。
   • 示例：

   interface Person {
     name: string;
     age: number;
     address: string;
   }
   
   type PersonNameAndAge = Pick<Person, "name" | "age">;
   
   // 等同于：
   // interface PersonNameAndAge {
   //   name: string;
   //   age: number;
   // }
   

4. Omit<Type, Keys>（省略类型）:

   • Omit 是 TypeScript 内置的类型工具，用于从给定类型中省略特定的属性形成新的类型。
   • 它接受两个类型参数 Type 和 Keys，并创建一个新的类型，其中包含了类型 Type 中除了 Keys 指定的属性以外的所有属性。
   • 示例：

   interface Person {
     name: string;
     age: number;
     address: string;
   }
   
   type PersonWithoutAddress = Omit<Person, "address">;
   
   // 等同于：
   // interface PersonWithoutAddress {
   //   name: string;
   //   age: number;
   // }
   

5. Exclude<Type, ExcludedUnion>（排除类型）:

   • Exclude 是 TypeScript 内置的类型工具，用于从给定类型中排除可以赋值给 ExcludedUnion 的成员。
   • 它接受两个类型参数 Type 和 ExcludedUnion，并创建一个新的类型，其中只包含类型 Type 中不可赋值给 ExcludedUnion 的成员。
   • 示例：

   type MyNumbers = number | string | boolean;
   
   type OnlyNumbers = Exclude<MyNumbers, string | boolean>;
   
   // 等同于：
   // type OnlyNumbers = number;
   

6. Parameters<Type>（函数参数类型）:

   • Parameters 是 TypeScript 内置的类型工具，用于从给定函数类型中提取出参数的类型。
   • 它接受一个函数类型 Type 作为参数，并返回一个由该函数的参数类型组成的元组类型。
   • 示例：

   type MyFunction = (name: string, age: number) => void;
   
   type FunctionParameters = Parameters<MyFunction>;
   
   // 等同于：
   // type FunctionParameters = [string, number];
   

keyof

在 TypeScript 中，keyof 是一个关键字和类型操作符，它用于获取一个类型的所有属性名组成的联合类型。keyof 可以结合泛型、索引类型等特性来实现许多有用的类型操作。

使用 keyof 的语法是 keyof Type，其中 Type 是一个类型。它返回一个联合类型，包含了 Type 类型中所有属性的名称。这个联合类型可以用来访问或操作 Type 类型中的属性。keyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键。

下面是一个简单的示例代码：

interface Person {
  name: string;
  age: number;
  gender: string;
}

type PersonKey = keyof Person;
// 等同于：type PersonKey = "name" | "age" | "gender"

在这个例子中，keyof Person 返回一个联合类型，包含了 Person 类型中所有属性的名称。结果类型是 "name" | "age" | "gender"。

keyof 可以与其他 TypeScript 特性结合使用，例如：

1. 通过索引类型访问对象属性：

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

const person: Person = { name: "Alice", age: 30, gender: "female" };
const name = getProperty(person, "name"); // name的类型是string

2. 确定属性是否存在：

function hasProperty<T, K extends keyof T>(obj: T, key: K): boolean {
  return key in obj;
}

const hasAge = hasProperty(person, "age"); // hasAge的值是true
const hasEmail = hasProperty(person, "email"); // hasEmail的值是false

extends 限定泛型

在 TypeScript 中，可以使用 extends 关键字来限定泛型类型的范围，确保传入的泛型参数满足一定的条件。这种方式称为”泛型约束“或”泛型限定”。通过泛型约束，我们可以对泛型进行更精确的类型检查，提高代码的类型安全性。

下面是几个使用 extends 关键字限定泛型的例子：

1. 简单的泛型约束：

function printProperty<T extends { name: string }>(obj: T) {
  console.log(obj.name);
}

printProperty({ name: "Alice", age: 30 }); // OK
printProperty({ age: 30 }); // Error: 缺少name属性

在这个例子中，使用 extends { name: string } 来限定泛型 T 必须具有一个 name 属性，否则会在调用时报错。

2. 使用多个泛型约束：

function combine<T extends string, U extends string>(a: T, b: U): string {
  return a + b;
}

const result = combine("Hello, ", "TypeScript"); // result的值是 "Hello, TypeScript"

在这个例子中，使用 extends string 来限定泛型 T 和 U 必须是 string 类型，确保只有 string 类型的参数可以传入函数 combine 中。

3. 使用接口约束泛型：

interface Lengthwise {
  length: number;
}

function printLength<T extends Lengthwise>(obj: T) {
  console.log(obj.length);
}

printLength("Hello"); // 输出: 5
printLength([1, 2, 3]); // 输出: 3

在这个例子中，使用 extends Lengthwise 来限定泛型 T 必须满足 Lengthwise 接口，即必须有一个 length 属性。

interface 与 type 区别

在 TypeScript 中，interface 和 type 是两种用来定义类型的方式，它们有一些相似之处，但也有一些不同之处。下面是它们的区别：

1. interface：

   • interface 是用来描述对象的形状的类型声明。
   • 它可以用来定义对象的结构，包含属性、方法和索引签名等。
   • interface 可以被合并，当多次定义同名的 interface 时，它们会自动合并为一个。

   interface Person {
     name: string;
     age: number;
   }
   
   interface Person {
     gender: string;
   }
   
   // 合并后等同于：
   // interface Person {
   //   name: string;
   //   age: number;
   //   gender: string;
   // }
   

2. type：

   • type 是用来定义任意类型的类型别名。
   • 它可以用来定义原始类型、联合类型、交叉类型、函数类型等。
   • type 不能被合并，当多次定义同名的 type 时，会报错。
   • 要合并需要用 & 连接

   type Age = number;
   
   type Gender = "male" | "female";
   
   type Person = {
     name: string;
     age: Age;
     gender: Gender;
   };
    type both = Person & Age // 这样将两个类型合并成一个
   

3. 使用场景：

   • interface 通常用于描述对象的结构，它更适合用于定义对象和类的类型。
   • type 可以定义更复杂的类型，包括联合类型、交叉类型和函数类型等，它更适合用于定义临时的类型别名。

代码007普通

打赏 收藏 海报 链接