乐趣区

关于typescript:TypeScript-高级类型

后面咱们学的数字类型、字符串类型、布尔类型、数组类型等等可能都是咱们比拟相熟的数据类型,在其余计算机语言中也能常常见到。而本节咱们要学习的是 TypeScript 中的高级类型,例如穿插类型、联结类型、类型别名、字面量类型等。

穿插类型

穿插类型是将多个类型合并为一个类型。能够通过 & 来实现合并,生成的新类型蕴含了所需的所有类型的个性。

举一个例子,假如 ABC 是三种不同的数据类型,咱们将三种类型合并为一个新的穿插类型 A & B & C,那么应用这个穿插类型申明的对象能够同时蕴含 A、B、C 这个三种类型的成员。

个别穿插类型大多用于混入 (mixins),或其余不适宜典型面向对象模型的中央应用。在 JavaScript 里产生这种状况的场合很多。

示例:

咱们来看一个简略的例子,上面 UserStudent 是咱们定义好的两个接口:

interface User {
    id: number,
    username: string,
    age: number
}
  
interface Student{
    id: number,
    score: number[],}
  
let cross: User & Student;  // 穿插类型

// 变量 cross 领有两个接口中的所有属性
cross.id;
cross.username;
cross.age;
cross.score;

穿插类型 User & Student 就蕴含了上述两个接口中的所有属性,而通过穿插类型申明的变量 cross,领有两个接口中的所有的属性。

然而这种形式也须要留神一个问题,就是如果两个接口中有雷同的属性,然而属性的类型不同,这样就会造成抵触,不能够赋值。例如:

联结类型

联结类型能够通过管道将变量设置多种类型,赋值时能够依据设置的类型来赋值。也就是说联结类型的变量能够是指定的几种数据类型中的一种,咱们能够通过竖线 | 来分隔不同的类型。

语法格局:

Type1|Type2|Type3 

须要留神的是,申明为联结类型的变量,只能赋值指定的类型的值,如果赋值其余类型的值也会报错哟。

示例:

例如咱们申明一个联结类型的变量 our

let our:number|string|boolean;

our = 18;
our = 'xkd';
our = true;

上述的代码示意变量 our 的值能够是 number 类型、string 类型或者 boolean 类型中的一种。如果咱们给变量 our 赋值为这三个指定数据类型以外的类型值,则会导致报错哟。

类型别名

咱们在应用类型时,能够通过 type 关键字为类型起一个别名,类型别名较多利用于联结类型、穿插类型这种复合类型,这样能够防止咱们反复它们的定义。

起别名并不会新建一个类型,只是创立了一个新的名字来援用那个类型。

示例:

例如给一个自定义的联结类型加上一个类型别名 admix,而后咱们在应用这个联结类型来申明变量的时候,就只须要指定变量为 admix 类型即可。这样咱们就不须要屡次定义 number|string|boolean,而间接应用别名 admix 来援用此类型就行了:

type admix = number|string|boolean;  // 给联结类型加上别名

let a:admix = 100;
let b:admix = 'xkd';
let c:admix = true;

console.log(a);
console.log(b);
console.log(c);

编译成 JavaScript 代码:

var a = 100;
var b = 'xkd';
var c = true;
console.log(a);
console.log(b);
console.log(c);

输入:

100
xkd
true

字面量类型

TypeScript 中,字面量类型容许咱们指定必须的固定值,通过分隔符 | 将不同字面量分隔,且也能够通过 type 关键字为自定义的字面量类型加上别名。

示例:

例如当变量的值为”小飞侠”就是“水星仔”其中之一,那咱们就能够将这两个值形成一个联结类型字面量,:

type names = '小飞侠' | '水星仔';  

let a:names = '小飞侠';
let b:names = '水星仔';

上述代码中通过别名 names 将变量 ab 申明为咱们自定义的字面量,那么这两个变量的值仅能为“小飞侠”或者“水星仔”其中之一,否则会报错。

个别咱们是很少间接这样应用的,在一些非凡状况下,例如应用字符串字面量类型来辨别函数重载,或用于放大范畴调试 bug 等,能够这样应用。

拜访联结类型的属性或者办法

TypeScript 不确定一个联结类型的变量到底是哪个类型的时候,咱们只能拜访此联结类型的所有类型里共有的属性或办法。

示例:

例如咱们在一个函数 info 中定义两个参数,参数 username 的类型为 string 类型,而 age 的类型为一个联结类型,能够是 string 类型或 number 类型:

function info(username: string, age : string | number) {console.log(age.length);  // 报错
}

咱们在应用 age 来拜访属性 length 时会导致报错,这是因为只有字符串类型中才有属性 length,数字类型没有这个属性。因为 length 并不是数字类型和字符串类型的共有属性,所以被申明为这个联结类型的变量 age 不能拜访这个属性。

function info(username: string, age : string | number) {console.log(age.toString());  
}

通过 age 来拜访 toString() 办法不会报错,这是因为 toString() 办法是数字类型和字符串类型共有的办法,所以被申明为联结类型的 age 能够拜访这个办法。

退出移动版