在使用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後面的識別符號可以為字串常量

添加了模組定義後,匯入如上模組不會發生編譯檢查錯誤