TS外部模块导入导出

1、导入导出

模块类型一般有：

• es模块
  • 使用import和export
• commonjs模块
  • 使用require和module.exports
• amd模块
  • 使用defined方法
• umd模块
  • 兼容commonjs和amd

在TS文件中，ES模块可以转换成其他模块，兼容性比较好，所以现在写TS一般都是使用ES语法。

2、declare

declare声明类型

当使用一些外部属性和方法时，内部没有提供类型声明。这时候会有类型报错。

主要使用场景：

• 导入第三方库时，没有提供类型声明
• CDN外链导入方法库，没有提供类型声明
• 打包后的JS文件，没有提供类型声明
• 在原有方法的基础上进行扩展

对全局进行类型声明可以放在*.d.ts文件中，ts类型检查会默认取所有的*.d.ts文件的类型声明（没有在tsconfig.json设置具体的types字段值）

// 声明变量类型
declare const num: number

// 全局函数声明
declare function sum(a: string, b: string): string

// 全局类声明
declare class Person {}

// 全局接口声明
declare interface Person { name: string; }

//  对Window接口进行方法定义，添加fn方法类型
declare interface Window {
    fn(): void
}

// 全局类型声明
declare type Person2 = { name: number; }

// 全局枚举声明
declare enum Season { Spring, Summer, Autumn, Winter }

// 给vue模块定义新接口和方法
declare module "vue" {
    interface newInter {
        name: string
        age: number
    }

    const fn: (a: newInter) => void
}

3、模块类型文件查找顺序

当导入一个三方库时，类型声明文件的查找顺序是：

• tsconfig.json中paths字段，制定的模块名.d.ts。
• 找node_modules目录下对应的模块名文件文件夹，找其中的package.json -> types属性值
• 上一步如果没有找到，则找模块下的index.d.ts文件
• 找node_modules目录下@types目录下模块名文件夹
  • 找package.json -> types属性值
  • 找index.d.ts

4、类型声明文件扩展

当需要对某个库进行类型声明时，可能有很多类型需要声明，如果写在一个文件会造成文件体积很大。

这个时候就可以对文件进行扩展声明了，可以使用三斜线指令令导入对应的类型文件

三斜线指令

• path， 导入自己的文件。
• types，导入第三方库类型文件
• lib，导入lib对应的类型文件

/// <reference path="extra.d.ts" />

export = React
// 全局可使用，不用可额外的导入
export as namespace React;

interface React {
  A: number
  B: string
}