More than 1 year has passed since last update.

TypeScriptにおけるimport/requireの使い方【TypeScript Deep Dive全部読む】

Posted at 2022-06-01

TypeScript Deep Diveを読みながら、学んだことを軽くまとめていく。

importの使い方について見てみる。

まずCommonJSとES Modulesって何？

JavaScriptをモジュールとして扱うために、定められたモジュールの仕様のこと。

TypeScriptにおいてはmoduleオプションに応じて異なるJavaScriptが生成される。

どちらも使える環境が異なるため、CommonJSをブラウザで使う場合やES ModulesをNodeで使う場合などはひと手間挟む必要がある。

CommonJSの仕様か、ES Modulesの仕様かの違い。

const a = require("./testModule");

// importを用いてモジュールを読み込む。
import {b} from "./testModule";

この際、importでは何らかの型情報を持って読み込むが、require()ではany型の変数を定義することになるため、VScodeの補完などが効きづらくなる。TypeScriptを扱う上ではできるだけimportを使うべき。

エクスポートを行う際は変数、型の定義をexportを前において行う。

module.ts

export let a = 1;

export let b = 2;

export let testfunc = () => {
    console.log("hello world!");
}

こう書いても同じ。

module.ts

let a = 1;

let b = 2;

let testfunc = () => {
    console.log("hello world!");
}
export{
    a,
    b,
    testfunc
}

名前を指定してexportもできる。

export{
    a as a_,
    b as b_,
    testfunc as testfunc_
}

インポートを行う際はimportを使用する。

app.ts

import {a, b, testfunc} from "./module";
console.log(a); // 1
console.log(b); // 2
testfunc(); // hello world!

名前を変更してimportすることもできる。

app.ts

import {a as a_, b as b_, testfunc as testfunc_} from "./module";

*を用いて全てのモジュールをimportすることもできる。

app.ts

import * as m from "./module";
console.log(m.a);
m.testfunc();

ちなみにrequireでも同じような使い方ができる。

app.ts

const m = require("./module");
console.log(m.a);
m.testfunc();

ここから再度エクスポートなどもできる。

app.ts

export * from './foo';

defaultを指定してエクスポートができる。

module.ts

let a;
export default a = 1

app.ts

import a from "./module";
console.log(a); // 1

ただしdeep dive内ではexport defaultは有害、使うなと様々な理由で言われている。

↑記事内では、指定するパスの解決方法についての記述や、import foo = require('foo');といった型だけをimportする手法も紹介されているが、ここに書くのは省略する。