ローカルに TypeScript の実行環境をサクッと構築する手順をメモしました。

TypeScript

TypeScript とは？

TypeScript とは、「AltJS」の一つマイクロソフトが開発・提供しているオープンソースのプログラミング言語になります。

TypeScript の特徴

TypeScript の特徴はさまざまあります。

• JavaScript のスーパーセット（上方互換）
• JavaScript の最新仕様である、"ES20XX" の構文仕様が利用可能
• 型定義が利用可能
• インターフェース、クラスが利用可能
• null/undefined safe が可能
• 型定義ファイルがあれば外部ライブラリも型を利用可能
• ジェネリックが利用可能
• エディタによる入力補完が強力。(Visual Studio Code など対応しているエディタ)

AltJS (Alternative JavaScript) とは?

AAltJS とは、コンパイルすることで JavaScript が生成されるプログラミング言語です。 TypeScript の他に CoffeeScript などがあります。

TypeScript 公式サイト

TypeScript: JavaScript With Syntax For Types.

環境

• Mac OS Big SUR 11.3.1
• yarn 1.22.10
• Node 14.15.3

ファイル操作で利用する Unix コマンドについて

基本的なディレクトリ作成やファイル操作は Unix コマンドを利用します。
Unix コマンドについて詳しくはこちらの記事を参考にしてください。

事前準備

Node.js 環境が必要

事前準備として Node.js が利用できる環境で実施します。
Node.js の環境の構築について詳しくはこちらの記事を参考にしてください。

yarn コマンドのインストール

事前準備として Yarn が利用できる環境で実施します。
Yarn コマンドのインストールについて詳しくはこちらの記事を参考にしてください。

プロジェクトの作成

プロジェクトディレクトリを作成

~/typescript-sampleというプロジェクトディレクトリを作成します。

zshCopy code$ mkdir ~/typescript-sample

プロジェクトディレクトリへ移動

作成した~/typescript-sample ディレクトリへ移動します。

zshCopy code$ mkdir ~/typescript-sample

yarn を初期化をして package.json を作成

yarn でプロジェクトの初期化を行います。
npm で実施する方は必要に応じて変更してください。

zshCopy code$ yarn init -y
yarn init v1.22.10
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.08s.

必要なパッケージのインストール

必要なパッケージ

• typescript
• @types/node
• ts-node

typescript

typescript のライブラリファイルになります。

@types/node

Node.js の型定義ファイルが含まれています。

ts-node

TypeScript の.tsファイルを直接指定して実行することのできるモジュールになります。

パッケージのインストール

yarn addコマンドでtypescriptと ts-node と @types/nodeをまとめてインストールします。

zshCopy code$ yarn add -D typescript ts-node @types/node
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
├─ @types/node@15.12.5
└─ typescript@4.3.4
info All dependencies
├─ @types/node@15.12.5
└─ typescript@4.3.4
✨  Done in 4.08s.

インストールしたパッケージを確認

package.json を開きインストールされたパッケージを確認します。

jsonCopy code  "devDependencies": {
    "@types/node": "^15.12.5",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.4"
  }

設定ファイルを作成

tsconfig.json を作成

プロジェクトルートへ tsconfig.json を作成します。

zshCopy code$ vi .eslintrc.js

tsconfig.json の設定例

フロントエンド

jsonCopy code// tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "lib": [
      "es2020",
      "dom"
    ],
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "src",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ],
  "compileOnSave": false
}

バックエンド

jsonCopy code// tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "lib": [
      "es2020"
    ],
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "src",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ],
  "compileOnSave": false
}

ts-config のオプションはこちらの記事を参考にしてください

TypeScript（*.ts）ファイルの作成

実行するための TypeScript（*.ts）ファイルを作成します。

ソースディレクトリの作成

プロジェクトルートへsrcディレクトリを作成します。

zshCopy code$ mkdir src

実行させるファイルを作成

作成したソースディレクトリへ index.ts を追加します。

zshCopy code$ vi src/index.ts

src/index.ts

適当にログを出力するファイルを作成しました。

typescriptCopy code// src/index.ts
const message: string = "Hello, world!";
console.log(message)

アプリケーションの起動

アプリケーションを起動させていきます。

npm scripts へ起動コマンドの追加

実行するコマンドを追記します。

package.json

jsonCopy code// package.json
  "scripts": {
    "start": "node dist/index.js",
    "build": "tsc",
    "dev": "ts-node src/index.ts"
  },

dev

開発用のコマンドで ts-node で src/index.ts を実行します。

build

ビルドコマンドで tsconfig の設定に記載した形でソースをビルドします。

start

ビルドしたファイルを実行します。

コマンド実行

dev

yarn devコマンドを実行します。

zshCopy code$ yarn dev
yarn run v1.22.10
$ ts-node src/index.ts
Hello, world!
✨  Done in 4.24s.

build

yarn buildコマンドを実行します。

zshCopy code $ yarn build
yarn run v1.22.10
$ tsc
✨  Done in 7.13s.

distディレクトリを確認するとビルドしたファイルが再生されています。

zshCopy code$ ls dist
index.js     index.js.map

start

yarn startコマンドを実行します。

zshCopy code$ yarn start
yarn run v1.22.10
$ node dist/index.js
Hello, world!
✨  Done in 0.26s.

正常に実行することができました。

その他

Typescript × ESLint

ESLinst の設定はこちらの記事を参考にしてください。