每个开发人员都应该了解的高级打字稿概念

TypeScript 是一种现代编程语言，由于其附加的类型安全性，通常比 JavaScript 更受青睐。在本文中，我将分享 10 个最重要的 TypeScript 概念，这将有助于提高您的 TypeScript 编程技能。准备好了吗？开始吧。

1.泛型：使用泛型我们可以创建可重用的类型，这将有助于处理今天和明天的数据。
泛型示例：
我们可能想要 Typescript 中的一个函数将参数作为某种类型，并且我们可能想要返回相同的类型。

function func<T>(args:T):T{
    return args;
}

2.具有类型约束的泛型：现在让我们通过定义它只接受字符串和整数来限制类型 T：

function func<T extends string | number>(value: T): T {
    return value;
}

const stringValue = func("Hello"); // Works, T is string
const numberValue = func(42);      // Works, T is number

// const booleanValue = func(true); // Error: Type 'boolean' is not assignable to type 'string | number'

3.通用接口:
当您想要为使用各种类型的对象、类或函数定义契约（形状）时，接口泛型非常有用。它们允许您定义一个蓝图，该蓝图可以适应不同的数据类型，同时保持结构一致。

// Generic interface with type parameters T and U
interface Repository<T, U> {
    items: T[];           // Array of items of type T
    add(item: T): void;   // Function to add an item of type T
    getById(id: U): T | undefined; // Function to get an item by ID of type U
}

// Implementing the Repository interface for a User entity
interface User {
    id: number;
    name: string;
}

class UserRepository implements Repository<User, number> {
    items: User[] = [];

    add(item: User): void {
        this.items.push(item);
    }

     getById(idOrName: number | string): User | undefined {
        if (typeof idOrName === 'string') {
            // Search by name if idOrName is a string
            console.log('Searching by name:', idOrName);
            return this.items.find(user => user.name === idOrName);
        } else if (typeof idOrName === 'number') {
            // Search by id if idOrName is a number
            console.log('Searching by id:', idOrName);
            return this.items.find(user => user.id === idOrName);
        }
        return undefined; // Return undefined if no match found
    }
}

// Usage
const userRepo = new UserRepository();
userRepo.add({ id: 1, name: "Alice" });
userRepo.add({ id: 2, name: "Bob" });

const user1 = userRepo.getById(1);
const user2 = userRepo.getById("Bob");
console.log(user1); // Output: { id: 1, name: "Alice" }
console.log(user2); // Output: { id: 2, name: "Bob" }

4.泛型类：：当您希望类中的所有属性都遵循泛型参数指定的类型时，请使用此选项。这允许灵活性，同时确保类的每个属性都与传递给类的类型匹配。

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

class UserDetails<T extends User> {
    id: T['id'];
    name: T['name'];
    age: T['age'];

    constructor(user: T) {
        this.id = user.id;
        this.name = user.name;
        this.age = user.age;
    }

    // Method to get user details
    getUserDetails(): string {
        return `User: ${this.name}, ID: ${this.id}, Age: ${this.age}`;
    }

    // Method to update user name
    updateName(newName: string): void {
        this.name = newName;
    }

    // Method to update user age
    updateAge(newAge: number): void {
        this.age = newAge;
    }
}

// Using the UserDetails class with a User type
const user: User = { id: 1, name: "Alice", age: 30 };
const userDetails = new UserDetails(user);

console.log(userDetails.getUserDetails());  // Output: "User: Alice, ID: 1, Age: 30"

// Updating user details
userDetails.updateName("Bob");
userDetails.updateAge(35);

console.log(userDetails.getUserDetails());  // Output: "User: Bob, ID: 1, Age: 35"
console.log(new UserDetails("30"));  // Error: "This will throw error" 

5.将类型参数约束为传递的类型：有时，我们希望参数类型依赖于其他一些传递的参数。听起来很混乱，让我们看下面的示例。

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

