第4章 TypeScriptコードを書いてみる
TypeScriptでコードを書いてコンパイルする
それでは簡単なTypeScriptのコードを書いてtscでコンパイルしてみましょう。
main.tsというファイルを作り、中身のコードを次のように書きます。Tom (16)と出力することを想定した簡単なコードです。
function getProf(name: string, age: number): string {
return `${name} (${age})`;
}
console.log(getProf('Tom', 16));
このTypeScriptのコードをJavaScriptにコンパイルします。次のコマンドを実行します。
npx tsc main.ts
TypeScriptをグローバルにインストールした場合は、npx tscはtscと短く書けます。
tsc main.ts
コマンドを実行するとmain.jsというファイルが出力されます。
function getProf(name, age) {
return "".concat(name, " (").concat(age, ")");
}
console.log(getProf('Tom', 16));
コンパイルしてできたJavaScriptのコードを実行する
出力されたファイルを、Node.jsで実行してみましょう。次のコマンドを実行します。
node main.js
Tom (16)
Tom (16)と出力されました。通常のJavaScriptになっていることが確認できました。
第5章 tsconfig.jsonを設定する
tsconfig.jsonの作成
TypeScriptの設定ファイルtsconfig.jsonをプロジェクトのルート（tscを実行するフォルダー）に作成すると、tscの挙動をコントロールできます。
tsconfig.jsonは、次のコマンドで作成できます。以降、TypeScriptをグローバルにインストールしている場合は、npx tscをtscに読み換えてください。
npx tsc --init
作成したtsconfig.jsonは、100行以上にわたる設定が書いてあります。そして、そのほとんどはコメントアウトされています。これは「こういう設定もある」というドキュメント的な記載です。設定の詳細は、TSConfig Referenceのページにまとまっています。
また、作成されるtsconfig.jsonには、コメントが書かれていますがVSCodeで開いてもエラーは表示されません。これはVSCodeがtsconfig.jsonというファイル名を特別なファイル（TypeScriptの設定ファイル）として認識しているからです。アイコンもTSという名前が付いたものになっています。
試しに、このtsconfig.jsonという名前を_tsconfig.jsonのように変えると、アイコンが変わってエラーが出ます。ただのJSONと認識されるためです。通常のJSONにはコメントを書くことができません。
tsconfig.jsonの読み解き
作成したtsconfig.jsonから、コメントアウトされていない部分を抜粋して掲載します。また説明の日本語訳も添えます。
{
"compilerOptions": {
/* Language and Environment */
"target": "es2016",
/* Set the JavaScript language version for emitted
JavaScript and include compatible library declarations. */
/* 出力されるJavaScriptのJavaScript言語バージョンを設定し、
互換性のあるライブラリ宣言を含めます。 */
/* Modules */
"module": "commonjs",
/* Specify what module code is generated. */
/* 生成されるモジュール コードを指定します。 */
/* Interop Constraints */
"forceConsistentCasingInFileNames": true,
/* Ensure that casing is correct in imports. */
/* インポート時に大文字と小文字が正しいことを確認します。 */
/* Type Checking */
"strict": true,
/* Enable all strict type-checking options. */
/* すべての厳密な型チェック オプションを有効にします。 */
/* Completeness */
"skipLibCheck": true
/* Skip type checking all .d.ts files. */
/* すべての .d.ts ファイルの型チェックをスキップします。 */
}
}
この中で、自分で変更する可能性があるのはtargetとmoduleでしょう。それぞれで選択できる内容を、TSConfig Referenceから抜粋します。
まずはtargeです。
targetについて
URL：https://www.typescriptlang.org/tsconfig/#target
デフォルト：ES5
設定可能：es3、es5、es6/es2015、es2016、es2017、es2018、es2019、es2020、es2021、es2022、es2023、es2024、esnext
設定可能な値にあるesnextは、特殊な値です。使用しているTypeScriptのバージョンがサポートする最高バージョンを指します。
この値を使うと、TypeScriptのバージョンを変更した際に、互換性の問題が発生する可能性があります。そのため利用には注意が必要です。
次はmoduleです。
module
URL：https://www.typescriptlang.org/tsconfig/#module
デフォルト：commonjs
設定可能：none、commonjs、amd、umd、system、es6/es2015、es2020、es2022、esnext、node16、node18、nodenext、preserve
Node.jsでrequireを使うならcommonjsを、importを使うならesnextを使うとよいでしょう。
また、コンパイル時に変換させず、元の状態を保持したい場合にはpreserveを利用します。preserveでは、インポートやエクスポートの形式が保持されます。
tsconfig.jsonで入力と出力を分ける
いくつかの設定を追加してみましょう。TypeScriptで書いたコードを保存するsrcフォルダーと、JavaScriptのコードを出力するdistフォルダーを分けてみます。
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
rootDirとoutDirの設定を追加しました。この設定に合わせて、ファイル構造を次のように変更します。
-
プロジェクトのルート
- dist/
- node_modules/
-
src/
- main.ts
- package-lock.json
- package.json
- tsconfig.json
この状態のプロジェクトのルートで、次のコマンドを実行します。
npx tsc
すると、srcフォルダー内の.tsファイルがコンパイルされて、distフォルダーの中に出力されます。作成されたファイルを見てみましょう。
"use strict";
function getProf(name, age) {
return `${name} (${age})`;
}
console.log(getProf('Tom', 16));
直接npx tsc main.jsと実行した時と、コードの形が変わっています。これは、targetの値などにより変換方法が変わったためです。こうしたコードに影響を与える設定は他にもあります。
tsconfig.jsonの最適な設定内容は、開発目的や開発時期によって異なります。最適な内容にするには、その都度最新の情報を調べる必要があります
