型をファイルの外へ渡す

01 / 06

型もファイルの外へ渡せる

JavaScript コースで、ファイルを役割ごとに分けて export と import でつないだのを覚えているかな。あの2つは型にもそのまま効くよ。

型は書くほど、同じものを何度も使うことになる。人を表す型を、データを作るファイルでも、表示するファイルでも使いたい。だったら1か所に書いて、みんなで取り寄せればいいよね。

02 / 06

`export type` で外に出す

出し方は値と同じだよ。type の前に export を足すだけ。

下のファイルは型ひとつしか持っていない。こういう「型を置くためのファイル」を作るのは、実際のアプリでもよくある形だ。

// hito.tsexport type Hito = {  namae: string;  toshi: number;};

03 / 06

`import type` で受け取る

受け取る側は import のうしろに type を足して書く。これで「これは型だけを持ってくる指定だ」と、読む人にも TypeScript にもはっきり伝わるよ。

あとは取り込んだ Hito を、自分のファイルに書いた型とまったく同じように使えばいい。

// main.tsimport type { Hito } from "./hito.js";const yui: Hito = {  namae: "ゆい",  toshi: 20,};console.log(yui);

実行結果

{ namae: "ゆい", toshi: 20 }

04 / 06

型として持ってきたものは、値には使えない

import type は型だけを持ってくる指定だから、値として使おうとすると止められる。下は値の tama を import type で取り込んでしまった例だよ。

言われているとおりで、直し方もそのまま。値がほしいときは type を付けずに import する。

// main.tsimport type { tama } from "./neko.js";console.log(tama.namae);

実行結果

型のエラー: 'import type' を使用してインポートされたため、'tama' は値として使用できません。

05 / 06

`import type` の行は消える

章1で「型は実行前に消える」と話したよね。import type の行も同じで、変換したあとには丸ごと残らない。

型を取り寄せるだけの行だから、実行するときには要らないんだ。だから import type と書いておくと、読む人にも「この行は動きに関係ない」と伝わるよ。

// 書いたものimport type { Hito } from "./hito.js";const yui: Hito = { namae: "ゆい" };console.log(yui.namae);// 変換したあとconst yui = { namae: "ゆい" };console.log(yui.namae);

06 / 06

型と値をいっしょに持ってくる

同じファイルから型も値もほしいときは、行を2つに分けて書くのがいちばん分かりやすいよ。片方が import type、もう片方がふだんの import だ。

読む人は行を見ただけで、どちらが実行に関わるか分かる。それじゃあ、型を渡してみよう。

// main.tsimport type { Neko } from "./neko.js";import { tama } from "./neko.js";const neko: Neko = tama;console.log(neko.namae);

実行結果

たま