let x = { a: 1, b: 2, c: 3 };
getProperty(x, "a");  // Valid
getProperty(x, "d");  // Error: Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.

6.条件类型：通常，我们希望我们的类型是一种类型或另一种类型。在这种情况下，我们使用条件类型。
一个简单的例子是：

function func(param:number|boolean){
return param;
}
console.log(func(2)) //Output: 2 will be printed
console.log(func("True")) //Error: boolean cannot be passed as argument

有点复杂的例子：

type HasProperty<T, K extends keyof T> = K extends "age" ? "Has Age" : "Has Name";

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

let test1: HasProperty<User, "age">;  // "Has Age"
let test2: HasProperty<User, "name">; // "Has Name"
let test3: HasProperty<User, "email">; // Error: Type '"email"' is not assignable to parameter of type '"age" | "name"'.

6.交集类型：当我们想要将多种类型合并为一个类型时，这些类型非常有用，允许特定类型继承各种其他类型的属性和行为。
让我们看一个有趣的例子：

// Defining the types for each area of well-being

interface MentalWellness {
  mindfulnessPractice: boolean;
  stressLevel: number; // Scale of 1 to 10
}

interface PhysicalWellness {
  exerciseFrequency: string; // e.g., "daily", "weekly"
  sleepDuration: number; // in hours
}

interface Productivity {
  tasksCompleted: number;
  focusLevel: number; // Scale of 1 to 10
}

// Combining all three areas into a single type using intersection types
type HealthyBody = MentalWellness & PhysicalWellness & Productivity;

// Example of a person with a balanced healthy body
const person: HealthyBody = {
  mindfulnessPractice: true,
  stressLevel: 4,
  exerciseFrequency: "daily",
  sleepDuration: 7,
  tasksCompleted: 15,
  focusLevel: 8
};

// Displaying the information
console.log(person);

7.infer 关键字：当我们想要有条件地确定特定类型时，infer 关键字很有用，并且当满足条件时，它允许我们从该类型中提取子类型。
这是一般语法：

type ConditionalType<T> = T extends SomeType ? InferredType : OtherType;

示例：

type ReturnTypeOfPromise<T> = T extends Promise<infer U> ? U : number;

type Result = ReturnTypeOfPromise<Promise<string>>;  // Result is 'string'
type ErrorResult = ReturnTypeOfPromise<number>;      // ErrorResult is 'never'

const result: Result = "Hello";
console.log(typeof result); // Output: 'string'

8.Type Variance：这个概念讨论了子类型和父类型如何相互关联。
它们有两种类型：
协方差：可以在需要父类型的地方使用子类型。
让我们看一个例子：

function func<T>(args:T):T{
    return args;
}

在上面的示例中，Car 继承了 Vehicle 类的属性，因此将其分配给需要超类型的子类型是绝对有效的，因为子类型将具有超类型所具有的所有属性。
逆变：这与协变相反。我们在子类型应该出现的地方使用超类型。

function func<T extends string | number>(value: T): T {
    return value;
}

const stringValue = func("Hello"); // Works, T is string
const numberValue = func(42);      // Works, T is number

// const booleanValue = func(true); // Error: Type 'boolean' is not assignable to type 'string | number'

使用逆变时，我们需要小心不要访问特定于子类型的属性或方法，因为这可能会导致错误。

9。反思： 这个概念涉及在运行时确定变量的类型。虽然 TypeScript 主要关注编译时的类型检查，但我们仍然可以利用 TypeScript 运算符在运行时检查类型。
typeof 运算符：我们可以利用 typeof 运算符在运行时查找变量的类型

// Generic interface with type parameters T and U
interface Repository<T, U> {
    items: T[];           // Array of items of type T
    add(item: T): void;   // Function to add an item of type T
    getById(id: U): T | undefined; // Function to get an item by ID of type U
}

// Implementing the Repository interface for a User entity
interface User {
    id: number;
    name: string;
}

