Edited at

TypeScriptで画像をimportしても怒られない方法(ParcelとHyperappを添えて)


注意

TypeScript 3.2.2にアップグレードしたら怒られるようになった。調査中。

importにこだわらないなら、以下。

const foo = require('../assets/foo.png')

こっちが無難なんかな〜?


3分クッキング

まず、モジュールの型定義を書きます。


types/index.d.ts

declare module '*.png'

declare module '*.jpg'
declare module '*.gif'

お好みでお好きな拡張子を加えてください。

次に、モジュールの型定義を置いたディレクトリ(types)をtypeRootsに付け加えます。


tsconfig.json

{

"compilerOptions": {
"typeRoots": ["types", "node_modules/@types"],
},
}

最後に、importして彩りを添えます。

import foo from '../assets/foo.png'

できあがり。

Hyperappアプリに書いてParcelでビルドしても動きます。お試しあれ。


参考