TypeScript高级用法详解
中，由于我们将访问修饰符设置为public，因此我们通过实例man来访问name和age属性是被允许的，同时对age属性重新赋值也是允许的。但是在某些情况下，我们希望某些属性是对外不可见的，同时不允许被修改，那么我们就可以使用private修饰符：
class Human {
public name: string;
private age: number; // 此处修改为使用private修饰符
public constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
const man = new Human('tom', 20);
console.log(man.name); // -> tom
console.log(man.age);
// -> Property 'age' is private and only accessible within class 'Human'.
我们将age属性的修饰符修改为private后，在外部通过man.age对其进行访问，TypeScript在编译阶段就会发现其是一个私有属性并最终将会报错。
注意：在TypeScript编译之后的代码中并没有限制对私有属性的存取操作。
编译后的代码如下：
var Human = /** @class */ (function () {
function Human(name, age) {
this.name = name;
this.age = age;
}
return Human;
}());
var man = new Human('tom', 20);
console.log(man.name); // -> tom
console.log(man.age); // -> 20
使用private修饰符修饰的属性或者方法在子类中也是不允许访问的，示例如下：
class Human {
public name: string;
private age: number;
public constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
class Woman extends Human {
private gender: number = 0;
public constructor(name: string, age: number) {
super(name, age);
console.log(this.age);
}
}
const woman = new Woman('Alice', 18);
// -> Property 'age' is private and only accessible within class 'Human'.
在上述示例中由于在父类Human中age属性被设置为private，因此在子类Woman中无法访问到age属性，为了让在子类中允许访问age属性，我们可以使用protected修饰符来对其进行修饰：
class Human {
public name: string;
protected age: number; // 此处修改为使用protected修饰符
public constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
class Woman extends Human {
private gender: number = 0;
public constructor(name: string, age: number) {
super(name, age);
console.log(this.age);
}
}
const woman = new Woman('Alice', 18); // -> 18
当我们将private修饰符用于构造函数时，则表示该类不允许被继承或实例化，示例如下：
class Human {
public name: string;
public age: number;
// 此处修改为使用private修饰符
private constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
class Woman extends Human {
private gender: number = 0;
public constructor(name: string, age: number) {
super(name, age);
}
}
const man = new Human('Alice', 18);
// -> Cannot extend a class 'Human'. Class constructor is marked as private.
// -> Constructor of class 'Human' is private and only accessible within the class declaration.
当我们将protected修饰符用于构造函数时，则表示该类只允许被继承，示例如下：
class Human {
public name: string;
public age: number;
// 此处修改为使用protected修饰符
protected constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
class Woman extends Human {
private gender: number = 0;
public constructor(name: string, age: number) {
super(name, age);
}
}
const man = new Human('Alice', 18);
// -> Constructor of class 'Human' is protected and only accessible within the class declaration.
另外我们还可以直接将修饰符放到构造函数的参数中，示例如下：
class Human {
// public name: string;
// private age: number;
public constructor(public name: string, private age: number) {
this.name = name;
this.age = age;
}
}
const man = new Human('tom', 20);
console.log(man.name); // -> tom
console.log(man.age);
// -> Property 'age' is private and only accessible within class 'Human'.
3、接口与构造器签名
当我们的项目中拥有很多不同的类时并且这些类之间可能存在某方面的共同点，为了描述这种共同点，我们可以将其提取到一个接口(interface)中用于集中维护，并使用implements关键字来实现这个接口，示例如下：
interface IHuman {
name: string;
age: number;
walk(): void;
}
class Human implements IHuman {
public constructor(public name: string, public age: number) {
this.name = name;
this.age = age;
}
walk(): void {
console.log('I am walking...');
}
}
上述代码在编译阶段能顺利通过，但是我们注意到在Human类中包含constructor构造函数，如果我们想在接口中为该构造函数定义一个签名并让Human类来实现这个接口，看会发生什么：
interface HumanConstructor {
new (name: string, age: number);
}
class Human implements HumanConstructor {
public constructor(public name: string, public age: number) {
this.name = name;
this.age = age;
}
walk(): void {
console.log('I am walking...');
}
}
// -> Class 'Human' incorrectly implements interface 'HumanConstructor'.
// -> Type 'Human' provides no match for the signature 'new (name: string, age: number): any'.
然而TypeScript会编译出错，告诉我们错误地实现了HumanConstructor接口，这是因为当一个类实现一个接口时，只会对实例部分进行编译检查，类的静态部分是不会被编译器检查的。因此这里我们尝试换种方式，直接操作类的静态部分，示例如下：
interface HumanConstructor {
new (name: string, age: number);
}
interface IHuman {
name: string;
age: number;
walk(): void;
}
class Human implements IHuman {
public constructor(public name: string, public age: number) {
this.name = name;
this.age = age;
}
walk(): void {
console.log('I am walking...');
}
}
// 定义一个工厂方法
function createHuman(constructor: HumanConstructor, name: string, age: number): IHuman {
return new constructor(name, age);
}
const man = createHuman(Human, 'tom', 18);
console.log(man.name, man.age); // -> tom 18
在上述示例中通过额外创建一个工厂方法createHuman并将构造函数作为第一个参数传入，此时当我们调用createHuman(Human, 'tom', 18)时编译器便会检查第一个参数是否符合HumanConstructor接口的构造器签名。
4、声明合并
在声明合并中最常见的合并类型就是接口了，因此这里先从接口开始介绍几种比较常见的合并方式。
4.1 接口合并
示例代码如下：
interface A {
name: string;
}
interface A {
age: number;
}
// 等价于
interface A {
name: string;
age: number;
}
const a: A = {name: 'tom', age: 18};
接口合并的方式比较容易理解，即声明多个同名的接口，每个接口中包含不同的属性声明，最终这些来自多个接口的属性声明会被合并到同一个接口中。
注意：所有同名接口中的非函数成员必须唯一，如果不唯一则必须保证类型相同，否则编译器会报错。对于函数成员，后声明的同名接口会覆盖掉之前声明的同名接口，即后声明的同名接口中的函数相当于一次重载，具有更高的优先级。
4.2 函数合并
函数的合并可以简单理解为函数的重载，即通过同时定义多个不同类型参数或不同类型返回值的同名函数来实现，示例代码如下：
// 函数定义
function foo(x: number): number;
function foo(x: string): string;
// 函数具体实现
function foo(x: number | string): number | string {
if (typeof x === 'number') {
return (x).toFixed(2);
}
return x.substring(0, x.length - 1);
}
在上述示例中，我们对foo函数进行多次定义，每次定义的函数参数类型不同，返回值类型不同，最后一次为函数的具体实现，在实现中只有在兼容到前面的所有定义时，编译器才不会报错。
注意：TypeScript编译器会优先从最开始的函数定义进行匹配，因此如果多个函数定义存在包含关系，则需要将最精确的函数定义放到最前面，否则将始终不会被匹配到。
4.3 类型别名联合
类型别名联合与接口合并有所区别，类型别名不会新建一个类型，只是创建一个新的别名来对多个类型进行引用，同时不能像接口一样被实现(implements)和继承(extends)，示例如下：
type HumanProperty = {
name: string;
age: number;
gender: number;
};
type HumanBehavior = {
eat(): void;
walk(): void;
}
type Human = HumanProperty & HumanBehavior;
let woman: Human = {
name: 'tom',
age: 18,
gender: 0,
eat() {
console.log('I can eat.');
},
walk() {
console.log('I can walk.');
}
}
class HumanComponent extends Human {
constructor(public name: string, public age: number, public gender: number) {
this.name = name;
this.age = age;
this.gender = gender;
}
eat() {
console.log('I can eat.');
}
walk() {
console.log('I can walk.');
}
}
// -> 'Human' only refers to a type, but is being used as a value here.
5、keyof 索引查询
在TypeScript中的keyof有点类似于JS中的Object.keys()方法，但是区别在于前者遍历的是类型中的字符串索引，后者遍历的是对象中的键名，示例如下：
interface Rectangle {
x: number;
y: number;
width: number;
height: number;
}
type keys = keyof Rectangle;
// 等价于
type keys = "x" | "y" | "width" | "height";
// 这里使用了泛型，强制要求第二个参数的参数名必须包含在第一个参数的所有字符串索引中
function getRectProperty(rect: T, property: K): T[K] {
return rect[property];
}
let rect: Rectangle = {
x: 50,
y: 50,
width: 100,
height: 200
};
console.log(getRectProperty(rect, 'width')); // -> 100
console.log(getRectProperty(rect, 'notExist'));
// -> Argument of type '"notExist"' is not assignable to parameter of type '"width" | "x" | "y" | "height"'.
在上述示例中我们通过使用keyof来限制函数的参数名property必须被包含在类型Rectangle的所有字符串索引中，如果没有被包含则编译器会报错，可以用来在编译时检测对象的属性名是否书写有误。
6、Partial 可选属性
在某些情况下，我们希望类型中的所有属性都不是必需的，只有在某些条件下才存在，我们就可以使用Partial来将已声明的类型中的所有属性标识为可选的，示例如下：
// 该类型已内置在TypeScript中
type Partial = {
[P in keyof T]?: T[P]
};
interface Rectangle {
x: number;
y: number;
width: number;
height: number;
}
type PartialRectangle = Partial;
// 等价于
type PartialRectangle = {
x?: number;
y?: number;
width?: number;
height?: number;
}
let rect: PartialRectangle = {
width: 100,
height: 200
};
在上述示例中由于我们使用Partial将所有属性标识为可选的，因此最终rect对象中虽然只包含width和height属性，但是编译器依旧没有报错，当我们不能明确地确定对象中包含哪些属性时，我们就可以通过Partial来声明。
7、Pick 部分选择
在某些应用场景下，我们可能需要从一个已声明的类型中抽取出一个子类型，在子类型中包含父类型中的部分或全部属性，这时我们可以使用Pick来实现，示例代码如下：
// 该类型已内置在TypeScript中
type Pick = {
[P in K]: T[P]
};
interface User {
id: number;
name: string;
age: number;
gender: number;
email: string;
}
type PickUser = Pick;
// 等价于
type PickUser = {
id: number;
name: string;
gender: number;
};
let user: PickUser = {
id: 1,
name: 'tom',
gender: 1
};
在上述示例中，由于我们只关心user对象中的id，name和gender是否存在，其他属性不做明确规定，因此我们就可以使用Pick从User接口中拣选出我们关心的属性而忽略其他属性的编译检查。
8、never 永不存在
never表示的是那些永不存在的值的类型，比如在函数中抛出异常或者无限循环，never类型可以是任何类型的子类型，也可以赋值给任何类型，但是相反却没有一个类型可以作为never类型的子类型，示例如下：
// 函数抛出异常
function throwError(message: string): never {
throw new Error(message);
}
// 函数自动推断出返回值为never类型
function reportError(message: string) {
return throwError(message);
}
// 无限循环
function loop(): never {
while(true) {
console.log(1);
}
}
// never类型可以是任何类型的子类型
let n: never;
let a: string = n;
let b: number = n;
let c: boolean = n;
let d: null = n;
let e: undefined = n;
let f: any = n;
// 任何类型都不能赋值给never类型
let a: string = '123';
let b: number = 0;
let c: boolean = true;
let d: null = null;
let e: undefined = undefined;
let f: any = [];
let n: never = a;
// -> Type 'string' is not assignable to type 'never'.
let n: never = b;
// -> Type 'number' is not assignable to type 'never'.
let n: never = c;
// -> Type 'true' is not assignable to type 'never'.
let n: never = d;
// -> Type 'null' is not assignable to type 'never'.
let n: never = e;
// -> Type 'undefined' is not assignable to type 'never'.
let n: never = f;
// -> Type 'any' is not assignable to type 'never'.
9、Exclude 属性排除
与Pick相反，Pick用于拣选出我们需要关心的属性，而Exclude用于排除掉我们不需要关心的属性，示例如下：
// 该类型已内置在TypeScript中
// 这里使用了条件类型(Conditional Type)，和JS中的三目运算符效果一致
type Exclude = T extends U ? never : T;
interface User {
id: number;
name: string;
age: number;
gender: number;
email: string;
}
type keys = keyof User; // -> "id" | "name" | "age" | "gender" | "email"
type ExcludeUser = Exclude;
// 等价于
type ExcludeUser = "id" | "name" | "gender";
在上述示例中我们通过在ExcludeUser中传入我们不需要关心的age和email属性，Exclude会帮助我们将不需要的属性进行剔除，留下的属性id，name和gender即为我们需要关心的属性。一般来说，Exclude很少单独使用，可以与其他类型配合实现更复杂更有用的功能。
10、Omit 属性忽略
在上一个用法中，我们使用Exclude来排除掉其他不需要的属性，但是在上述示例中的写法耦合度较高，当有其他类型也需要这样处理时，就必须再实现一遍相同的逻辑，不妨我们再进一步封装，隐藏这些底层的处理细节，只对外暴露简单的公共接口，示例如下：
// 使用Pick和Exclude组合实现
type Omit = Pick>;
interface User {
id: number;
name: string;
age: number;
gender: number;
email: string;
}
// 表示忽略掉User接口中的age和email属性
type OmitUser = Omit;
// 等价于
type OmitUser = {
id: number;
name: string;
gender: number;
};
let user: OmitUser = {
id: 1,
name: 'tom',
gender: 1
};
在上述示例中，我们需要忽略掉User接口中的age和email属性，则只需要将接口名和属性传入Omit即可，对于其他类型也是如此，大大提高了类型的可扩展能力，方便复用。
总结
在本文中总结了几种TypeScript的使用技巧，如果在我们的TypeScript项目中发现有很多类型声明的地方具有共性，那么不妨可以使用文中的几种技巧来对其进行优化改善，增加代码的可维护性和可复用性。笔者之前使用TypeScript的机会也不多，所以最近也是一边学习一边总结，如果文中有错误的地方，还希望能够在评论区指正。
交流
如果你觉得这篇文章的内容对你有帮助，能否帮个忙关注一下笔者的公众号[前端之境]，每周都会努力原创一些前端技术干货，关注公众号后可以邀你加入前端技术交流群，我们可以一起互相交流，共同进步。
文章已同步更新至Github博客，若觉文章尚可，欢迎前往star！
你的一个点赞，值得让我付出更多的努力！
逆境中成长，只有不断地学习，才能成为更好的自己，与君共勉！
转自https://www.cnblogs.com/tangshiwei/p/12052494.html