基础类型
1.字符串类型
let a: string = '123'
let str: string = `dddd${a}`
2.数字类型
支持十六进制、十进制、八进制和二进制
let notANumber: number = NaN;//Nan
let num: number = 123;//普通数字
let infinityNumber: number = Infinity;//无穷大
let decimal: number = 6;//十进制
let hex: number = 0xf00d;//十六进制
let binary: number = 0b1010;//二进制
let octal: number = 0o744;//八进制
3.布尔类型
let createdBoolean: Boolean = new Boolean(1)
let booleand: boolean = true //可以直接使用布尔值
let booleand2: boolean = Boolean(1) //也可以通过函数返回布尔值
let createdBoolean: boolean = new Boolean(1)//这样会报错 应为事实上 new Boolean() 返回的是一个 Boolean 对象
4.空值类型
function voidFn(): void {
console.log('test void')
}
void也可以定义undefined 和 null类型
let u: void = undefined
let n: void = null; // 关闭严格模式
5.类型级别
- 顶级类型(any、unknow)，包含所有类型。
let anys:any = 123
anys = '123'
anys = true
let anys:unknown = 123
anys = '123'
anys = true
区别： any 可以赋值给任意类型，也可以接收任意类型。
let anys:any = 123
let str:string = "hello"
str = anys
anys = str
unknow 不能赋值给其他类型，只能赋值给自身或者any。
let anys:unknown = 123
let str:string = "hello"
str = anys // 类型unknow不能赋值给string
anys = str
let anys:unknown = 123
let str:unknown = "hello"
let obj:any={name:"lisi"}
str = anys // 类型unknow不能赋值给string
anys = str
obj = str
unknow 类型的对象不能直接获取属性，unknow比any更安全
let obj1:any={name:"lisi"}
let obj2:unknown={name:"zhangsan"}
console.log(obj1.name)
console.log(obj2.name)// Property 'name' does not exist on type 'unknown'
- Object
Object、object、{}三个类型
- Object: 包含了所有类型（普通类型、引用类型）
let a1:Object = 123
let a2:Object = '123'
let a3:Object = []
let a4:Object = {name:'lisi'}
- object:除了原始类型
let a1:object = 123 // Type 'number' is not assignable to type 'object'.
let a2:object = '123' // Type 'string' is not assignable to type 'object'
let a3:object = []
let a4:object = {name:'lisi'}
let a5:object = () => {}
- {}:字面量类型，包含所有类型.
let a1:{} = 123
let a2:{} = '123'
let a3:{} = []
let a4:{} = {name:'lisi'}
let a5:{} = () => {}
- Number、String、Boolean
- number、string、boolean
1'字符串'false- never
- undefined、null：
undefined和null是所有类型的子类型
let void1: undefined = undefined
let null1: null = null
let str1: string = "123"
str1 = void1
str1 = null1
undefined、null 与 void 的区别
//这样写会报错 void类型不可以分给其他类型
let test: void = undefined
let num2: string = "1"
num2 = test
class 类
- 类的定义
class Person {
// 变量先声明，后使用
public name!: string // 非空断言，表示一定会有这个属性
public age?: number // 属性可有可无
constructor(name, age?) {
this.name = name
this.age = age
}
}
- 简写
class Person {
constructor(public name:string, public age?:number) {
}
}
const p = new Person('lisi',20)
- 继承
class Person {
constructor(public name: string, public age?: number) { }
}
class Stu extends Person {
constructor(name: string, age: number) {
super(name, age)
}
}
const p = new Person('lisi', 20)
- 属性权限
class Person {
constructor(public name: string, protected age: number, private height: number,public readonly stuId?:number) {
this.stuId = stuId // readonly 仅读属性，只能初始化的时候赋值，后续不能修改
}
}
class Stu extends Person {
constructor(name: string, age: number, height: number) {
super(name, age, height)
console.log(this.age)
console.log(this.height) // 只能在 Person 类中调用
this.stuId = 123123 // 'stuId' 只读属性
}
}
const p = new Person('lisi', 20, 180)
console.log(p.name)
console.log(p.age) // protected 属性只能Person类或子类中使用
console.log(p.height) // 只能Person类中使用
console.log(typeof Stu)
- 方法重写 子类重写的方法所接受的参数数量和类型与父类不一致，所以 TypeScript 编译器会报错。
class Person {
constructor(public name: string, public age: number) { }
eat(food:string){
}
}
class Stu extends Person {
constructor(name: string, age: number) {
super(name, age)
}
eat(food:string,size:number){ // 报错警告
}
}
- 单例模式
class Singleton {
private constructor() { }
private static instance = new Singleton()
static getInstance() {
return this.instance
}
}
let ins1 = Singleton.getInstance()
let ins2 = Singleton.getInstance()
console.log(ins1 === ins2) // true
接口和对象类型
- 重名interface 可以合并
interface A{name:string}
interface A{age:number}
var x:A={name:'xx',age:20}
- 继承
//继承
interface A{
name: string
}
interface B extends A{
age: number
}
let obj:B = {
age: 18,
name: "string"
}
- 可选属性 使用
?操作符
interface Person {
b?:string,
a:string
}
const person:Person = {
a:"213"
}
- 任意属性 [propName: string]
适用于后端接口返回的字段太多，但是我只想用其中的几个。
//应为我们定义了[propName: string]: any;
interface Person {
b?:string,
a:string,
[propName: string]: any;
}
const person:Person = {
a:"213",
c:"123"
}
- 只读属性 readonly
// a是只读的不允许重新赋值
interface Person {
readonly a: string,
}
const person: Person = {
a: "213"
}
person.a = 123 // Cannot assign to 'a' because it is a read-only property
- 接口定义函数
interface Fn {
(name:string):number
}
const fn:Fn = function(name:string):number {
return 1
}
- 对象中的属性多余接口
- 使用断言的方式
interface Person{
name:string,
age:number
}
let person:Person = {
name:'lisi',
age:23,
height: 180
} as Person
- 任意属性
interface Person{
name:string,
age:number
[key:string]:any
}
let person:Person = {
name:'lisi',
age:23,
height: 180
}
- 获取接口中某一个属性的类型
interface Person{
name:string,
age:number
[key:string]:any
}
type personName = Person['name']
数组类型
//类型加中括号
let arr:number[] = [123]
//这样会报错定义了数字类型出现字符串是不允许的
let arr:number[] = [1,2,3,'1']
//操作方法添加也是不允许的
let arr:number[] = [1,2,3,]
arr.unshift('1')
var arr: number[] = [1, 2, 3]; //数字类型的数组
var arr2: string[] = ["1", "2"]; //字符串类型的数组
var arr3: any[] = [1, "2", true]; //任意类型的数组
- 数组泛型
规则 Array<类型>
let arr:Array<number> = [1,2,3,4,5] - 用接口表示数组
interface NumberArray {
[index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
//表示：只要索引的类型是数字时，那么值的类型必须是数字。
- 多维数组
let data:number[][] = [[1,2], [3,4]];
- arguments类数组
function Arr(...args:number[]): void {
console.log(args) // [ 111, 222, 333 ]
console.log(arguments) // [Arguments] { '0': 111, '1': 222, '2': 333 }
let arr:IArguments = arguments //ts内置对象IArguments 定义
}
Arr(111, 222, 333)
//其中 IArguments 是 TypeScript 中定义好了的类型，它实际上就是：
interface IArguments {
[index: number]: any;
length: number;
callee: Function;
}
函数扩展
- 函数的类型
//注意，参数不能多传，也不能少传 必须按照约定的类型来
const fn = (name: string, age:number): string => {
return name + age
}
fn('张三',18)
- 可选参数
//通过?表示该参数为可选参数
const fn = (name: string, age?:number): string => {
return name + age
}
fn('张三')
- 函数参数的默认值
const fn = (name: string = "我是默认值"): string => {
return name
}
fn()
- 接口定义函数
//定义参数 num 和 num2 ：后面定义返回值的类型
interface Add {
(num: number, num2: number): number
}
const fn: Add = (num: number, num2: number): number => {
return num + num2
}
fn(5, 5)
interface User{
name: string;
age: number;
}
function getUserInfo(user: User): User {
return user
}
- 函数重载
方法名字相同，而参数不同，返回类型可以相同也可以不同。
function fn(params: number): void
function fn(params: string, params2: number): void
function fn(params: any, params2?: any): void {
console.log(params)
console.log(params2)
}
fn(123)
fn('123',456)
类型断言 | 联合类型 | 交叉类型
- 联合类型
let myPhone: number | string = '010-820'
const fn = (something:number | boolean):boolean => {
return !!something
}
- 交叉类型
interface People {
age: number,
height： number
}
interface Man{
sex: string
}
const xiaoman = (man: People & Man) => {
console.log(man.age)
console.log(man.height)
console.log(man.sex)
}
xiaoman({age: 18,height: 180,sex: 'male'});
- 类型断言
语法：
值 as 类型(value as string) 或 <类型>值(<string>value)
interface A {
run: string
}
interface B {
build: string
}
const fn = (obj: A | B): string => {
return (obj as A).run
}
//可以使用类型断言来推断他传入的是A接口的值
(window as any).abc = 123 //可以使用any临时断言在 any 类型的变量上，访问任何属性都是允许的。
内置对象
- ECMAScript 的内置对象：
Boolean、Number、string、RegExp、Date、Error
let b: Boolean = new Boolean(1)
console.log(b)
let n: Number = new Number(true)
console.log(n)
let s: String = new String('lisi')
console.log(s)
let d: Date = new Date()
console.log(d)
let r: RegExp = /^1/
console.log(r)
let e: Error = new Error("error!")
console.log(e)
- DOM 和 BOM 的内置对象：
Document、HTMLElement、Event、NodeList
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
//读取div 这种需要类型断言 或者加个判断应为读不到返回null
let div:HTMLElement = document.querySelector('div') as HTMLDivElement
document.addEventListener('click', function (e: MouseEvent) {
});
//dom元素的映射表
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
"article": HTMLElement;
"aside": HTMLElement;
"audio": HTMLAudioElement;
"b": HTMLElement;
"base": HTMLBaseElement;
"bdi": HTMLElement;
"bdo": HTMLElement;
"blockquote": HTMLQuoteElement;
"body": HTMLBodyElement;
"br": HTMLBRElement;
"button": HTMLButtonElement;
"canvas": HTMLCanvasElement;
"caption": HTMLTableCaptionElement;
"cite": HTMLElement;
"code": HTMLElement;
"col": HTMLTableColElement;
"colgroup": HTMLTableColElement;
"data": HTMLDataElement;
"datalist": HTMLDataListElement;
"dd": HTMLElement;
"del": HTMLModElement;
"details": HTMLDetailsElement;
"dfn": HTMLElement;
"dialog": HTMLDialogElement;
"dir": HTMLDirectoryElement;
"div": HTMLDivElement;
"dl": HTMLDListElement;
"dt": HTMLElement;
"em": HTMLElement;
"embed": HTMLEmbedElement;
"fieldset": HTMLFieldSetElement;
"figcaption": HTMLElement;
"figure": HTMLElement;
"font": HTMLFontElement;
"footer": HTMLElement;
"form": HTMLFormElement;
"frame": HTMLFrameElement;
"frameset": HTMLFrameSetElement;
"h1": HTMLHeadingElement;
"h2": HTMLHeadingElement;
"h3": HTMLHeadingElement;
"h4": HTMLHeadingElement;
"h5": HTMLHeadingElement;
"h6": HTMLHeadingElement;
"head": HTMLHeadElement;
"header": HTMLElement;
"hgroup": HTMLElement;
"hr": HTMLHRElement;
"html": HTMLHtmlElement;
"i": HTMLElement;
"iframe": HTMLIFrameElement;
"img": HTMLImageElement;
"input": HTMLInputElement;
"ins": HTMLModElement;
"kbd": HTMLElement;
"label": HTMLLabelElement;
"legend": HTMLLegendElement;
"li": HTMLLIElement;
"link": HTMLLinkElement;
"main": HTMLElement;
"map": HTMLMapElement;
"mark": HTMLElement;
"marquee": HTMLMarqueeElement;
"menu": HTMLMenuElement;
"meta": HTMLMetaElement;
"meter": HTMLMeterElement;
"nav": HTMLElement;
"noscript": HTMLElement;
"object": HTMLObjectElement;
"ol": HTMLOListElement;
"optgroup": HTMLOptGroupElement;
"option": HTMLOptionElement;
"output": HTMLOutputElement;
"p": HTMLParagraphElement;
"param": HTMLParamElement;
"picture": HTMLPictureElement;
"pre": HTMLPreElement;
"progress": HTMLProgressElement;
"q": HTMLQuoteElement;
"rp": HTMLElement;
"rt": HTMLElement;
"ruby": HTMLElement;
"s": HTMLElement;
"samp": HTMLElement;
"script": HTMLScriptElement;
"section": HTMLElement;
"select": HTMLSelectElement;
"slot": HTMLSlotElement;
"small": HTMLElement;
"source": HTMLSourceElement;
"span": HTMLSpanElement;
"strong": HTMLElement;
"style": HTMLStyleElement;
"sub": HTMLElement;
"summary": HTMLElement;
"sup": HTMLElement;
"table": HTMLTableElement;
"tbody": HTMLTableSectionElement;
"td": HTMLTableDataCellElement;
"template": HTMLTemplateElement;
"textarea": HTMLTextAreaElement;
"tfoot": HTMLTableSectionElement;
"th": HTMLTableHeaderCellElement;
"thead": HTMLTableSectionElement;
"time": HTMLTimeElement;
"title": HTMLTitleElement;
"tr": HTMLTableRowElement;
"track": HTMLTrackElement;
"u": HTMLElement;
"ul": HTMLUListElement;
"var": HTMLElement;
"video": HTMLVideoElement;
"wbr": HTMLElement;
}
- Promise
let promise = new Promise<number>((resolve,reject) => {
resolve(123)
})
元组类型
如果需要一个固定大小的不同类型值的集合，可以使用元组。
元组就是数组的变种：元组（Tuple）是固定数量的不同类型的元素的组合
let arr:[number,string] = [1,'string']
元组类型还可以支持自定义名称和变为可选的
let a:[x:number,y?:boolean] = [1]
- 越界元素
let arr:[number,string] = [1,'string']
arr.push(true)//error
- 应用场景 例如定义excel返回的数据
let excel: [string, string, number, string][] = [
['title', 'name', 1, '123'],
['title', 'name', 1, '123'],
['title', 'name', 1, '123'],
['title', 'name', 1, '123'],
['title', 'name', 1, '123'],
]
枚举类型
- 数字枚举 例如 红绿蓝 Red = 0 Green = 1 Blue= 2 分别代表红色0 绿色为1 蓝色为2
enum Types{
Red,
Green,
BLue
}
增长枚举
enum Types{
Red = 1,
Green,
BLue
}
如上，我们定义了一个数字枚举， Red使用初始化为 1。 其余的成员会从 1开始自动增长。 换句话说， Type.Red的值为 1， Green为 2， Blue为 3。
- 字符串枚举
字符串枚举的概念很简单。 在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。
enum Types{
Red = 'red',
Green = 'green',
BLue = 'blue'
}
由于字符串枚举没有自增长的行为，字符串枚举可以很好的序列化。 换句话说，如果你正在调试并且必须要读一个数字枚举的运行时的值，这个值通常是很难读的 - 它并不能表达有用的信息，字符串枚举允许你提供一个运行时有意义的并且可读的值，独立于枚举成员的名字。
- 异构枚举 枚举可以混合字符串和数字成员
enum Types{
No = "No",
Yes = 1,
}
- 接口枚举 定义一个枚举Types 定义一个接口A 他有一个属性red 值为Types.yyds
enum Types {
yyds,
dddd
}
interface A {
red:Types.yyds
}
let obj:A = {
red:Types.yyds
}
- 常量枚举
常量枚举没有转换成一个对象，但是枚举中的每一个属性是一个变量。
多次访问使用enum 对象，只使用一次可以使用常量枚举。
类型别名
type 关键字（可以给一个类型定义一个名字）多用于复合类型
- 定义类型别名
type str = string
let s:str = "我是小满"
console.log(s);
- 定义函数别名
type str = () => string
let s: str = () => "我是小满"
console.log(s);
- 定义值的别名
type value = boolean | 0 | '213'
let s:value = true //变量s的值 只能是上面value定义的值
type 和 interface 的区别
- interface可以继承 type 只能通过 & 交叉类型合并
- type 可以定义联合类型,interface不行
- interface 遇到重名的会合并 type 不行
type高级用法
extends：左边的值会作为右边值的子类型遵循图中上下的包含关系
type a = 1 extends number ? 1 : 0 //1
type a = 1 extends Number ? 1 : 0 //1
type a = 1 extends Object ? 1 : 0 //1
type a = 1 extends any ? 1 : 0 //1
type a = 1 extends unknow ? 1 : 0 //1
type a = 1 extends never ? 1 : 0 //0
never类型
TypeScript将使用 never 类型来表示不应该存在的状态
// 返回never的函数必须存在无法达到的终点
// 因为必定抛出异常，所以 error 将不会有返回值
function error(message: string): never {
throw new Error(message);
}
// 因为存在死循环，所以 loop 将不会有返回值
function loop(): never {
while (true) {
}
}
- never 与
void的差异
- void类型只是没有返回值 但本身不会出错
//void类型只是没有返回值 但本身不会出错
function Void():void {
console.log();
}
//只会抛出异常没有返回值
function Never():never {
throw new Error('aaa')
}
- 当我们鼠标移上去的时候会发现 只有void和number never在联合类型中会被直接移除
type A = void | number | never // number | void
- 使用场景
类型保护：
正常情况：
symbol类型
可以传递参做为唯一标识 只支持 string 和 number 类型的参数
let sym1 = Symbol();
let sym2 = Symbol("key"); // 可选的字符串key
- Symbol的值是唯一的
const s1 = Symbol()
const s2 = Symbol()
// s1 === s2 =>false 用了不同的内存地址
- for 会全局查找有没有注册过Symbol的key
console.log(Symbol.for('111') === Symbol.for('111')); // true
- 用作对象属性的键
const s1 = Symbol()
const s2 = Symbol()
let obj = {
[s1]:111,
[s2]:222
}
- Symbol属性遍历
// 1 拿到具体的symbol 属性,对象中有几个就会拿到几个
Object.getOwnPropertySymbols(obj1)
console.log(Object.getOwnPropertySymbols(obj1))
// 2 es6 的 Reflect 拿到对象的所有属性
Reflect.ownKeys(obj1)
console.log(Reflect.ownKeys(obj1))
迭代器 和 生成器
泛型
- 函数泛型
function num (a:number,b:number) : Array<number> {
return [a ,b];
}
num(1,2)
function str (a:string,b:string) : Array<string> {
return [a ,b];
}
str('独孤','求败')
使用泛型优化
function Add<T>(a: T, b: T): Array<T> {
return [a,b]
}
Add<number>(1,2)
Add<string>('1','2')
- 不同的泛型参数名
function Sub<T,U>(a:T,b:U):Array<T|U> {
const params:Array<T|U> = [a,b]
return params
}
Sub<Boolean,number>(false,1)
- 定义泛型接口
interface MyInter<T> {
(arg: T): T
}
function fn<T>(arg: T): T {
return arg
}
let result: MyInter<number> = fn
result(123)
- 泛型约束
我们期望在一个泛型的变量上面，获取其
length参数，但是，有的数据类型是没有length属性的
function getLegnth<T>(arg:T) {
return arg.length
}
可以使用泛型约束，
interface Len {
length:number
}
function getLegnth<T extends Len>(arg:T) {
return arg.length
}
getLegnth<string>('123')
- 使用keyof 约束对象
function prop<T, K extends keyof T>(obj: T, key: K) {
return obj[key]
}
let o = { a: 1, b: 2, c: 3 }
prop(o, 'a')
prop(o, 'd') //此时就会报错发现找不到
tsconfig.json配置文件
- 生成tsconfig.json 文件
这个文件是通过
tsc --init命令生成的
"compilerOptions": {
"incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度
"tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置
"diagnostics": true, // 打印诊断信息
"target": "ES5", // TS编译成的目标语言的版本
"module": "CommonJS", // 生成代码的模板标准，AMD UMD ES6
"outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD",
"lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
"allowJS": true, // 允许编译器编译JS，JSX文件
"checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
"outDir": "./dist", // 指定输出目录
"rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
"declaration": true, // 生成声明文件，开启后会自动生成声明文件
"declarationDir": "./file", // 指定生成声明文件存放目录
"emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件
"sourceMap": true, // 生成目标文件的sourceMap文件
"inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中
"declarationMap": true, // 为声明文件生成sourceMap
"typeRoots": [], // 声明文件目录，默认时node_modules/@types
"types": [], // 加载的声明文件包
"removeComments":true, // 删除注释
"noEmit": true, // 不输出文件,即编译后不会生成任何js文件
"noEmitOnError": true, // 发送错误时不输出任何文件
"noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用
"importHelpers": true, // 通过tslib引入helper函数，文件必须是模块
"downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
"strict": true, // 开启所有严格的类型检查
"alwaysStrict": true, // 在代码中注入'use strict'
"noImplicitAny": true, // 不允许隐式的any类型
"strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
"strictFunctionTypes": true, // 不允许函数参数双向协变
"strictPropertyInitialization": true, // 类的实例属性必须初始化
"strictBindCallApply": true, // 严格的bind/call/apply检查
"noImplicitThis": true, // 不允许this有隐式的any类型
"noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)
"noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)
"noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)
"noImplicitReturns": true, //每个分支都会有返回值
"esModuleInterop": true, // 允许export=导出，由import from 导入
"allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块
"moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": { // 路径映射，相对于baseUrl
// 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置
"jquery": ["node_modules/jquery/dist/jquery.min.js"]
},
"rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错
"listEmittedFiles": true, // 打印输出文件
"listFiles": true// 打印编译的文件(包括引用的声明文件)
}
// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
"include": [
"src/**/*"
],
// 指定一个排除列表（include的反向操作）
"exclude": [
"demo.ts"
],
// 指定哪些文件使用该配置（属于手动一个个指定文件）
"files": [
"demo.ts"
]
namespace命名空间
我们在工作中无法避免全局变量造成的污染，TypeScript提供了namespace 避免这个问题出现
- 内部模块，主要用于组织代码，避免命名冲突。
- 命名空间内的类默认私有
- 通过
export暴露 - 通过
namespace关键字定义
namespace a {
export const Time: number = 1000
export const fn = <T>(arg: T): T => {
return arg
}
fn(Time)
}
namespace b {
export const Time: number = 1000
export const fn = <T>(arg: T): T => {
return arg
}
fn(Time)
}
a.Time
b.Time
－ 嵌套命名空间
namespace a {
export namespace b {
export class Vue {
parameters: string
constructor(parameters: string) {
this.parameters = parameters
}
}
}
}
let v = a.b.Vue
new v('1')
－ 合并命名空间
声明文件d.ts
- 声明文件 declare 当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有子属性的）全局对象
interface 和 type 声明全局类型
/// <reference /> 三斜线指令
例如我们有一个express 和 axios
发现express 报错了
让我们去下载他的声明文件
npm install @types/node -D
那为什么axios 没有报错
我们可以去node_modules 下面去找axios 的package json
发现axios已经指定了声明文件 所以没有报错可以直接用
通过语法declare 暴露我们声明的axios 对象
declare const axios: AxiosStatic;
如果有一些第三方包确实没有声明文件我们可以自己去定义
名称.d.ts 创建一个文件去声明
- 案例手写声明文件
import express from 'express'
const app = express()
const router = express.Router()
app.use('/api', router)
router.get('/list', (req, res) => {
res.json({
code: 200
})
})
app.listen(9001,()=>{
console.log(9001)
})
express.d.ts
declare module 'express' {
interface Router {
get(path: string, cb: (req: any, res: any) => void): void
}
interface App {
use(path: string, router: any): void
listen(port: number, cb?: () => void): void
}
interface Express {
(): App
Router(): Router
}
const express: Express
export default express
}
-
获取对象类型
-
重载
