TypeScript学习笔记

# 十九.扩展全局变量类型

前言

  • .ts/.tsx 文件：可以使用 declare global
  • .d.ts 文件：任何内容都会自动进入全局作用域,它还允许您将全局定义放在单独的文件中
  • 单模块覆盖:declare const window

# 1.扩展局部变量

可以直接使用接口对已有的类型进行扩展

# 1.1 String

  • 定义类型
// global.d.ts
interface String {
  double(): string
}
1
2
3
4
  • 扩展原型方法
String.prototype.double = function () {
  return (this as string) + this
}
1
2
3
  • 使用
let str: string = "abc"
str.double()
1
2

# 1.2 window

  • 定义类型
// global.d.ts
interface Window {
  myname: string
}
1
2
3
4
  • 扩展属性
window.myname = "asdasdfasdfasd"
1
  • 使用
console.log(window.myname)
1

# 2.模块内全局扩展

declare global {
  interface String {
    double(): string
  }
  interface Window {
    myname: string
  }
}
1
2
3
4
5
6
7
8

声明全局表示对全局进行扩展

# 3.声明合并

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

# 1.同名接口合并

interface Animal {
  name: string
}
interface Animal {
  age: number
}
let a: Animal = { name: "abcd", age: 10 }
1
2
3
4
5
6
7

# 3.命名空间的合并

  • 扩展类
class Form {}
namespace Form {
  export const type = "form"
}
1
2
3
4
  • 扩展方法
function getName() {}
namespace getName {
  export const type = "form"
}
1
2
3
4
  • 扩展枚举类型
enum Seasons {
  Spring = "Spring",
  Summer = "Summer",
}
namespace Seasons {
  export let Autum = "Autum"
  export let Winter = "Winter"
}
1
2
3
4
5
6
7
8

# 3.交叉类型合并

import { createStore, Store } from "redux"
type StoreWithExt = Store & {
  ext: string
}
let store: StoreWithExt
1
2
3
4
5

# 4.生成声明文件

配置tsconfig.json为 true 生成声明文件

"declaration": true
1

←