ローカルに 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: Typed JavaScript at Any Scale.|/img/post/thumb/typescript.jpg

環境

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

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

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

【まとめ】よく使用するものだけを抜粋した Unix コマンドと Vim コマンドの一覧まとめ

t-cr.jp

事前準備

Node.js 環境が必要

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

Node.js のバージョン管理ツール nodenv をインストールして Node.js 環境をサクッと構築する

t-cr.jp

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

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

Node.js のパッケージ管理ツールの Yarn をサクッとインストールする手順

t-cr.jp

プロジェクトの作成

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

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

terminal
$ mkdir ~/typescript-sample

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

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

terminal
$ mkdir ~/typescript-sample

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

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

terminal
$ 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をまとめてインストールします。

terminal
$ 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 を開きインストールされたパッケージを確認します。

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

設定ファイルを作成

tsconfig.json を作成

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

terminal
$ vi .eslintrc.js

tsconfig.json の設定例

フロントエンド

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
}

バックエンド

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 の tsconfig.json オプションのまとめ

t-cr.jp

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

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

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

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

terminal
$ mkdir src

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

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

terminal
$ vi src/index.ts

src/index.ts

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

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

アプリケーションの起動

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

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

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

package.json

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コマンドを実行します。

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

build

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

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

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

terminal
$ ls dist
index.js     index.js.map

start

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

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

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

その他

Typescript × ESLint

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

Next.js の TypeScript プロジェクトへ eslint、stylelint、prittier を導入して VSCode で自動フォーマットするまでの手順

t-cr.jp