class UserRepository implements Repository<User, number> {
    items: User[] = [];

    add(item: User): void {
        this.items.push(item);
    }

     getById(idOrName: number | string): User | undefined {
        if (typeof idOrName === 'string') {
            // Search by name if idOrName is a string
            console.log('Searching by name:', idOrName);
            return this.items.find(user => user.name === idOrName);
        } else if (typeof idOrName === 'number') {
            // Search by id if idOrName is a number
            console.log('Searching by id:', idOrName);
            return this.items.find(user => user.id === idOrName);
        }
        return undefined; // Return undefined if no match found
    }
}

// Usage
const userRepo = new UserRepository();
userRepo.add({ id: 1, name: "Alice" });
userRepo.add({ id: 2, name: "Bob" });

const user1 = userRepo.getById(1);
const user2 = userRepo.getById("Bob");
console.log(user1); // Output: { id: 1, name: "Alice" }
console.log(user2); // Output: { id: 2, name: "Bob" }

instanceof 运算符：instanceof 运算符可用于检查对象是否是类或特定类型的实例。

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

class UserDetails<T extends User> {
    id: T['id'];
    name: T['name'];
    age: T['age'];

    constructor(user: T) {
        this.id = user.id;
        this.name = user.name;
        this.age = user.age;
    }

    // Method to get user details
    getUserDetails(): string {
        return `User: ${this.name}, ID: ${this.id}, Age: ${this.age}`;
    }

    // Method to update user name
    updateName(newName: string): void {
        this.name = newName;
    }

    // Method to update user age
    updateAge(newAge: number): void {
        this.age = newAge;
    }
}

// Using the UserDetails class with a User type
const user: User = { id: 1, name: "Alice", age: 30 };
const userDetails = new UserDetails(user);

console.log(userDetails.getUserDetails());  // Output: "User: Alice, ID: 1, Age: 30"

// Updating user details
userDetails.updateName("Bob");
userDetails.updateAge(35);

console.log(userDetails.getUserDetails());  // Output: "User: Bob, ID: 1, Age: 35"
console.log(new UserDetails("30"));  // Error: "This will throw error" 

我们可以使用第三方库在运行时确定类型。

10.依赖注入：依赖注入是一种模式，允许您将代码引入组件中，而无需在组件中实际创建或管理它。虽然它看起来像是使用库，但它有所不同，因为您不需要通过 CDN 或 API 安装或导入它。

乍一看，它似乎也类似于使用函数来实现可重用性，因为两者都允许代码重用。然而，如果我们直接在组件中使用函数，可能会导致它们之间的紧密耦合。这意味着函数或其逻辑的任何变化都可能影响它使用的每个地方。

依赖注入通过将依赖项的创建与使用它们的组件解耦来解决这个问题，使代码更易于维护和测试。

没有依赖注入的示例

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

let x = { a: 1, b: 2, c: 3 };
getProperty(x, "a");  // Valid
getProperty(x, "d");  // Error: Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.

依赖注入示例

function func(param:number|boolean){
return param;
}
console.log(func(2)) //Output: 2 will be printed
console.log(func("True")) //Error: boolean cannot be passed as argument

在紧密耦合的场景中，如果您今天 MentalWellness 类中有一个stressLevel 属性，并决定明天将其更改为其他属性，则需要更新所有使用它的地方。这可能会导致许多重构和维护挑战。

但是，通过依赖注入和接口的使用，你可以避免这个问题。通过构造函数传递依赖项（例如 MentalWellness 服务），具体的实现细节（例如stressLevel 属性）被抽象到接口后面。这意味着只要接口保持不变，对属性或类的更改不需要修改依赖类。这种方法可确保代码松散耦合、更易于维护且更易于测试，因为您可以在运行时注入所需的内容，而无需紧密耦合组件。

以上是每个开发人员都应该了解的高级打字稿概念的详细内容。更多信息请关注PHP中文网其他相关文章！