TypeScript编程-module

模块声明文件：xxx.d.ts

        为第三方组件添加类型声明：

        当通过npm引入一个第三方的组件，但是该组件并没有提供类型声明文件，这个时候需要我们自己定义xxx.d.ts 类型声明。类型声明里不用具体实现，例如：

// xxx.ts
const maxInterval = 12;
function getArrayLength(arr) {
  return arr.length;
}

// xxx.d.ts
export function getArrayLength(arr: any[]): number;
export const maxInterval: 12;

       global.d.ts定义全局类型：

        开发过程中，存在很多模块都需要引入的类型，通过import type 引入又比较麻烦，因此可以通过创建global.d.ts文件来实现在全局作用域空间定义类型：

        

declare global { // global没有引号
  type BreadCrumbsType = {
    title: string
    to: string
  }
}

 需要注意的是declare后面跟的是global，没有用引号引起来。

根据TypeScript的模块的基本原理，如果这个页面里没有import、export 的话，那么类型就属于全局空间。因此，可以将declare global删除，定义的类型在模块里是能够识别到的。通常，可能会需要从其他模块引入，尤其使用typeof的时候。这个时候就需要添加declare global。

        类型声明扩展：declare module

实际开发时，给vue全局实例上添加了属性，例如：

app.config.globalProperties.$Bus = Mitt

但是类型系统会报实例类型没有$Bus的类型定义。因此，需要基于vue的类型声明进行扩展，而

declare module 'XXX'  就有类型扩展的功能。

  components.d.ts

declare module 'vue' {
      export interface ComponentCustomProperties {
            '$Bus': Mitt
      }
}

参考官方文档 ：TypeScript 与选项式 API | Vue.js (vuejs.org) 

文件名命名问题：自定义文件 为vue.d.ts, 结果发现所有vue相关的都报类型异常。原因是，node_modules里vue的dist目录里也有vue.d.ts文件，类型文件被覆盖 。

 declare关键字：

        declare是声明的意思。可以声明变量、常量、函数、类。declare声明的不需要具体实现

// 声明类
declare class Greeter {
  constructor(greeting: string);
  greeting: string;
  showGreeting(): void; // 只有函数类型的定义
}

// 声明变量
declare var foo: number;

// 声明常量

declare const foo:number;

// 声明函数

declare function greet(greeting: string): void;

  模块代替命名空间：

   开发中已经不使用命名空间了，完全可以通过模块代替。实际上，作用是相同的。

declare namespace myLib {
  function makeGreeting(s: string): string;
  let numberOfGreetings: number;
}


// myLib.ts

export function makeGreeting(s:string):string

export let numberOfGreeting:number

     模块和命名空间是都是为了解决函数和变量在全局作用域命名冲突的问题。

问题：

        1. global.d.ts里定义的类型，无法在x.ts文件中识别到，但是在.vue里可以

        解决办法：在tsconfig.js里将该类型添加到include里：

"include": ["src/**/*.tsx", "src/**/*.vue", "src/**/*.vue","global.d.ts"],