概述
目录
一、交叉类型
二、联合类型
三、类型保护与区分类型
1、用户自定义的类型保护
2、typeof类型保护
3、instanceof类型保护
四、可以为Null的类型
1、可选参数和可选属性
2、类型保护和类型断言
一、交叉类型
交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含所有类型的特性。
我们大多是在混入或其它不适合典型面向对象模型的地方看到交叉类型的使用。在JavaScript里发生这种情况的场合很多！，举例：
function extend<T,U>(first:T,second:U):T & U{
let result = <T & U>{};
for (let id in first) {
(<any>result)[id] = (<any>first)[id];
}
for (let id in second) {
if (!result.hasOwnProperty(id)){
(<any>result)[id] = (<any>second)[id];
}
}
return result;
}
class Person {
constructor(public name: string){ }
}
interface Loggable {
log(): void;
}
class ConsoleLogger implements Loggable{
log(){
// ...
}
}
var jim = extend(new Person("Jim"), new ConsoleLogger());
var n = jim.name;
jim.log();二、联合类型
联合类型与交叉类型很有关联，但是使用上却完全不同。 偶尔你会遇到这种情况，一个代码库希望传入 number或 string类型的参数。 例如下面的函数：
/**
* 接受一个字符串，并在左边添加“padding”。
* 如果'padding'是一个字符串，那么'padding'会被附加到左边。
* 如果'padding'是一个数字，那么这个数字的空格会被添加到左边。
*/
function padLeft(value: string, padding: any) {
if (typeof padding === "number") {
return Array(padding + 1).join(" ") + value;
}
if (typeof padding === "string") {
return padding + value;
}
throw new Error(`Expected string or number, got '${padding}'.`);
}
padLeft("Hello world", 4); // returns "
Hello world"
padLeft存在一个问题， padding参数的类型指定成了 any。 这就是说我们可以传入一个既不是 number也不是 string类型的参数，但是TypeScript却不报错。
let indentedString = padLeft("Hello world", true); // 编译阶段通过，运行时报错在传统的面向对象语言里，我们可能会将这两种类型抽象成有层级的类型。 这么做显然是非常清晰的，但同时也存在了过度设计。 padLeft原始版本的好处之一是允许我们传入原始类型。 这样做的话使用起来既简单又方便。 如果我们就是想使用已经存在的函数的话，这种新的方式就不适用了。
代替 any， 我们可以使用 联合类型做为 padding的参数：
function padLeft(value: string, padding: string | number) {
// ...
}
let indentedString = padLeft("Hello world", true); // 错误 在编译联合类型表示一个值可以是几种类型之一。 我们用竖线（ |）分隔每个类型，所以 number | string | boolean表示一个值可以是 number， string，或 boolean。
如果一个值是联合类型，我们只能访问此联合类型的所有类型里共有的成员。
interface Bird {
fly();
layEggs();
}
interface Fish {
swim();
layEggs();
}
function getSmallPet(): Fish | Bird {
// ...
}
let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim();
// errors这里的联合类型可能有点复杂，但是你很容易就习惯了。 如果一个值的类型是 A | B，我们能够确定的是它包含了 A 和 B中共有的成员。 这个例子里， Bird具有一个 fly成员。 我们不能确定一个 Bird | Fish类型的变量是否有 fly方法。 如果变量在运行时是 Fish类型，那么调用 pet.fly()就出错了。
三、类型保护与区分类型
联合类型适合于那些值可以为不同类型的情况。但当我们想确切的了解是否为Fish怎么办？JavaSCript里常用来区分2个可能值的方法是检查成员是否存在。
let pet
= getSmallPet();
//每一个成员访问都会出错
if (pet.swim) {
pet.swim();
}
else if (pet.fly) {
pet.fly();
}为了让这段代码工作，我们要使用类型断言：
let pet = getSmallPet();
if ((<Fish>pet).swim){
(<Fish>pet).swim();
}
else{
(<Bird>pet).fly();
}1、用户自定义的类型保护
可以注意到我们不得不多次使用类型断言。假如我们一旦检查过类型，就能在之后的每个分支里清楚地知道pet的类型的话就好了。
TypeScript里的类型保护机制让它成为了现实。类型保护就是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。要定义一个类型保护，我们只要简单地定义一个函数，它的返回值是一个类型谓词：
function inFish(pet:Fish|Bird): pet is Fish{
return (<Fish>pet).swim !== underfined;
}在这个例子里，pet is Fish 就是类型谓词，谓词为parameterName is Type 这种形式， parameterName必须是来自于当前函数签名里的一个参数名。
每当使用一些变量调用isFish时，TypeScript会将变量缩减为那个具体的类型，只要这个类型与变量的原始类型是兼容的。
// 'swim' 和 'fly' 调用都没有问题了
if (isFish(pet)) {
pet.swim();
}
else {
pet.fly();
}注意TypeScript不仅知道在 if分支里 pet是 Fish类型； 它还清楚在 else分支里，一定 不是 Fish类型，一定是 Bird类型。
2、typeof类型保护
现在我们回过头来看看怎么使用联合类型书写 padLeft代码。 我们可以像下面这样利用类型断言来写：
function isNumber(x: any): x is number {
return typeof x === "number";
}
function isString(x: any): x is string {
return typeof x === "string";
}
function padLeft(value: string, padding: string | number) {
if (isNumber(padding)) {
return Array(padding + 1).join(" ") + value;
}
if (isString(padding)) {
return padding + value;
}
throw new Error(`Expected string or number, got '${padding}'.`);
}然而，必须要定义一个函数来判断类型是否是原始类型，这太痛苦了。 幸运的是，现在我们不必将 typeof x === "number"抽象成一个函数，因为TypeScript可以将它识别为一个类型保护。 也就是说我们可以直接在代码里检查类型了。
function padLeft(value: string, padding: string | number) {
if (typeof padding === "number") {
return Array(padding + 1).join(" ") + value;
}
if (typeof padding === "string") {
return padding + value;
}
throw new Error(`Expected string or number, got '${padding}'.`);
}这些* typeof类型保护*只有两种形式能被识别： typeof v === "typename"和 typeof v !== "typename"， "typename"必须是 "number"， "string"， "boolean"或 "symbol"。 但是TypeScript并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护。
3、instanceof类型保护
instanceof类型保护是通过构造函数来细化类型的一种方式。比如，我们使用一下之前字符串的例子：
interface Padder {
getPaddingString(): string
}
class SpaceRepeatingPadder implements Padder {
constructor(private numSpaces: number) { }
getPaddingString() {
return Array(this.numSpaces + 1).join(" ");
}
}
class StringPadder implements Padder {
constructor(private value: string) { }
getPaddingString() {
return this.value;
}
}
function getRandomPadder() {
return Math.random() < 0.5 ?
new SpaceRepeatingPadder(4) :
new StringPadder("
");
}
// 类型为SpaceRepeatingPadder | StringPadder
let padder: Padder = getRandomPadder();
if (padder instanceof SpaceRepeatingPadder) {
padder; // 类型细化为'SpaceRepeatingPadder'
}
if (padder instanceof StringPadder) {
padder; // 类型细化为'StringPadder'
}nstanceof的右侧要求是一个构造函数，TypeScript将细化为：
- 此构造函数的
prototype属性的类型，如果它的类型不为any的话 - 构造签名所返回的类型的联合
以此顺序。
四、可以为Null的类型
TypeScript具有两种特殊的类型， null和 undefined，它们分别具有值null和undefined， 默认情况下，类型检查器认为 null与 undefined可以赋值给任何类型。 null与 undefined是所有其它类型的一个有效值。 这也意味着，你阻止不了将它们赋值给其它类型，就算是你想要阻止这种情况也不行。
--strictNullChecks标记可以解决此错误：当你声明一个变量时，它不会自动地包含 null或 undefined。 你可以使用联合类型明确的包含它们：
let s = "foo";
s = null; // 错误, 'null'不能赋值给'string'
let sn: string | null = "bar";
sn = null; // 可以
sn = undefined; // error, 'undefined'不能赋值给'string | null'注意，按照JavaScript的语义，TypeScript会把 null和 undefined区别对待。
string | null， string | undefined
和 string | undefined | null是不同的类型。
1、可选参数和可选属性
使用了 --strictNullChecks，可选参数会被自动地加上 | undefined:
function f(x: number, y?: number) {
return x + (y || 0);
}
f(1, 2);
f(1);
f(1, undefined);
f(1, null); // error, 'null' is not assignable to 'number | undefined'可选属性也会有同样的处理：
class C {
a: number;
b?: number;
}
let c = new C();
c.a = 12;
c.a = undefined; // error, 'undefined' is not assignable to 'number'
c.b = 13;
c.b = undefined; // ok
c.b = null; // error, 'null' is not assignable to 'number | undefined'2、类型保护和类型断言
由于可以为null的类型是通过联合类型实现，那么你需要使用类型保护来去除 null。 这与在JavaScript里写的代码一致：
function f(sn: string | null): string {
if (sn == null) {
return "default";
}
else {
return sn;
}
}这里很明显地去除了 null，你也可以使用短路运算符：
function f(sn: string | null): string {
return sn || "default";
}如果编译器不能够去除 null或 undefined，你可以使用类型断言手动去除。
语法是添加 !后缀： identifier!从 identifier的类型里去除了 null和 undefined：
function broken(name: string | null): string {
function postfix(epithet: string) {
return name.charAt(0) + '.
the ' + epithet; // error, 'name' is possibly null
}
name = name || "Bob";
return postfix("great");
}
function fixed(name: string | null): string {
function postfix(epithet: string) {
return name!.charAt(0) + '.
the ' + epithet; // ok
}
name = name || "Bob";
return postfix("great");
}本例使用了嵌套函数，因为编译器无法去除嵌套函数的null（除非是立即调用的函数表达式）。 因为它无法跟踪所有对嵌套函数的调用，尤其是你将内层函数做为外层函数的返回值。 如果无法知道函数在哪里被调用，就无法知道调用时 name的类型。
最后
以上就是贤惠野狼为你收集整理的TypeScript----高级类型（第一篇）一、交叉类型二、联合类型三、类型保护与区分类型四、可以为Null的类型的全部内容，希望文章能够帮你解决TypeScript----高级类型（第一篇）一、交叉类型二、联合类型三、类型保护与区分类型四、可以为Null的类型所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复