Vue ts开发环境之module.d.ts

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27868061/article/details/82918116

在使用ts开发时,常常需要如下形式导入:

import * as a from './image/a.png'

但是默认情况下,typescript的编译检查无法通过这样的文件后缀,这时可以通过ts的模块定义来解决

module.d.ts

declare module '*.scss' {
    const content: any;
    export = content;
}
declare module '*.jpeg' {
    const content: any;
    export = content;
}
declare module '*.jpg' {
    const content: any;
    export = content;
}
declare module '*.png' {
    const content: any;
    export = content;
}
declare module '*.svg' {
    const content: any;
    export = content;
}
declare module '*.gif' {
    const content: any;
    export = content;
}
declare module '*.vue' {
    const content: any;
    export default content;
}

declare module '*.css' {
    const content: any;
    export default content;
}

如上定义,有两种形式

export = content
export default content

分别定义了模块的默认导出与全部导出,全部导出不能与其他形式导出一起使用

下面是百度地图的模块定义

declare module 'BMap' {
    export const Map:any;
    export const MapTypeControl:any
    export const NavigationControl:any
    export const ScaleControl:any
    export const Point:any
    export const Geolocation:any
    export const Marker:any
    export const LocalCity:any
    export const GeolocationControl:any
}

可以看搭配module后面的标识符可以为字符串常量

添加了模块定义后,导入如上模块不会发生编译检查错误