かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScript, Node.js 先に作っておいた変数を named export したい

default exports は好きな名前で import できてしまうから極力 named exports / import にしたほうが良いと教えてもらったので、先に変数が作られてる場合どうするんだろう?と思い調べて見たメモ。

ESModules の named exports

exports

// foo.ts
export const foo = 'Foo!';

import

import { foo } from './foo'

ESModules の default exports

exports

// app.ts
import express = require('express');
const app: express.Express = express();

export default app;

import

import app from './app'

default exports は好きな名前で import できる

import myapp from './app'
myapp; // => express.Express

先に作っている変数を named exports したい

// app.ts
import express = require('express');
const app: express.Express = express();
app.use(...); 
// … 色々処理

export app;
// => Error: Declaration or statement expected.

これはDeclaration or statement expected. エラーになる。

export { } で named exports することができる

// app.ts
import express = require('express');
const app: express.Express = express();
app.use(...); 
// … 色々処理

export { app };

import

import { app } from './app';

₍ ᐢ. ̫ .ᐢ ₎👌

as を使えば名前を変えてnamed exports することもできる

// app.ts
import express = require('express');
const app: express.Express = express();

export { app as myapp };

import

import { app } from './app';
// => Error: Module '"./app"' declares 'app' locally, but it is exported as 'myapp'.

TypeScriptでは myapp で exports されているけど?というエラーを表示してくれる。
₍ ᐢ. ̫ .ᐢ ₎👌

default exports は default という特別な名前を付けた named export だった。

export default app;

これは下記と同じ意味

export { app as default };

e.g.

// app.ts
import express = require('express');
const app: express.Express = express();

export { app as default };

import

import { app } from './app';
// => Error: Module '"./app"' has no exported member 'app'. Did you mean to use 'import app from "./app"' instead?

TypeScriptでは import app from "./app" では?というエラーを表示してくれる。
₍ ᐢ. ̫ .ᐢ ₎👌

import

import app from './app';
// 👌

₍ᐢ •̥ ̫ •̥ ᐢ₎‪ 完全に理解した!

感想

import / exports 周り完全に雰囲気で使っているのでチョクチョクあれ?どうやるんだっけ???になってます。
ESModules と CommonJS の import / export, require / module.exports いつかちゃんと調べようと思いつつ数百年が立ってしまった… そして未だに雰囲気でしか理解してない。。。

TypeScript まだよわよわなんで頑張っていきたい。
チョットづつエラーも読めるようになってきた。


[参考]

ハンズオンNode.js

ハンズオンNode.js

  • 作者:今村 謙士
  • 発売日: 2020/11/17
  • メディア: 単行本(ソフトカバー)

Node.jsデザインパターン 第2版

Node.jsデザインパターン 第2版