ローカルに TypeScript の実行環境をサクッと構築する手順
![ローカルに TypeScript の実行環境をサクッと構築する手順](/_next/image?url=https%3A%2F%2Ft-cr.jp%2Fassets%2Fimg%2Fpost%2Fthumb%2Ftypescript.jpg&w=3840&q=75)
ローカルに 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
というプロジェクトディレクトリを作成します。
zsh$ mkdir ~/typescript-sample
プロジェクトディレクトリへ移動
作成した~/typescript-sample ディレクトリへ移動します。
zsh$ mkdir ~/typescript-sample
yarn を初期化をして package.json を作成
yarn でプロジェクトの初期化を行います。
npm で実施する方は必要に応じて変更してください。
zsh$ 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
をまとめてインストールします。
zsh$ 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
を開きインストールされたパッケージを確認します。
json "devDependencies": {
"@types/node": "^15.12.5",
"ts-node": "^10.0.0",
"typescript": "^4.3.4"
}
設定ファイルを作成
tsconfig.json を作成
プロジェクトルートへ tsconfig.json を作成します。
zsh$ vi .eslintrc.js
tsconfig.json の設定例
フロントエンド
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
}
バックエンド
json// 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
ディレクトリを作成します。
zsh$ mkdir src
実行させるファイルを作成
作成したソースディレクトリへ index.ts を追加します。
zsh$ vi src/index.ts
src/index.ts
適当にログを出力するファイルを作成しました。
typescript// src/index.ts
const message: string = "Hello, world!";
console.log(message)
アプリケーションの起動
アプリケーションを起動させていきます。
npm scripts へ起動コマンドの追加
実行するコマンドを追記します。
package.json
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
コマンドを実行します。
zsh$ yarn dev
yarn run v1.22.10
$ ts-node src/index.ts
Hello, world!
✨ Done in 4.24s.
build
yarn build
コマンドを実行します。
zsh $ yarn build
yarn run v1.22.10
$ tsc
✨ Done in 7.13s.
dist
ディレクトリを確認するとビルドしたファイルが再生されています。
zsh$ ls dist
index.js index.js.map
start
yarn start
コマンドを実行します。
zsh$ yarn start
yarn run v1.22.10
$ node dist/index.js
Hello, world!
✨ Done in 0.26s.
正常に実行することができました。
その他
Typescript × ESLint
ESLinst の設定はこちらの記事を参考にしてください。
記事Article
もっと見る- article
Dockerの利用していないゴミを掃除しディスクスペースを解放するいくつかのやり方を紹介
- article
Next.js のバンドルサイズを可視化する@next/bundle-analyzer の紹介
- article
VSCodeでTypescriptファイルのimport補完で相対パスではなくエイリアスするための設定
- article
UUIDより短いユニークなIDを生成できるnpmライブラリnanoidの使い方
- article
【解決方法】TypeScript発生したTS2564 エラーの対処
- article
express で IP を取得する際などに利用する req.connection 非推奨(deprecated)の対処