TypeScript-自定义类型的别名
在本教程中,我们将学习为TypeScript中的自定义类型创建别名。
在先前的教程中,我们了解了函数和对象,还介绍了箭头函数并创建了自定义类型。
创建自定义类型
在下面的示例中,我们将创建一个自定义类型的变量。
let sampleUser: { username: string, points: number };
因此,我们有一个对象类型的变量sampleUser
。
对象类型具有两个属性。
第一个是"字符串"类型的"用户名",第二个是"数字"类型的"点"。
现在我们可以为sampleUser
变量分配一个与上述类型匹配的值。
在下面的示例中,我们为" sampleUser"变量分配了一个值。
//declare variable and type let sampleUser: { username: string, points: number }; //now assign value sampleUser = { username: 'theitroad', points: 10 };
为自定义类型创建别名
以下是为自定义类型创建别名的语法。
type aliasName = customType;
其中," type"是用于创建别名的关键字。
别名的名称是aliasName
,它是给定的自定义类型的别名,用customType
表示。
示例:对象类型的别名
因此,在上面的示例中,我们为sampleUser
变量提供了一个自定义类型。
{ username: string, points: number }
我们可以为上述类型创建别名,如下所示。
type UserData = { username: string, points: number };
现在,我们可以使用新的类型UserData创建变量。
//creating a variable of type UserData let sampleUser: UserData;
现在我们可以为类型为UserData的变量sampleUser分配一个值。
//assign value sampleUser = { username: 'theitroad', points: 10 };
上述自定义类型的最终代码如下所示。
//custom type type UserData = { username: string, points: number }; //creating a variable of type UserData let sampleUser: UserData; //assign value sampleUser = { username: 'theitroad', points: 10 }; //output console.log(sampleUser);
让我们再举一个自定义类型的例子,这次我们将创建一个函数类型。
示例:函数类型的别名
在下面的示例中,我们为自定义函数类型创建别名。
type myFunction = (x: number, y: number) => number;
因此,别名为" myFunction"。
我们使用箭头函数定义函数类型。
看一下函数类型((x:number,y:number)=> number
),我们可以知道该函数将接受两个number
类型的参数,并返回number
类型的值。
现在,我们将使用别名" myFunction"创建一个变量。
let addNumbers: myFunction;
因此," addNumbers"是" myFunction"类型的变量。
这意味着,我们只能将函数分配给具有两个数字类型的参数并返回数字值的addNumbers变量。
现在,我们为上述变量分配一个函数。
addNumbers = function(a: number, b: number): number { return a + b; };
最终代码如下所示。
//custom function type type myFunction = (x: number, y: number) => number; //create variable using custom type alias let addNumbers: myFunction; //now assign a function addNumbers = function(a: number, b: number): number { return a + b; }; //calling console.log("Sum 1 + 2 = " + addNumbers(1, 2));