【TS】TypeScript ~ export / import ~

■ はじめに

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