TypeScript - 从类型创建类型

上一页
下一页

TypeScript 允许您从现有或内置类型创建自定义类型。从现有类型创建类型有助于使代码更易于维护和更不容易出错。

TypeScript 是一种静态类型语言。这意味着理想情况下，每个变量、函数参数和对象属性都应显式分配类型。

在这里，我们将讨论从现有类型创建自定义类型的不同方法。

联合类型

如果您想定义一个可以存储多个数据类型值的单个变量，您可以使用联合运算符组合多个运算符。联合运算符是“|”，您可以使用它来组合多个类型。

语法

您可以按照以下语法使用联合运算符创建自定义类型。

type unionTypes = type1 | type2 | type3 | ...;

在上述语法中，type1、type2、type3 等是数据类型。

示例

在下面的代码中，我们定义了“StringOrNumber”自定义类型，它是字符串和数字数据类型的联合。

processValue() 函数采用“StringOrNumber”类型的单个参数。在函数体中，我们使用“typeof”运算符检查参数的类型，并根据字符串或数字类型在输出控制台中打印值。

// Defining a union type
type StringOrNumber = string | number;

// Function that accepts a union type as an argument
function processValue(value: StringOrNumber) {
    // Check if the value is a string or number type
  if (typeof value === "string") {
    console.log(`String: ${value}`);
  } else {
    console.log(`Number: ${value}`);
  }
}

processValue("hello"); // Output: String: hello
processValue(123);    // Output: Number: 123

编译后，它将生成以下 JavaScript 代码。

// Function that accepts a union type as an argument
function processValue(value) {
    // Check if the value is a string or number type
    if (typeof value === "string") {
        console.log(`String: ${value}`);
    }
    else {
        console.log(`Number: ${value}`);
    }
}
processValue("hello"); // Output: String: hello
processValue(123); // Output: Number: 123

上述示例代码的输出如下：

String: hello
Number: 123

交叉类型

交叉运算符 (&) 允许您将多个类型组合到单个类型中。例如，如果您有两个关于业务和联系方式的接口或类型，并且想要组合这两个类型，可以使用交叉运算符。

语法

您可以按照以下语法使用交叉运算符创建自定义类型。

type intersectionTypes = type1 & type2 & type3 & ...;

在上述语法中，我们使用交叉运算符组合了多个类型。

示例

在下面的代码中，我们定义了包含 name 和 turnover 属性的“Business”接口。我们还定义了包含 email 和 phone 属性的 contactDetails 接口。

之后，我们使用交叉运算符组合了这两种类型并将它们存储在“BusinessContact”类型中。接下来，我们定义了“BusinessContact”类型的对象，并在控制台中记录它。

// Defining a business type
interface Business {
    name: string;
    turnover: number;
}

// Defining a contact details type
interface ContactDetails {
    email: string;
    phone: string;
}

// Intersection of two types
type BusinessContact = Business & ContactDetails;

// Creating an object of the type BusinessContact
let contact: BusinessContact = {
    name: "EnviroFront",
    turnover: 5000000,
    email: "[email protected]",
    phone: "1234567890"
};

console.log(contact);

编译后，它将生成以下 JavaScript 代码。

// Creating an object of the type BusinessContact
let contact = {
    name: "EnviroFront",
    turnover: 5000000,
    email: "[email protected]",
    phone: "1234567890"
};
console.log(contact);

上述示例代码的输出如下：

{
  name: 'EnviroFront',
  turnover: 5000000,
  email: '[email protected]',
  phone: '1234567890'
}

实用工具类型

TypeScript 包含多个实用工具类型，这使得转换特定类型和创建新类型变得容易。让我们通过示例了解一些实用工具类型。

语法

您可以按照以下语法使用任何实用工具类型。

Utility_type_name<type or interface>

在上述语法中，“utility_type_name”可以根据您使用的实用工具类型替换为“Partial”、“Pick”、“Record”等。“type”或“interface”是从中想要创建新自定义类型的接口的名称。

Partial 实用工具类型

partial 实用工具类型使接口或类型的属性都可选。因此，您可以从现有类型创建一个新类型，该类型的所有属性都是可选的。

示例

在下面的代码中，我们定义了“Todo”接口。之后，我们使用了 Partial 实用工具类型，通过使“Todo”接口的所有属性都可选，来使用“Todo”接口创建一个新类型。

接下来，我们定义了“OptionalTodo”类型的对象，该对象仅包含“title”属性，因为“description”属性是可选的。

// Defining an interface for Todo list 
interface Todo {
    title: string;
    description: string;
}

// Defining a custom type using the Partial utility type
type OptionalTodo = Partial<Todo>;

// Creating an object of type OptionalTodo
let todo: OptionalTodo = { title: "Buy milk" }; // 'description' is optional

console.log(todo);

编译后，它将生成以下 JavaScript 代码。

// Creating an object of type OptionalTodo
let todo = { title: "Buy milk" }; // 'description' is optional
console.log(todo);

上述示例代码的输出如下：

{ title: 'Buy milk' }

Pick 实用工具类型

Pick 实用工具类型允许选择现有类型的一部分属性。让我们通过下面的示例来理解它。

示例

在下面的代码中，我们定义了“ToDo”接口，并使用 Pick 实用工具类型从“ToDo”接口创建一个仅包含“title”属性的新类型。在这里，“ToDoPick”类型仅包含“title”属性。

// Defining an interface for Todo list 
interface Todo {
    title: string;
    description: string;
}

// Defining a custom type using the Pick utility type
type TodoPick = Pick<Todo, "title">;

let myTodo: TodoPick = { title: "Write a code" };

console.log(myTodo.title);

编译后，它将生成以下 JavaScript 代码。

let myTodo = { title: "Write a code" };
console.log(myTodo.title);

上述示例代码的输出如下：

Write a code

typeof 类型运算符

typeof 运算符用于获取特定变量的类型。您可以使用 typeof 变量来提取特定变量、对象、函数等的类型，并将该类型用于其他变量。

语法

您可以按照以下语法使用 typeof 类型运算符创建自定义类型。

Typeof variable;

在上述语法中，“variable”可以是对象、函数等。

示例

在下面的代码中，我们定义了包含 name 和 gender 属性的 person 对象。之后，我们使用“typeof”运算符获取 person 对象的类型并将其存储在“employee”类型变量中。

之后，我们定义了“employee”类型的“employee1”对象，其中包含 name 和 gender 属性。

// Defining a person object
const person = {
    name: "John",
    gender: "male"
};

// Defining a type employee
type employee = typeof person;  // Type is { url: string; timeout: number; }

// Defining an employee object
let employee1: employee = {
    name: "Sbv",
    gender: "male"
};

console.log(employee1);

编译后，它将生成以下 JavaScript 代码。

// Defining a person object
const person = {
    name: "John",
    gender: "male"
};
// Defining an employee object
let employee1 = {
    name: "Sak",
    gender: "male"
};
console.log(employee1);

输出如下：

{ name: 'Sak', gender: 'male' }

创建自定义类型允许您重用现有类型并编写易于维护的代码。如果要提供可选类型或组合多个类型，可以使用联合或交叉运算符。此外，您可以使用实用工具类型和 typeof 运算符从现有类型创建自定义类型。

打印页面
上一页
下一页
广告