ローカルに TypeScript の実行環境をサクッと構築する手順

TypeScriptNode.jsyarnnpm環境構築
ローカルに TypeScript の実行環境をサクッと構築する手順
Memo

ローカルに 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 コマンドについて詳しくはこちらの記事を参考にしてください。

事前準備

Node.js 環境が必要

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

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

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

プロジェクトの作成

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

~/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コマンドでtypescriptts-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(*.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 の設定はこちらの記事を参考にしてください。

終わりに

最後までご覧いただきありがとうございます。
この記事ではローカルに TypeScript の実行環境をサクッと構築する手順について紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。