在介绍TS类、泛型的使用之前,先介绍一下什么是TypeScript
TypeScript是一种开源的编程语言,它是JavaScript的超集。其添加了静态类型检查和其他一些特性,以提供更好的开发工具和代码质量。TypeScript代码可以通过编译器转换为JavaScript代码,然后在任何支持JavaScript的环境中运行。
TypeScript的主要特性包括: 1.静态类型检查:TypeScript可以在编译时捕获类型错误,提供更好的代码质量和可维护性。
2.类型注解:可以为变量、函数参数和返回值等添加类型注解,以提供更明确的类型信息。
3.类和接口:TypeScript支持面向对象编程,可以定义类和接口,并实现继承和多态等概念。
4.泛型:可以使用泛型来提供更灵活的类型支持,以处理不同类型的数据。
5.ES6+支持:TypeScript支持ECMAScript 6及以上版本的语法和特性。
6.工具和生态系统:TypeScript拥有丰富的工具和生态系统,包括编辑器插件、开发工具和第三方库等。
TypeScript广泛用于Web开发和Node.js开发,特别是在大型项目和团队中。它提供了更好的代码组织和维护性,并且可以与JavaScript库和框架无缝集成。
再介绍一下什么是泛型,在编程中,常常会遇到需要在多个地方使用相同的逻辑,但操作的数据类型可能不同的情况。泛型就提供了一种通用的方式来处理这种情况。它允许我们在定义函数、类或接口时使用类型参数,以便在使用时指定具体的类型。
泛型函数
以一个简单的例子来说明泛型函数的使用方法:
假设有一个函数identity,它接收一个参数并返回该参数:
function identity(arg: any): any { return arg; }
这个函数可以接受任何类型的参数,并返回相同类型的值。但是,我们希望在调用函数时能够指定参数的类型,并且返回值的类型应该与参数的类型相同。
于是重写这个函数,这时使用泛型:
function identity(arg: T): T { return arg; } 在这个示例中,表示类型参数,我们可以在函数名称后面使用它。T可以是任何标识符,它只是一个约定,表示任意类型。现在,我们可以在调用函数时指定参数的类型:
let result = identity("Hello"); 在这个示例中,我们使用了string作为类型参数,这样函数就会接受一个字符串类型的参数,并且返回值也是字符串类型。
泛型类和接口 除了函数,我们还可以在类和接口中使用泛型。让我们以一个简单的示例来说明:
class Box { private value: T; constructor(value: T) { this.value = value; } getValue(): T { return this.value; } } interface Pair<T, U> { first: T; second: U; } 在这个示例中,我们定义了一个泛型类Box,它包含一个私有属性value和一个返回值为泛型类型的方法getValue。我们还定义了一个泛型接口Pair,它有两个类型参数T和U,并包含first和second两个属性。
我们可以使用泛型类和接口来创建特定类型的对象:
let box = new Box(10); let value = box.getValue(); let pair: Pair<string, number> = { first: "Hello", second: 20 };
在这个示例中,我们创建了一个Box对象,它的类型参数是number,并传递了一个数字类型的值。我们还创建了一个Pair对象,它的类型参数分别是string和number,并指定了first和second的值。
类型约束
泛型不仅可以提供灵活性,还可以增加代码的安全性。通过使用类型约束,我们可以限制泛型参数的类型范围。
让我们以一个示例来说明类型约束的使用方法。假设我们有一个函数printLength,它接收一个参数并打印出参数的长度:
function printLength(arg: T): void { console.log(arg.length); } 在这个函数中,我们假设参数具有length属性,以便获取它的长度。但是,如果我们传递一个没有length属性的参数,函数将会抛出一个错误。
为了解决这个问题,我们可以使用类型约束来限制泛型参数的类型。我们可以使用extends关键字来指定泛型参数必须是一个具有length属性的类型:
interface Length { length: number; } function printLength(arg: T): void { console.log(arg.length); }
现在,当我们尝试传递一个没有length属性的参数时,TypeScript编译器将会给出一个错误提示。
printLength("Hello"); // 正确,字符串具有length属性 printLength(10); // 错误,数字没有length属性 通过使用类型约束,我们可以在编译时捕获一些错误,并提供更好的代码安全性。
下面我将给大家分享6种实用类型,也是我们经常用到的。
1.Partial
Partial 构造一个类型,其所有类型属性都设置为可选。这在我们为对象编写更新逻辑时非常有用。
type User = { name: string age: number address: string occupation: string } type PartialUser = Partial // type PartialUser = { // name?: string; // age?: number; // address?: string; // occupation?: string; // }
2.Required Required 与 Partial 相反。它构造一个类型,其中需要该类型的所有属性。它可用于确保没有可选属性出现在类型中。
type PartialUser = { name: string age: number address?: string occupation?: string } type User = Required // type User = { // name: string; // age: number; // address: string; // occupation: string; // }
3.Pick<Type, Keys> Pick 将从 Type 中选取属性集 Keys 以创建新类型。键可以是字符串文字或字符串文字的并集。Keys 的值必须是 Type 的键,否则 TypeScript 编译器会报错。当您想要通过从具有许多属性的对象中选取某些属性来创建更轻的对象时,此实用程序类型特别有用。
type User = { name: string age: number address: string occupation: string } type BasicUser = Pick<User, "name" | "age"> // type BasicUser = { // name: string; // age: number; // }
4.Omit<Type, Keys> 省略与选择相反。keys 不是关于保留哪些属性,而是要省略的属性键集。当我们只想从对象中删除某些属性并保留其他属性时,这会更有用。
type User = { name: string age: number address: string occupation: string } type BasicUser = Omit<User, "address" | "occupation"> // type BasicUser = { // name: string; // age: number; // }
5.Readonly
Readonly 构造一个类型,该类型的所有属性都设置为只读。给 TS 重新赋新值会报错。
type User = { name: string age: number address: string occupation: string } type ReadOnlyUser = Readonly const user: ReadOnlyUser = { name: "Mark", age: 34, address: "Chicago", occupation: "IT Engineer" } user.name = "Maxwell" // Cannot assign to 'name' because it is a read-only property.
6.ReturnType
ReturnType 从函数类型的返回类型构造一个类型。当我们处理来自外部库的函数类型并希望基于它们构建自定义类型时,它很有用。
import axios from 'axios' type Response = ReturnType function callAPI(): Response{ return axios("url") }
除了上面提到的那些,还有其他实用程序类型可以帮助我们编写更干净的代码。还需要大家多加练习,在实际应用中获得进步。