TS命名空间和声明文件的编写

521 阅读2分钟

命名空间

  • 模块的目的是为了防止命名冲突,保证每个模块是独立的
  • 命名空间可以防止命名冲突

Image.png

  • 这个东西编译出来的就是一个对象

但是你现在无法通过外面访问里面的Monkey,如果我们想访问,需要内部导出

Image.png

命名空间可以无限嵌套

Image.png

命名空间最大的功能不是写代码的时候用,而是我们用它来合并类型,进行扩展

命名空间可以和类来进行合并

Image.png

  • 这个时候Person类上就有了type属性

命名空间可以和函数来进行合并,可以来扩展类型

Image.png

  • 可以来扩展功能,也可以扩展类型,我们一般都是用来扩展类型

命名空间可以和枚举合并

Image.png

命名空间同名也可以合并

Image.png

Image.png

注意:接口不和命名空间不能合并

声明文件

  •  例如引入了一个jquery,它没有用ts,我们希望能用人家的,并且不报错
  • 如果我们直接引入jquery,ts不认识,会报错

Image.png

我们一般声明文件都放在.d.ts文件里

  • 创建一个typing文件夹
  • 里面创建一个.d.ts文件

Image.png

  • 然后声明jquery模块

Image.png

声明文件都是.d.ts结尾的

比如我们想引入一个图片,我们不希望它报错,我们就可以进行声明

Image.png

Image.png

  • 我们声明个模块,不管它存不存在,我们引入就不会报错
  • 我们声明模块,全局下就可以用

我们虽然引入模块不报错了,但是我们使用模块并没有任何提示

Image.png

Image.png

我们还可以直接使用,不用引入模块

  • 声明全局函数

Image.png

  • 在别的地方使用

Image.png

d.ts文件查找规则

  • 如果自己写了就用自己的,可以配置是否使用
  • 如果是用ts来写的,默认引入一个包会查找node_modules对应的同名包,找这个包下的package.json,里面有一个标识types
  • 如果不是用ts写的,会找node_modules下@types下的包

声明文件可以通过工具自动生成

Image.png

Image.png

  • tsconfig下进行配置
  • 运行npx tsc命令或者直接npm run dev直接打包,也会重新走配置文件,生成所有的声明文件
  • 声明文件就会自动生成在dist目录下
  • 只要你的ts文件里导出了变量了,声明文件里就会加上