3行で
- 関数をHoge内にいくつか定義してHoge.someFunc() みたいな形で使いたい
- クラスとして定義したが、これをインスタンス化することはなかった
- 名前を付けて定義したobjectをexportすることにした
詳しく
あるユーティリティ系の関数群を、
import Hoge from './utils/hoge';
Hoge.someFunc();
こういう形で使いたかったので、初めはこうしていました。
export class Hoge {
static someFunc() {
console.info('do something');
}
}
やりたいことはできていますが、Hogeは関数の集まりをまとめたモジュールなので、インスタンス化することはありません。そのため、classを使う必要はありません。
以下のように書くことができればいいのですが、調べる限りそういう書き方はないようでした。
export module Hoge {
someFunc() {
console.info('do something');
}
}
検索していると、以下のStackoverflowを見つけました。
export default {
myMethod1() {
console.log('foo');
},
myMethod2(args...) {
console.log('bar');
}
};
なるほどそう書けばいいのか。しかし、これだと毎回importする側でモジュールの名前を決めなければいけません。
import Hoge from './utils/hoge';
import側で決めるということは、このようにも書けます。
import Fuga from './utils/hoge';
これはどうなんでしょうか。やはりexportするところでモジュールの名前は決まっていたほうがいいような気がします。
少し考えて、名前を付けて定義したobjectをexportすることにしました。
const Hoge = {
someFunc: () => {
console.info('do something');
}
};
export default Hoge
うん、これでやりたいことはできました。ただ、この書き方あまり見ないような気がします。
たとえばMastodonのソースを読んでみると、
import { getLocale } from '../locales';
のような具合に、関数を単体でimportしています。
関数群をconstで宣言したobjectに入れて、それを使うのはあまり一般的ではないんでしょうか。困ることはないので、問題が出るまではobjectごとexport,importする方式でいきたいと思っています。
その後（12/15追記）
この記事を書いたあと思い直して以下のようにオブジェクトをexportする書き方にしていました。
export default {
hello: () => {},
goodbye: () => {},
// ...
}
が、やはり補完が効かなくてつらいので、この記事に書いたようにobjectに名前をつけてexportする形に直しました。
const Hoge = {
hello: () => {},
goodbye: () => {},
}
export default Hoge
export function で関数一つずつexportする方法も考えました。
export function hello() { }
export function goodbye() { }
結局それでは関数名がかぶって補完が活かせないことになりそうだったのでやめました。たとえばAPIを叩くための関数群が複数あったとしたら、 load という関数がたくさんexportされて補完対象になってしまう。それをimportするときに毎回たくさんの候補から選んでいたらつらい、という感じです。