超基本！import {} とするのと{}をつけないので何がちがうの？

Posted at 2026-02-09

TypeScriptのimportの仕方には二種類あります。

// 名前付きimport
import { readFile } from 'example.ts';

// default import
import readFile from 'example.ts';

私はいつも適当に使える方を使っているのですが、
ふと、ちゃんと理解してみようと思ったので軽くまとめます！

→ 急いでいる方はまとめからどうぞ

{}が付くのは名前付きimport

これは、
「example.tsの中からreadFileだけ取り出す」
という意味になります。

example.tsの中にはもしかして

export function readFile() {
// 実装
}

export function writeFile() {
//実装
}

のように、いくつか関数が入っているのかもしれませんね。
もちろん、そのファイルに一つしか関数がなかったとしても使用できます。

名前付きimportできるのは、

export function readFile() {}
export class FileReader {}
export type File = {};
export interface Options {}

のような名前付きexportされてるもの（default exportとなっていないもの）じゃないと名前付きimportはできません。

対するdefault importは、イメージとしては、「そのモジュールのメインの1個を取り出す」
という意味。

default exportされているのものしかdefault importできないので注意。

export default function readFile() {}

こちらは好きな名前でimportできるので、
別ファイルで定義はreadFile()だけど、呼び出し先ではreadScriptFile()として扱いたければ、

import readScriptFile from 'example.ts';

として呼び出して、その名で使うことも可能。

名前変えてもいいの？！と思うけど、default exportできるものって1ファイルに1つだから、呼び出し先で名前が違くても、どれがどれのこと？って混乱することはないですよね。

名前付きだと、一つのファイルから何個かexportしている可能性があるから、import先で名前変えちゃうと、どれがどれのことを指しているのかよくわからないのでNGなんでしょうね。
なかなか理にかなっているな、と思います！

ただ、名前付きimportでも、

import { readFile as myReadFile } from './example';

のように名前変えてimportできるみたいですが、混乱するので今回は深追いしません。
へぇそうなんだ程度で。

default exportは現場では嫌われている？という噂。

などの理由で、あまり推奨されていないという噂を聞きましたが、真偽はわかりません。

ただ、自分は以前、
App()と定義して、import先ではProjectPage()のように使ってしまっていたことがあり、
たしかに参照追跡や検索がしずらかった経験があります。
それのせいで後からコードを見返した時に、理解に時間がかかったので、上記には少し共感できるところはあります。