5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TypeScriptでパスエイリアス"@types"を定義してはいけない理由

Posted at

問題:"@types"を定義するとインポートエラーが発生する

型定義ファイルをまとめて格納するための、typesディレクトリがあったとします。

image.png

呼び出すたびにパスを直接指定するのは、保守の観点から望ましくないため、

image.png

tsconfig.jsonへパスエイリアスを追加したとします。

import { Article } from '@types/article';

インポートを行うと

型宣言ファイルをインポートできません。'@types/article' の代わりに 'article' をインポートすることを検討してください。

パスが正しい場合でもエラーが発生します。


なぜこのようなエラーが発生するのでしょうか?

原因:node_modulesのパスエイリアスと名前衝突するため

image.png

TypeScriptはデフォルトで "node_modules/@types" 内の型定義ファイルを読み込みます​。

このエイリアスが、自分で作成した@typesと競合するためエラーになります。
エラーテキストはパスが間違っているかもと推測しかねない文章なので、注意が必要です。

解決策:競合しない別名を使用する

image.png

解決策はシンプルで、競合しない名前で作成すればよいです。
custom-types や my-types など競合しない名前をディレクトリ名として使用します。

参考

@typesの自動読み込み


競合を回避するにはnode_modulesの/@ファイル名を確認

5
2
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
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?