■ はじめに
https://dk521123.hatenablog.com/entry/2022/03/13/000000
などで、今まで、なーんとなく使ってた export / import について もう少し深堀りしていく。 また、後述の「3)同じ階層内の複数モジュールをimportするには」も 知らなかったので、メモ。
目次
【1】export 【2】import 1)指定の仕方 2)使用上の注意 3)同じ階層内の複数モジュールをimportするには 4)補足:require について
【0】モジュール(module)
* 一般的な意味だと「ひとまとまりの機能を持った部品」 * TypeScript だと、機能をファイル分割して管理する
【1】export
* ファイルに記述した 変数、関数、クラスなどとして モジュール化として外部に公開するために定義するもの
1)指定の仕方
// 'export' って書くだけ // Class export class Module1 { public sayHello(name: string): string { return `Hello, ${name}` } } // Type (変数) export type Args = { readonly val: string; }
【2】import
1)指定の仕方
[a] 単一モジュールを指定したい場合
import { Module } from "./sub-modules/module";
[b] 複数モジュールを指定したい場合
import * as module from "./sub-modules/module";
2)使用上の注意
[1] 必ずファイルの一番上に書く必要がある
3)同じ階層内の複数モジュールをimportするには
* 以下のモジュールを考える
[フォルダ階層]
+ main.ts + sub-modules + module1.ts + module2ts + index.ts
[1] 階層内に index.ts (e.g. './sub-modules/index.ts') を作成し、import を記述する
export * from './module1' export * from './module2'
[2] 呼び出し側 (e.g. 'main.ts') で imort を記述する
// こんな感じで書ける import { Module1, Module2 } from "./sub-modules";
4)補足:require について
* 以下のようにも指定できるが、 型情報を用いた補完が効かないので、 import を使用したほうがいい
サンプル
// import * as common from 'commonModule' と同じ import common = require('commonModule')
参考文献
https://typescriptbook.jp/reference/import-export-require
https://maku.blog/p/fbu8k8j/
関連記事
TypeScript ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/12/21/180904
TypeScript ~ 基本編 ~
https://dk521123.hatenablog.com/entry/2021/02/15/000000
条件分岐
https://dk521123.hatenablog.com/entry/2022/03/12/000000
Rest引数 (可変長引数)
https://dk521123.hatenablog.com/entry/2016/02/08/111250
記号の演算子 ~ ? / ?? / ! ~
https://dk521123.hatenablog.com/entry/2022/03/21/234932
ループ操作 ~ map etc ~
https://dk521123.hatenablog.com/entry/2021/01/03/000000
配列・リスト操作
https://dk521123.hatenablog.com/entry/2021/02/10/225119
配列・リスト操作 ~ ソート編 ~
https://dk521123.hatenablog.com/entry/2021/02/24/222452
配列・リスト操作 ~ スプレッド構文 / Three-dots ~
https://dk521123.hatenablog.com/entry/2021/03/09/000000
Enum / Union / const assertion
https://dk521123.hatenablog.com/entry/2021/03/17/005906
Visual Studio Code ~ TypeScript ~
https://dk521123.hatenablog.com/entry/2022/03/06/000000
TypeScript ~ クラス / インターフェイス ~
https://dk521123.hatenablog.com/entry/2022/03/13/000000
TypeScript ~ 型エイリアス (Type Alias) ~
https://dk521123.hatenablog.com/entry/2022/04/02/000000
JavaScript ~ クラス ~
https://dk521123.hatenablog.com/entry/2015/12/12/093900