More than 5 years have passed since last update.

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

Last updated at 2018-12-13Posted at 2018-12-12

注意

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

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

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

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

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

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でビルドしても動きます。お試しあれ。