何が起きたか?
- とあるTypescriptとJavascriptの混在環境で,JavascriptからTypescriptをインポートするコードを書いた.
- Typescriptがトランスパイルされて,Javascriptにされた後,JavascriptがTypescript(だったもの)のファイルをインポートする
- また,Typescriptは型定義のみのTypescriptのファイルをインポートしている.
要は以下のような感じ
型定義ファイル
Types.ts
export {HogeType};
interface HogeType {
x: number;
}
型定義をインポートして型を使う関数を書いたファイル
useType.ts
import {HogeType} from "Types"
export {getHogedData};
function getHogedData(): HogeType {
let hogeData: HogeType;
// do hoge
return hogeData;
}
型定義をインポートした関数を使うjavascriptのファイル
useGetHogedData.js
import {getHogedData} from "useType";
function useGetHogedData() {
const hoged = getHogedData();
}
さて,以上のコードはランタイムエラーとなる.
なぜか
Typescriptにおけるinterfaceやtypeはコンパイル時の型チェックのみに使用され,コンパイル後には無くなる.
単一のファイルに型のみを書くと**ファイルごと消える(?)**そして,無いファイルをインポートしようとしているファイルも消える(なぜかは不明)
よって,実行時にはTypes.js
とuseType.js
が消えて,useGetHogedData.js
はインポートエラーを吐いて終了する.
実は
以下の2つの書き方は結果が異なるようである.
interface1.ts
export {HogeType};
interface HogeType {
x: number;
}
interface2.ts
export interface HogeType {
x: number;
}
前者はファイル自体が生成されないが,後者はファイルだけ生成される(中身は'usestrict'
のみ)
よって後者だとちゃんとランタイムエラーは起きず,動く.
不思議だ....