您好,欢迎访问一九零五行业门户网

如何在 TypeScript 中创建条件类型?

在 typescript 中,我们需要为每个变量和对象定义类型,因为它是一种严格语言的类型,并且还包含条件类型。
从条件类型这个词,我们可以预测我们需要根据特定条件选择一个变量。是的,你没听错。正如我们使用 if-else 语句根据特定条件执行特定代码块一样,我们也可以根据特定条件选择变量的类型。
在本教程中,我们将学习在 typescript 中创建条件类型。
语法用户可以按照以下语法在 typescript 中创建条件类型。
first_type extends second_type ? true_type : false_type;
我们在上述语法中使用三元运算符来创建条件类型。
操作数解释first_type - 它是一个类型或变量。
second_type - 它是一种类型,如数字、字符串、布尔值等。
true_type - 如果first_type包含second_type,true_type将被分配给变量。
false_type - 如果first_type不扩展second_type,则false_type将被分配给变量。
现在,我们将查看不同的示例,以了解有关 typescript 中条件类型的更多信息。
示例在下面的示例中,我们定义了两个接口。在 typescript 中,接口的工作方式也与类型别名相同,因为它定义了对象或类的结构。
之后,我们用interface1扩展了interface2。这意味着interface2包含interface1的所有属性。之后,我们使用三元运算符将条件类型分配给 type1 和 type2 别名。
在输出中,用户可以检查 var1 和 var2 变量的类型。
// creating the first interfaceinterface interface1 { prop1?: string; prop2: boolean;}// creating the second interface and extending it with the interface1interface interface2 extends interface1 { prop3?: number; prop4: boolean;}// type of the type1 is number as interface2 extends interface1type type1 = interface2 extends interface1 ? number : string;let var1: type1 = 20;// type of the type2 is string as interface1 doesn't extends the interface2type type2 = interface1 extends interface2 ? number : string;let var2: type2 = hello;console.log(the type of var1 variable is + typeof var1);console.log(the type of var2 variable is + typeof var2);
编译时,它将生成以下 javascript 代码 -
var var1 = 20;var var2 = hello;console.log(the type of var1 variable is + typeof var1);console.log(the type of var2 variable is + typeof var2);
输出上述代码将产生以下输出 -
the type of var1 variable is numberthe type of var2 variable is string
我们已经学习了条件类型的基础知识以及如何创建它。
为什么使用条件类型?我们将了解条件类型在现实开发中为何以及如何有用。
让我们看一下下面的代码,其中我们通过根据参数类型更改其返回类型来重载 func1() 函数。我们可以观察到,如果参数类型是boolean,则返回类型是字符串。另外,如果参数类型为字符串和数字,则返回类型分别为数字和布尔值。
function func1(param1: boolean): string;function func1(param1: string): number;function func1(param1: number): boolean;function func1(param1: any): any { // function body of the overloaded function}
我们可以通过在一行中使用一个定义创建条件类型来重载该函数,而不是在函数中编写多个定义。
示例在下面的示例中,我们创建了名为 test_type 的条件类型。它获取值并根据值类型返回类型。如果值的类型是数字,则返回布尔值;对于字符串值,它返回一个数字,对于布尔值,它返回字符串类型。
在输出中,我们可以观察从 test_type 获得的变量和 abc 变量的类型。
// creating the conditional type// it will accept the number, string, and boolean valuestype test_type<t extends number | string | boolean> = t extends number ? boolean : t extends string ? number : string;// getting the type of abc variable based on the value from the conditional test_typelet abc: test_type<hello> = 20;console.log(the type of the variable abc is + typeof abc);let variable: test_type<typeof abc> = false;console.log(the type of the variable is + typeof variable);
编译时,它将生成以下 javascript 代码:
// getting the type of abc variable based on the value from the conditional test_typevar abc = 20;console.log(the type of the variable abc is + typeof abc);var variable = false;console.log(the type of the variable is + typeof variable);
输出上述代码将产生以下输出 -
the type of the variable abc is numberthe type of the variable is boolean
由于我们已经对变量使用了条件类型,因此我们可以将其用于函数参数或返回类型。
用户在本教程中学习了创建条件类型,使我们能够根据另一个变量的类型或值选择特定变量。此外,我们还学习了如何使用函数参数和返回类型的条件类型。
以上就是如何在 typescript 中创建条件类型?的详细内容。
其它类似信息

推荐信息