TypeScriptとESLintにおけるファイル拡張子 "ts" 欠落エラー "import/extensions" の解決方法
TypeScriptとESLintにおけるファイル拡張子 "ts" 欠落エラー "import/extensions" の解説
このエラーは、TypeScriptファイルのインポート時に拡張子 ".ts" を省略した場合に発生します。ESLintの "import/extensions" ルールによって、ファイル拡張子を明示的に記述することを推奨するためです。
原因
以下の理由により、ファイル拡張子を省略するとエラーが発生します。
- ESLintの "import/extensions" ルール
このルールは、デフォルトで
.js以外のファイル拡張子を省略することを禁止します。 - TypeScriptファイルの拡張子
TypeScriptファイルは
.tsという拡張子を持ちます。
解決方法
このエラーを解決するには、以下の方法があります。
- インポートパスに拡張子 ".ts" を追加する
例：
import { Component } from './MyComponent.ts';
- ESLintの "import/extensions" ルールを修正する
.eslintrc.js ファイルに以下の設定を追加することで、 .ts ファイル拡張子を省略することを許可できます。
{
"rules": {
"import/extensions": [
"error",
"always",
{
"ignorePackages": true,
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
]
}
}
補足
- 上記の解決方法以外にも、
.tsファイルを.jsファイルとして保存することもできますが、TypeScriptの機能をフル活用できないため、推奨されない方法です。
改善点
- 日本語の表現をより自然な表現に変更しました。
- 誤字脱字を修正しました。
- 見出しを追加して、内容を整理しました。
- 補足情報として、関連情報のリンクを追加しました。
MyComponent.ts
export class MyComponent extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
}
App.ts
// エラーが発生するコード
import { MyComponent } from './MyComponent';
function App() {
return (
<div>
<MyComponent />
</div>
);
}
export default App;
このコードを実行すると、以下のエラーメッセージが表示されます。
./App.ts
1:8 error Missing file extension "ts" for './MyComponent' import/extensions
1 | import { MyComponent } from './MyComponent';
| ^^^^^^^^^^^^^^^
2:15 error Missing file extension "ts" for './MyComponent' import/extensions
2 | function App() {
| ^^^^^^^^^^^^^^^
3:10 error Missing file extension "ts" for './MyComponent' import/extensions
3 | return (
| ^^^^^^^^^^^^^^^
4:9 error Missing file extension "ts" for './MyComponent' import/extensions
4 | <MyComponent />
| ^^^^^^^^^^^^^^^
5:6 error Missing file extension "ts" for './MyComponent' import/extensions
5 | );
| ^^^^^^^^^^^^^^^
Found 5 errors.
エラーメッセージの通り、import 文で MyComponent をインポートする際に、ファイル拡張子 ".ts" を省略しているため、エラーが発生しています。
import { MyComponent } from './MyComponent.ts';
function App() {
return (
<div>
<MyComponent />
</div>
);
}
export default App;
この方法では、インポートパスにファイル拡張子 ".ts" を追加することで、ESLintの "import/extensions" ルールを満たします。
{
"rules": {
"import/extensions": [
"error",
"always",
{
"ignorePackages": true,
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
]
}
}
どちらの方法を選択しても、エラーは解決されます。
以下のサンプルコードは、TypeScriptファイルのインポート時にファイル拡張子 ".ts" を省略した場合に発生するエラー "import/extensions" の他の例です。
相対パス
import { MyComponent } from './MyComponent';
function App() {
return (
<div>
<MyComponent />
</div>
);
}
export default App;
import { MyComponent } from '/path/to/MyComponent';
function App() {
return (
<div>
<MyComponent />
</div>
);
}
export default App;
名前空間インポート
import * as MyComponent from './MyComponent';
function App() {
return (
<div>
<MyComponent.MyComponent />
</div>
);
}
export default App;
これらのサンプルコードも、同様にファイル拡張子 ".ts" を追加することでエラーを解決できます。
Typescript eslint - Missing file extension "ts" import/extensions の解決方法
ESLint プラグイン import-resolver-typescript を使用する
このプラグインは、TypeScriptファイルのインポートパスを解決する機能を提供します。このプラグインを使用すると、ファイル拡張子を省略しても、ESLintが正しくインポートパスを解析することができます。
インストール
npm install --save-dev eslint-plugin-import-resolver-typescript
設定
.eslintrc.js ファイルに以下の設定を追加します。
{
"plugins": ["import-resolver-typescript"],
"settings": {
"import/resolver": {
"typescript": {}
}
}
}
TypeScript プロジェクトの設定ファイル tsconfig.json を使用する
tsconfig.json ファイルに baseUrl と paths プロパティを設定することで、ESLintがインポートパスを解決する際に参照するディレクトリを指定することができます。
{
"compilerOptions": {
/* ... */
},
"baseUrl": "./src",
"paths": {
"@/*": ["./src/*"]
}
}
ESLint の "no-undef" ルールを無効にする
このルールは、定義されていない変数を使用することを禁止します。ただし、TypeScriptファイルでは、インポートされた変数は自動的に定義されるため、このルールを無効にしても問題ありません。
{
"rules": {
"no-undef": "off"
}
}
注意事項
- 上記の方法を使用する場合は、ESLintの設定ファイル
.eslintrc.jsの内容をよく確認する必要があります。 - 設定ファイルに誤りがあると、ESLintが正しく動作しなくなる可能性があります。
上記の5つの方法のいずれかを使用することで、Typescript eslint - Missing file extension "ts" import/extensions のエラーを解決することができます。
どの方法を選択するかは、プロジェクトの環境や開発者の好みによって異なります。
node.js typescript eslint
