モジュールのエクスポート

モジュールはコードをまとめてグループ化して、呼び出すことができる機能。C# でいうところの using ディレクティブかな。なにか適当な処理を書いて、それを外部にモジュールとして提供する場合は export を使い、外部からモジュールを読み込むときは import を使用する。

まずは適当にモジュールを作る。

export function returnGreeting(greeting: string) {
    console.log (`The message from Greetings_module is ${greeting}`);
}

export function returnGreeting (greeting: string) {
    let greetingLength = getLength(greeting);
    console.log(`The message from GreetingsLength is ${greeting}.
    It is ${greetingLength} characters long.`);
}

function getLength (message: string) {
    return message.length;
}

モジュールのインポート

インポート方法はいくつかあるみたい。

// コンポーネント1つをインポート
import {<component name>} from "<module name>";

// コンポーネント名を別名にしてインポート
import {<component name> as <new name>} from "<module name>";

// モジュール全体をインポートして、各コンポーネントを参照する
import * as <variable name> from "<module name>"

ただし、生成された JS を Web 上で実行するには拡張子 .js が必ず必要になる。

これを踏まえてサンプルプログラムを記述。

import { returnGreeting } from "./greetings_module";
import * as allGreetingFunctions from "./greetings_module";
import { returnGreeting as returnGreetingLength } from "./greetings_utilities_module";

returnGreeting("Hola!");
allGreetingFunctions.returnGreeting("Bonjour");
returnGreetingLength("Hello!");

実行結果

The message from Greetings_module is Hola!
The message from Greetings_module is Bonjour
The message from GreetingsLength is Hello!.
    It is 6 characters long.

コンパイルオプション

モジュールをコンパイルするのにオプションを使うことができる。これで node.js 用の main.ts モジュールをコンパイルできる。

tsc --module commonjs main.ts

Web で実行する場合は es6 オプションを使う。

tsc --module es6 main.ts

ただし JS を動かそうとすると CORS でエラーが起こるので、サーバを適当にたててやる。例えば、Live Server を使うといい。

タイプライブラリ

MS Learn の説明を読んでもよくわからんだったので、ちょっと調べた。もともと、TypeScript を使う目的は静的な型定義ができる点。なので外部ライブラリ（JavaScript）を使おうとすると、どうしても型定義が曖昧になってしまう。そこで、タイプライブラリというものを使うと TypeScript 向けに型定義されたインターフェイスが提供される。で合っているのかな？知らんけど。で、@types/ をつけることで TypeScript 向けに型定義をしてくれるらしい。

このセクションは演習もついているのでやってみる。まずは main.ts と tsconfig.json をつくっておく。次に dotenv をインストールする。ちなみに、dotenv は機密情報をまとめたファイルで、情報を管理することができるらしい。

npm install dotenv

dotnet 型定義と node 型定義をインストールする。これで TypeScript 向けのインターフェイスが提供される。

npm install --save-dev @types/node @types/dotenv

次に、そのディレクトリ内に .env ファイルを作成する。

あとはインポートして利用するだけ。

import dotenv from "dotenv";

// env ファイルの中身を読み込む
const result = dotenv.config();

if (result.error) {
    throw result.error;
}

console.log(result.parsed);

console.log(process.env.DB_HOST);
console.log(process.env.WEB_HOST);

実行結果（読み取った設定ファイル）

{ DB_HOST: 'localhost', WEB_HOST: 'staging.adventure-works.com' }
localhost
staging.adventure-works.com

課題

最後に課題をやって Done

今回はちょっとファイルが多いので割愛。export と import をいい感じに宣言したり、ファイル間の関係がわかっていればそこまで難しくない。

イベントのお知らせ

2022年4月24日（日）に MS Tech Camp #14 を開催します。今回は私「たくのろじぃ」主催で、Blazor を使ったポートフォリオサイト製作と Azure Static Web Apps へのデプロイをやります。
興味がある方は（社会人、学生問わず）ぜひご参加ください！
Youtube での配信ですので、休日はごろごろしながらご覧いただければと思います。もちろん、一緒にやっていただいても結構です！

mspjp.connpass.com