LoginSignup
29
21

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-12

注意

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

参考

29
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
21