import { ~ as ~ } の"as"とは何者なのか

はじめに

ポートフォリオのフロント側をTypeScript(react)で開発しているのですが、参考にしていた記事で出てきた"import { ~ as ~ }"の"as"はどういう意味なのかしっかり理解しておきたいと思ったので、調べたことを備忘録として残します。
(※import/exportの説明は割愛します）

asとはなんなのか

ものすごく簡単に結論だけ述べると、"as"を使うことで元のモジュール名を別名として使用することができるようになります。
MDNの下記の例が分かりやすかったので引用します。

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

モジュール名自体がが"as"を使用している理由を表していますね笑
可読性を上げるために使用している場合が多いのではないでしょうか？

reallyReallyLongModuleExportName（モジュールのエクスポート名が非常に長い）

import * asを使用する場合

import * as 指定した名前 from 'パス';

「*」を使用することにより、「指定した名前」がパス先のファイルのモジュールからのexportを全て含めることになります。

下記では、meta-syntactic-variable.jsファイルからexportしたモジュール全てをmetaSyntacticという名前に含めています。

importしたmetaSyntacticを使い、元々exportで設定をしていたメソッドを使用するためには、[指定した名前.exportで設定したメソッド名]という順番で記述をすればOKです。

./meta-syntactic-variable.js

function foo() {
  console.log(foo);
}

function bar() {
  console.log(bar);
}

export {foo, bar};

import * as metaSyntactic from 'meta-syntactic-variable.js';

//"指定した名前.exportで設定した関数名"で使用できる

metaSyntactic.foo();
//=> foo
metaSyntactic.bar();
//=> bar

asが使えない場面

"export"ではなく、"export default"を使用している場合は"as"を使用することができません。（そもそもasを使う必要ないですもんね）

参考