typescriptの環境構築について解説

今回はtypescriptの環境構築について解説をします。

環境構築をする前にtypescriptとは簡単にまとめると以下のようなものです。

ここ最近はtypescriptを取り入れている企業は多いので

この機会にまずは、いつでも勉強できる環境を構築しましょう！

Node.jsのインストール

最初にNode.jsのインストールを行いましょう。

typescriptを動作させるためにはnode.jsを使用するので

node.jsをインストールする必要があります。

バージョンはv16.13.0を使用します。

もしNode.jsをインストールされてない人は

以下の記事が参考になると思うので

インストールをしておきましょう。

https://codelikes.com/mac-node-install/

引用：コードライク

typescript環境構築用ディレクトリの作成

次にtypescriptをインストールする場所を

作っていきましょう。

基本的にはどこでも大丈夫ですが

わたしは

/Users/naoki/Documents/MyPortforio/typescript配下に作成します。

 command
mkdir typescript-practice
cd typescript-practice

package.jsonの作成

packege.jsonはnode.jsのプロジェクトに必ず存在するファイルで

プロジェクトの依存関係を記録するのが主な機能です。

以下のコマンドを入力しましょう。

 ターミナル
npm init --yes

–yesをつけることで全てデフォルト値となります。

この時点で作成できたら先ほど実行したディレクトリ上で

以下のコマンドを入力しましょう。

 ターミナル
code . 

そうするとvscodeが立ち上がるので

package.jsonを開き以下を追記します。

 package.json
"main": "index.js",
"type": "module",

編集が完了したらターミナルでtypescriptをインストールしましょう。

 ターミナル
npm install --save-dev typescript @types/node

その後にディレクトリを見ると色々なフォルダが作成されています。
package.jsonを見ると今回インストールしたtypescriptがインストールされています。

tsconfigの準備

tsconfigはtypescriptコンパイラに対する設定を記述したファイルです。

ターミナルでtsconfigを作成しましょう。

 ターミナル
npx tsc --init

vscodeに戻るとtsconfig.jsonが作成されているので

こちらのファイルを開いて以下の箇所を変更してください。

 tsconfig.json
"target": "es2016" → "target": "es2020" 
"module": "commonjs" → "module": "esnext" 
//"moduleResolution" : "node" → "moduleResolution" : "node"
//"outDir" : "./" → "outDir" : "./dist"

これでtsconfigの設定は完了です。

サンプルプログラム

最後に試しにtypescriptプログラムを書いてコンパイルしてみましょう。

プロジェクトディレクトリにsrcというディレクトリを作り

その中にindex.tsを作成してください。

そしてindex.tsに以下の内容を追記してください。

 index.ts
const test: string = "Hello";
console.log(test);

保存したらターミナル上で以下のコマンドを入力しましょう。

 ターミナル
npx tsc

このコマンドを入力するとプロジェクトディレクトリのdistフォルダの中に

index.jsが作成されています。

中身を見ると以下のようになっていると思います。

 index.js
"use strict";
const test = "Hello";
console.log(message);

これでコンパイルが完了しました。

試しにターミナル上でこのjsファイルを実行すると

Helloが出力されるはずです。

 ターミナル
node dist/index.js

これでtypescriptの環境構築が完了です！

まとめ

今回はtypescriptの環境構築について解説をしました。

環境構築は現役のエンジニアでも詰まることがあるので

もし忘れてしまったという人はこの記事を見返していただけると

嬉しいです。

最後までみていただきありがとうございました。

Youtubeでも今回の記事について解説をしているので

よかったら参考にしてください！