TypeScriptのexport defaultが非推奨となっていた件

オフ投稿者: sesera

export defaultとは

JavaScriptやTypeScriptでモジュールをエクスポートする方法の1つです。1つのファイルから1つの主要な機能やクラスをエクスポートする際によく使われてきました。

// 従来の書き方
export default function add(a: number, b: number) {
    return a + b;
}

TypeScriptコミュニティで以下の問題点が指摘されています。

・自動インポートやリファクタリングがしづらい
・名前付きエクスポートと比べてバンドルサイズが大きくなりやすい
・デバッグが難しい
・任意の名前でインポートできすぎて混乱を招く

特に自動インポートの問題は深刻でした。VSCodeなどのIDEで自動補完を使う際に、default exportは正しい名前を推測できないことがあります。

代わりに名前付きエクスポートを使うことが推奨されています。

// 推奨される書き方
export function add(a: number, b: number) {
    return a + b;
}

export class Calculator {
    // クラスの実装
}

この書き方なら、インポートする側も明確になります。typoも防げるのでコードの品質が上がりますよ。

既存のコードを移行する際のポイントです。

一度にすべてを変更する必要はありません。新しいコードから徐々に移行していくのがおすすめです。

export defaultは非推奨になりましたが、完全に禁止されているわけではありません。ただし、新しいコードを書く際は名前付きエクスポートを使うことで、より保守性の高いコードが書けます。

チーム開発では特に、名前付きエクスポートを使うことでコードの一貫性が保てて良いですよ。