■ はじめに

https://dk521123.hatenablog.com/entry/2022/03/13/000000

などで、今まで、なーんとなく使ってた export / import について
もう少し深堀りしていく。 

また、後述の「３）同じ階層内の複数モジュールをimportするには」も
知らなかったので、メモ。

【０】モジュール（module）

* 一般的な意味だと「ひとまとまりの機能を持った部品」
* TypeScript だと、機能をファイル分割して管理する

【１】export

* ファイルに記述した 変数、関数、クラスなどとして
　モジュール化として外部に公開するために定義するもの

１）指定の仕方

// 'export' って書くだけ

// Class
export class Module1 {
  public sayHello(name: string): string {
    return `Hello, ${name}`
  }
}

// Type (変数)
export type Args = {
  readonly val: string;
}

【２】import

１）指定の仕方

[a] 単一モジュールを指定したい場合

import { Module } from "./sub-modules/module";

[b] 複数モジュールを指定したい場合

import * as module from "./sub-modules/module";

２）使用上の注意

[1] 必ずファイルの一番上に書く必要がある

３）同じ階層内の複数モジュールを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";

４）補足：require について

* 以下のようにも指定できるが、
　型情報を用いた補完が効かないので、
　import を使用したほうがいい

サンプル

// import * as common from 'commonModule' と同じ
import common = require('commonModule')

参考文献

https://typescriptbook.jp/reference/import-export-require
https://maku.blog/p/fbu8k8j/

プログラムの超個人的なメモ

Memo for Programming.

【TS】TypeScript ～ export / import ～

■ はじめに

目次

【０】モジュール（module）

【１】export

１）指定の仕方

【２】import

１）指定の仕方

２）使用上の注意

３）同じ階層内の複数モジュールをimportするには

４）補足：require について

参考文献

関連記事