Typescript 環境構築

どうも、NIPPA です。

Typescript を少しずつ触っているのですが、環境構築方法を忘れやすいのでメモしておきます。

Typescript の型制限は、型がガチガチに決まっている言語を触っていた身としては嬉しいところです。

書く手間は少し増えますが、デバッグでの洗い出しが簡単だったりするので、個人的には好きです。

環境

• MacOS 10.15
• node 14.16.0

node は nodenv で環境を整えています。node の環境構築については、以下の参考にしてください。

1. npm の初期化

以下のコマンドで npm の初期化を行います。

npm init -y

を実行するとpackage.jsonが作成されます。内容は以下の通りです。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-node": "^9.1.1",
    "typescript": "^4.2.4"
  }
}

2. モジュールのインストール

Typescript に最低限必要なモジュールをインストールします。

今回は dev 環境でインストールするため、--save-dev オプションを使っています。

prod 環境でもインストールする場合は、--saveオプションをつけてください。

• ts-node
• typescript

# Dev環境のみ
npm install --save-dev ts-node typscritpt

# 本番環境
npm install --save-dev ts-node

3. Typescript の環境設定

以下のコマンドで、Typescript の環境の初期設定を行います。

npx tsc --init

message TS6071: Successfully created a tsconfig.json file.

生成されたtsconfig.jsonで Typescript の設定を行えます。

変数の詳細もファイル内にかかれています。

4. Typescript の実行

簡単は Typescript をtest.tsのファイル名で作成します。

const HellowWorld: string = "Hello World!";

console.log(HellowWorld);

コンソールにHello World!を出力するコードです。

Typescript を直接実行する場合は、

npx ts-node test.ts

で実行可能です。また Typescript を node.js は

npx tsc test.ts

で変換可能です。test.jsが生成されますので、

node test.js

で node.js を実行することができます。

感想

今回は Typescript の環境構築と hello world についてまとめました。

Typescript を使って、AWS CDK や Node.js でのバックエンドなどを作っていますが、

Front 側を typescript + React.js で作成してみたいと思います。

ではでは、また次回。