TS 中的模块与命名空间以及声明文件(不完整)
声明文件 declare
声明一个全局库模板,将声明 declare 建议声明在单独的文件内部,声明文件一般是以 .d.ts 为后缀名,还需要注意的是,声明文件的内部是不能包含代码实现的。
declare 基本使用
1. 声明一个全局变量 var let const declare let str: string declare let arr: (number | string)[] = [] declare let obj: { [key: string]: any} = {} 2. 声明一个全局函数 declare function getName(str: string):void 3. 声明类 declare class D { private name: string; constructor(name: string) public getName():void } 4. 声明接口 declare interface A { name: string; num: number; str?:string } 复制代码
声明文件的引入
当我们写好一个声明文件,我们可以通过 三斜线指令 将定义好的声明文件引入到 TS 文件,进行使用
/// <reference path="./1.d.ts" /> 复制代码
声明好的内容如何进行使用
声明外部模块 declare module
declare module 'url' { let name: string; export interface A { num: number; str: string; } } 复制代码
定义好的外部模块通过 import module = require('module')的方式进行引入
import url = require('url') function sum(option:url.A):void { console.log(option.num) } 复制代码
为什么module的后面跟的是 引号,官网中可以看到,就是为了更方便的引入,并且在之前的TS 版本,写法也是有一些变化。
声明外部命名空间 declare namesplace
外部命名空间,也就是所说的(我的理解)外部模块的另一种写法,在官网模块与命名空间部分,开始都有提到,之前的版本与现在的版本写法有些不同
1. 之前的版本写法 derlare module url {} 2. 现在被更改为 derlare namesplace url {} 复制代码
外部的命名空间通过使用 /// 三斜线指令进行引入使用
/// <reference path="./1.d.ts" /> 复制代码
模块
export | import
使用 export 导出任何的声明 (例如: 变量、方法、函数、对象、类等等),都可以使用 export 进行导出,并且一个文件的内部是可以存在多个 export 的。
1.ts export class User { private name: string; constructor(name: string) { this.name = name } public getName():void { console.log(this.name); } } 复制代码
使用 import 关键字将 1.ts 中的导出的类,导入到2.ts 中进行使用
import {User} from './1' let n = new User('小明') console.log(n.getName()); 复制代码
as 重命名
在导出某一个方法或者是类的时候,由于导出的名字过长,我们可以使用 as 的关键词,对导出的方法进行重命名,在使用 import 导入方法的时候,也可以使用 as 进行重命名的操作
注意在模块中的 as 要与 TS 中的断言 as 要区分开,他们的功能不同,所以在使用的时候注意一下,不要搞混他们的概念,由于是使用的是一个关键词,可能会导致混淆
1. ts export function user(name: string):string { console.log(name) } 复制代码
2.ts import {user as u} from '/1' u('小明') 复制代码
* 全部导出
在文件的内部,无需使用 export 对方法、对象、类、接口进行一一导出,如果这个文件内部所有的内容,在我这个文件的内部都需要使用,我就可以到导入模块的时候,使用 * 将其全部导入,进行使用
import * as vs from '/1' 复制代码
在本模块的内部,我就可以通过 vs 打点的方式,调用 1.ts 中定义的所有内容
default 默认导出
在一个模块文件的内部,只允许 default 出现一次,也就是说一个模块文件的内部只能使用一次 default,多次使用是无效的。
1. ts class User { public name: string; constructor(name: string) { this.name = name } public getName(str: string): void { console.log(str); } } export default { User } 复制代码
import vs from './1' console.log(vs); 复制代码
export= 和 import module = require()
具体的介绍官网还是比较标准的,只是在这里说一下 export = 可以将模块内部的内容进行导出,导出可以是类、接口、命名空间、函数或枚举。
1.TS let str: string = '测试' class User { private name: string; constructor(name: string) { this.name = name } getName(): void { console.log(this.name); } } export = { str, User } 2.TS import vs = require('./1') 复制代码
命名空间
单文件命名空间
命名空间,使用他明确的目的就是去解决命名冲突的问题,一个标识符可以在多了命名空间里面进行使用,不会发生冲突,他们的各自含义以及作用都是不同的。
在 TypeScript 通过使用关键字 namespace 创建一个命名空间
namespace Validation { } 复制代码
在命名空间的内部,定义类、函数、对象、变量、接口、泛型等等,如果外部想要使用 命名空间内部定义的内容,命名空间的内部就需要使用 export 关键字,将外面要用到的内容进行导出,如果有一些内容不想外部访问到,可以不适用export 直接像正常书写 TS 一样即可
namespace Validation { export class User { public str: string; constructor(name: string) { this.str = name } } } 使用 let user =new Validation.User('测试') user.getName() 复制代码
在调用的时候,通过命名空间的名字,打点去调用内部导出的类、接口等等。
多文件命名空间
多文件命名空间,也就是将一个命名空间里的内容,存放在多个文件的内部,由于他们之间具有依赖的关系,就需要使用 引用标签 告诉编译器,他们之间的关系
使用时需要注意的是,命名空间之间的关系
引用标签的使用方式 /// <reference path="Validation.ts" /> 复制代码
在编译的时候,需要注意的点就是,确保所有涉及到的文件都要被编译的指令加载到,所以第一种方式就是,所有涉及到的文件同时编译,使用--outFile 对多个文件进行编译
tsc --outFile sum.js 3.ts tsc --outFile 打包后输出的文件 引用多个命名空间的文件 复制代码
/// 指令
指令用于告诉编译器,某一个文件在被编译的时候,需要依赖的文件,一起将依赖的文件进行编译
指令被分成两个,一个是path,另一个是type,另外三个仅作为了解
path=
使用path,一般多用于声明文件的引入,声明文件与声明文件至今存在着依赖的关系,在编译时候,需要将所有的涉及到的,到要进行依赖
/// <reference path = "" /> 复制代码
type=
这个指令是用来声明 依赖的; 一个 /// <reference types="..." />
指令则声明了对某个包的依赖。
/// <reference types="node" /> 复制代码
总结
声明文件的引入方式
/// <reference path = " runoob.d.ts" /> 复制代码
声明模块的引入方式(外部)
import module = require('module') 复制代码
命名空间的引入方式(外部)
/// <reference path = " namesplace.d.ts" />
作者:lrsoy_
链接:https://juejin.cn/post/7026231101882368007