【TS基础】个人学习记录9-学习什么是模块、命名空间、声明文件

模块使用

基本使用和es6一样：【es6入门】模块化的写法export与import。

注意：

• import导入的时候，注意不要写文件的后缀.ts。
• 导入导出可以层层嵌套使用，但不宜嵌套太多。

---

命名空间

第一种用法：当工程代码量较大时，通过命名空间可以避免变量名称冲突。

通过namespace来声明命名空间：

export namespace A {
    export class Person { // 命名空间声明的东西要导出才能在外界使用
        name: string
        constructor(name: string) {
            this.name = name
        }
    }
}
// ...
let p = new A.Person('命名空间')

如果要把命名空间导出也是一样的：

import { A } from 'xxx.ts'

let p = new A.Person('命名空间')

好像最新版本又有新的导出方法来了…以后再补充。

命名空间本质上就是一个对象，将其内部的变量组织到这个对象的属性上。

第二种用法：防止interface重复声明。

例如：

export namespace Dashboard {
  export interface LineData {
    label: string[]
    order: number[]
    money: number[]
  }
}

用的时候

import { Dashboard } from 'xxx.ts'

const obj : Dashboard.LineData = {
	// ...
}

---

声明文件

例如我们去使用一些用js写的第三方库的时候，在ts直接去使用会报错，例如jq：

JQuery('#foo') // 这样去使用直接报错，因为ts根本不知道是什么类型的。
// 通过声明文件的形式就可以解决这个问题
declare let JQuery: (selector: string) => any; // 其实就是声明了一个由js写的全局变量
JQuery('#foo')

一般都把声明文件的代码都统一放到一个.d.ts的文件上，例如JQuery.d.ts：

declare let JQuery: (selector: string) => any;

如果是通过script引入的第三方库可以这样定义：

// 全局window上引入的对象定义
interface Window {
  // BMapGL: {
  //   [propName: string]: any
  // }
  // BMapGLLib: any
  // BMapLib: any
}

然后在其他的ts文件就可以直接使用了，不需要引入。

当然，每个第三方库内部的使用方法有很多，都这样写会比较麻烦，所以哪些库会专门去写自己的声明文件，解决这个问题。上面的情况可以直接安装@type/jquery这个库去补充。

不过，一般npm下载第三方库内部就包含了对应的type声明文件，有的可能会自动集成在依赖的@type文件夹里，有的可能单独和依赖文件一起放。

个人了解到好像是，一般源码是js的库，都会采用打补丁的方式去补充d.ts文件，也就是放在@type中，因为这些开源的库作者希望能更多人参与进来，那么js的用户一定是比ts大的，所以源码采用js写。而哪些已经用ts编写的库中，就直接集成d.ts文件了，不需要以补丁的形式。

有了声明文件，除了能使用外，ts还能自动在vscode上弹出提示推荐，例如axios，当你写了axios，vscode就会自动弹出小窗，里面有get、post等推荐。

除了能申明js库之外，还可以声明函数、类等：

declare function toString(x: number): string; // 不能写实现内容

declare class Person { // 不能写具体内容
  public name: string;
  constructor(name: string);
  getAge(): number;
}

我的简单理解就是，他是一个ts类型的说明书，比如当我们用ts写框架项目的时候，dom里有很多东西ts其实并不知道什么类型，那么在框架的依赖里，ts部分的依赖已经有了关于dom的声明文件，ts就可以通过这个文件去查阅dom内部的所有类型内容