TypeScript-自定义类型的别名

时间:2020-02-23 14:46:20  来源:igfitidea点击:

在本教程中,我们将学习为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));