TypeScript详解十七：类型扩展

目录

• 1. 扩展局部变量类型
• 2. 模块内全局扩展
• 3. 合并声明
• • 3.1 合并类型声明

1. 扩展局部变量类型

• 拓展一个add方法，实现字符串拼接

interface String {
  add(value: string): string;
}
String.prototype.add = function (value: string) {
  return this + value;
}
let result = new String('hello').add(' word');
console.log(result); // hello word

• 在Window上扩展一个变量

interface Window {
  userName: string;
}

在其他文件就可以拿到拓展的属性或者方法

2. 模块内全局扩展

注意：如果在扩展变量的文件加上了export {}，导出为一个模块的话，此处要修改为以下代码：

• 用 declare global {} 的方式将模块内部扩展改为全局扩展

export { }
declare global {
  // 拓展一个add方法，实现字符串拼接
  interface String {
    add(value: string): string;
  }
  // 在Window上扩展一个变量类型
  interface Window {
    userName: string;
  }
}

String.prototype.add = function (value: string) {
  return this + value;
}
let result = new String('hello').add(' word');
console.log(result); // hello word

此时也可以在其他文件使用

3. 合并声明

• 同一名称的两个独立声明，会被合并成一个单一声明
• 合并后的声明拥有原来两个声明的特性

interface Person {
  name: string;
}
interface Person {
  age: number;
}
type P = Person;
let p: P = {
  name: '张三',
  age: 10
}

• 类既可以作为类型使用，也可以作为值使用

class Person {
  name: string;
}
let p1: Person = { name: '张三' }; // 此时类作为类型使用
console.log(p1); // { name: '张三' }

let p2: typeof Person = Person; // 此时类作为值使用。Person指的是构造函数本身
console.log(p2); // [Function: Person]

• 接口只能作为类型使用
  …
• 更多参考下表：

3.1 合并类型声明