こんにちは、プロクラスの國府です。
今回は、javascriptをある程度知っている前提で、typescriptとはどういったものか説明していきたいと思います。
1. TypeScriptとは（JSとの違い）
Typescript(以下TSと呼ぶ）は、Javascript（以下JSと呼ぶ）の上位互換でjavascriptに機能をプラスした言語になります。プラスされる機能は、型システムです。
簡単なソースを書いて説明すると
JS
let name = “tarou”;
name = 123
TS
let name: string = “tarou”
name = 123 // コンパイルエラーになる
JSの場合は、変数は実行時に解釈されて, 同じ変数nameに、string型のtarou や int型の
123を代入することができます。
対してTSの場合は、nameをstring型の変数として用意しているので、int型の123を代入すると、コンパイルエラーになります。
2. TypeScriptの実行の仕組み
TSのソースファイルは、コンパイルすることでJSのソースファイルに変換されます。
イメージ
TS
↓
TSC
↓
JS
TSCとは、
「TypeScript Compiler」の略で、Microsoftが提供する公式のTypeScriptコンパイラ（トランスパイラ）です。.tsファイルをNode.jsなどで動作する.jsファイルへ変換し、同時に型チェックを実行するツールです。主にnpm経由でインストールされ、コマンドラインでtscコマンドとして実行します
TSCでコンパイルするさいに,事前にtsconfigファイルを作成する必要があります。
このファイルに、コンパイル後のJSのバージョン、コンパイル対象ファイル、厳格な型チェックのルールなどの、コンパイルする際の情報を記述しておきます。
3. TypeScriptの環境構築
mac osのターミナルを使って、node(npm)が入っている前提で環境構築を説明します。
% node -v
v24.12.0
nodeが入っていることを確認しています。
% mkdir ts_prj; cd ts_prj
TS用環境のプロジェクトディレクトリを作成し、そのディレクトリの中に移動します。
ts_prj % npm install typescript
プロジェクト用のtypescriptを、ローカルインストールします。
ts_prj % npm list | grep typescript
└── typescript@5.9.3
インストールされたか確認しています。(最新はv5.9.3のようです）
ts_prj % npx tsc –init
コンパイラTSCに必要なtsconfigファイルを作成します。
npxは、「ts_prj % npm install typescript』のところで、
typescriptをローカルインストールしているので、tscのパスがありません。
そのパスを補完してくれるのが,npxだと思ってください。
これで、TSをコンパイルする環境が整いました。
TSファイルをコンパイルして実行してみよう
ts_prj % vi test.ts
test.ts ファイルの内容
function hoge(): void {
let name: string = “tarou”
console.log(“name”, name)
name = 123
console.log(“name”, name)
}
hoge()
TSのファイルの拡張子は.tsです。
関数hoge（引数なし、返り値なし）を作成します。
関数の本体で、string型の変数nameにtarou文字列を代入しています
string型の変数nameに、123 int型を代入しています（コンパイルエラーになる）
ts_prj % npx tsc test.ts
test.ts:4:2 – error TS2322: Type ‘number’ is not assignable to type ‘string’.
4 name = 123
~~~~
Found 1 error in test.ts:4
TSCコンパイラを使って、先程作成したtest.tsファイルをコンパイルします。
エラーになりました。「型numberを型stringに代入不可能です」と怒られました。
test.ts ファイルを下記のように変えます。
function hoge() {
let name: string = “tarou”
console.log(“name”, name)
let length: number = 123
console.log(“length”, length)
}
hoge()
コンパイルして実行してみましょう。
ts_prj % npx tsc test.ts
エラーなく、コンパイルできました。コンパイルが成功すると、下記のようにtest.tsファイルがある場所に、test.jsが作成されます。
ts_prj % ls -l
total 40
drwxr-xr-x@ 5 bluefog-solution staff 160 3 16 13:04 node_modules
-rw-r–r–@ 1 bluefog-solution staff 602 3 16 13:04 package-lock.json
-rw-r–r–@ 1 bluefog-solution staff 55 3 16 13:04 package.json
-rwxr-xr-x@ 1 bluefog-solution staff 140 3 16 14:58 test.js
-rw-r–r– 1 bluefog-solution staff 140 3 16 14:53 test.ts
-rw-r–r–@ 1 bluefog-solution staff 1120 3 16 13:07 tsconfig.json
test.jsを実行してみましょう。
ts_prj % node test.js
name tarou
length 123
このようにTSでは、JSと違い型を定義することで誤ったデータを代入したりすることができなくなっています。このようなtypescriptのようなプログラミング言語を、静的型付け言語と呼びます。対してjavascriptのような型を定義しない言語、動的型づけ言語と呼びます。
次回のブログでは、型についてやTypescriptの特徴をもう少し深く掘り下げていきたいと思います。