https://qiita.com/uhyo/items/22d851c3cbd2570864ce?utm_source=Qiitaニュース&utm_campaign=aefbe6e4cf-Qiita_newsletter_510_04_13_2022&utm_medium=email&utm_term=0_e44feaa081-aefbe6e4cf-34388437

みなさんこんにちは。今日は、TypeScriptの新しいコンパイラオプション（おそらく4.7で導入）であるmoduleSuffixesについての話題がTwitterで見られました。

moduleSuffixesについて詳しくはこちらをご参照ください。

これについては、「モジュール解決がさらに複雑化する」などいくつかの方向性から否定的な意見が見られました。しかし、筆者が考えてみたところ、正当性のある機能追加だと納得できたので考えをご紹介します。

3行でまとめると

• これまで通りランタイムの挙動に影響しないから大丈夫だよ
• pathsが怖くないならmoduleSuffixesも怖くないよ
• TypeScriptはJavaScript環境に追随するよ

moduleSuffixesとは

では、moduleSuffixesはどんなコンパイラオプションなのかという解説をまず少しします。これはTypeScriptが行うモジュール解決に新たな拡張性を追加するオプションです。モジュール解決に関わる既存のオプションとしてはmoduleResolutionやpaths, baseUrlなどがあります。moduleSuffixesは"moduleResolution": "node"時のモジュール解決（今時のプロジェクトは大体こっちです）に影響を与えます。

これまでのモジュール解決

TypeScriptでは次のように他のファイルをインポートできることはご存知の通りです。

import something from "./foo";

これは「同じディレクトリにあるfooからインポートする」という記述ですが1、では「同じディレクトリにあるfoo」の実態は何でしょうか。そう、foo.tsのことです2（JSXが有効の場合はfoo.tsxも可ですが、この記事では簡単のために以降JSXのことは省略します）。このように、「"./foo"」のような記述から具体的にどのファイルをインポートしているのかを特定するのがモジュール解決です。

これまでのTypeScriptでは、このように拡張子なしで相対パスを指定した場合は.tsを補ってファイルが探索されていました。つまり、./fooに対してはfoo.tsやfoo.tsxといったファイルが候補として探索されます。

moduleSuffixesは何をするのか

moduleSuffixesは例えば次のように、配列を指定します。次の例はPRからの引用で、React Nativeでのユースケースを意識した例です。

"moduleSuffixes": [".ios", ".native", ""]

こうした場合、ファイル名にここで指定されたsuffix（接尾辞）をつけたファイル名も探索対象になります。つまり、./fooの場合、foo.ios.ts、foo.native.ts、foo.tsの3つのファイルが探索対象になります。