今回はtypescriptの環境構築について解説をします。
環境構築をする前にtypescriptとは簡単にまとめると以下のようなものです。
・JavaScriptに対して静的型付けをサポートしている言語
・実行前にビルドしてJavaScriptに変換され、コードの不整合等がチェックされるので、プログラムの実行前にバグを潰すことができる
ここ最近は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でも今回の記事について解説をしているので
よかったら参考にしてください!