ts类型声明declare

类型声明declare
1、概览
1.1 declare是什么

1. 前提：假如现在有一门用Typescript写的库，想供其他开发人员使用，有两种方式
   方式1 打包ts源文件（供ts用户使用）和编译后的js文件（供js用户使用）
   方式2 提供编译后的js文件和供ts用户使用的类型声明
   后一种方式的优点：所占文件体积较小，十分明确该导入声明，并省去ts进一步编译的时间

2. 类型声明定义：
   万事并不总是如意，代码也不一定都有静态类型
   类型声明文件的拓展名为 .d.ts, 是为无类型的js代码附加ts类型的一种方式

• 如果有对应的js文件，扩展名为 .d.ts, 否则使用.ts扩展名
• 类型声明只能包含类型，不能有值
• 可以使用declare关键字声明js代码中定义了某个值
• 可以理解为：“我保证，我写的js代码导出了这个类型的值”

举个栗子：

import {Subscribe} from './subscribe'
export declare class Observe impelement Subscribabel{
    public_isScalar:boolean = false
    constructor (subscribe?:string){
        this.subscribe = subscribe
    }
    subscribe(observe?:paetialObserver):Subscription{
        // xxxxx
    }
}

/*  使用TSC编译，tsc -d Observabel.ts 将会i得到类型声明文件Observabel.d.ts,可以看到，只保留了类型，没有值，也没有任何函数的具体内容 */
import {Subscribe} from './subscribe'
export declare class Observe impelement Subscribabel{
    _isScalar:boolean
    constructor (subscribe?:string);
    subscribe(observe?:paetialObserver):Subscription
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

1.2 declare的作用

1. ts用户在使用别人编译好的ts代码时，TSC会寻找与js文件对应的.d.ts文件，让ts知道项目中涉及哪些类型，并有代码类型提示，无需重新编译ts代码，极大减少编译时间
2. 定义在项目中任何地方都可以使用的全局类型，无需导入就可以使用（外参类型声明，需要和变量声明区别开）
3. 描述通过npm安装的第三方模块（外参模块声明）

1.2.1 外参变量声明
在ts当中，想要不加var关键字定义一个全局变量会触发报警，正确的做法是在文件中先向typescript声明，有一些全局变量process

declare let process :{
    env : {
      NODE_ENV :'production' | 'development'
    }
}
process = {
    env ： {
      NODE_ENV :'production'
    }
}
1
2
3
4
5
6
7
8
9
10

1.2.2 外参模块声明

1. 定义：把常规的类型声明放入特殊的句法 declare module当中

declare module '模块名'{
   export type MyType = number
   export default MyType
}
1
2
3
4

• 当用import 导入 '模块名’之后，ts就获取了外参模块声明提供的信息
• 如果只想告诉ts，我要导入这个模块，具体类型稍后再确定。现在先假设为any，那么只保留头部，省略声明即可

 declare module '@mc/error-boundary'
      
      //只不过使用时会缺失一些安全性
    eg: import {x} from from '@mc/error-boundary'
    x //an
1
2
3
4
5

• 模块声明支持通配符导入，借此可以为匹配指定模式的任何导入路径声明类型，导入路径使用通配符*来匹配

    import b from './test.json'
    b // object
1
2