LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@k-yaina60

TypeScript環境を構築する

Posted at

概要

TypeScript環境の構築方法を記事にまとめました。
この記事ではHello World!!を出力するプログラムを作り、順番に以下の機能を設定していきます。

  • ESLint (リンター)
  • Prettier (フォーマッター)
  • Jest (テスト)

準備

Node.jsをインストールします。
この記事ではv22.17.1を使っています。

TypeScriptのインストール

まずは空のプロジェクトを作ります。

mkdir my-ts-project
cd my-ts-project

プロジェクトの設定を管理するpackage.jsonを作ります。
-yオプションを付けると設定項目をデフォルト値で構成します。

npm init -y

必要なパッケージをインストールします。
TypeScript関係のパッケージは開発時のみ必要なので、-Dオプションをつけます。

npm install -D typescript ts-node

インストールしたパッケージについての説明は以下の通りです。

  • typescript
    TypeScriptのトランスパイラです。tsファイルをjsファイルに変換します。
  • ts-node
    Node.js環境でTypeScriptのコードを直接実行するツールです。
    開発時に毎回ts→jsと変換してから実行するのは手間なので、ts-nodeを使って変換処理を省略します。

インストール後、トランスパイラの設定ファイルであるtsconfig.jsonを追加します。

tsconfig.json
{
  "compilerOptions": {
    "target": "es2022",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

各項目についての説明は以下の通りです。

tsconfig.jsonの設定項目
項目 説明
"target": "es2022" ES2022のJavaScriptコードを生成する
"module": "commonjs" CommonJS形式でモジュールを出力する
"rootDir": "./src" ソースファイルのルートディレクトリを./srcに設定する
"outDir": "./dist" JavaScriptのソースを./distに出力する
"esModuleInterop": true CommonJSモジュールをESモジュール形式でインポートする
"forceConsistentCasingInFileNames": true ファイルの大文字と小文字を区別する
"strict": true TypeScriptの厳格な型チェックを有効にする
"skipLibCheck": true 型定義ファイルのチェックをスキップする
"include": ["src"] トランスパイル対象のフォルダを指定する
"exclude": ["node_modules", "dist", "**/*.test.ts"] トランスパイル対象外のパターンを指定する

package.jsonに実行スクリプトを追加します。
tsファイルの実行とJavaScriptへの変換の2つの実行コマンドを追加しています。

package.json
{
  ..
  "scripts": {
+   "dev": "ts-node src/main.ts",
+   "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
  ..
}

TypeScriptのソースコードを追加します。

src/main.ts
console.log("Hello World!!");

実行

npm run dev

以下の様な結果が出力され、main.tsが実行されたことが確認できます。

> my-ts-project@1.0.0 dev
> ts-node src/main.ts

Hello World!!

ビルド

npm run build

プロジェクトフォルダ直下にdist/main.jsが作成されます。

> my-ts-project@1.0.0 build
> tsc

nodeコマンドでjsファイルを実行できます。

node ./dist/main.js 
Hello World!!

ESLintの設定

必要なパッケージをインストールします。

npm install -D eslint @eslint/js eslint-config-prettier typescript-eslint

インストールしたパッケージについての説明は以下の通りです。

  • eslint
    JavaScriptの静的解析ツールです。
    ESLint単体ではTypeScriptを解析できないので、追加でプラグインをインストールします。
  • @eslint/js
    ESLint公式のルールセットです。
  • eslint-config-prettier
    ESLintとPrettierを併用する際にルールの競合を防ぐためにインストールします。
  • typescript-eslint
    以下のパッケージがインストールされます。
    • @typescript-eslint/parser
      ESLintがTypeScriptのソースを構文解析できるようになります。
    • @typescript-eslint/eslint-plugin
      TypeScript固有のルールを追加します。

ESLintの設定ファイルであるeslint.config.mjsを追加します。
プロジェクトフォルダ直下のdistフォルダやnode_modulesは解析対象外なので
ignoresに追加します。

eslint.config.mjs
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import prettier from "eslint-config-prettier";

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  prettier,
  {
    ignores: ["dist/**", "node_modules/**"],
  },
];

この設定ファイルは、後ろの設定が前の設定を上書きするという仕組みのため
以下の順番で並んでいます。

  • JavaScriptの基本ルール (js.configs.recommended)
  • TypeScriptの独自ルール (tseslint.configs.recommended)
    ※tseslint.configs.recommendedは配列なので、スプレット構文(...)で中身を展開する
  • フォーマット系ルールの無効化 (prettier)
  • 除外対象 (ignores)

package.jsonにESLintの実行コマンドを追加します

package.json
{
  ..
  "scripts": {
　  "dev": "ts-node src/main.ts",
　  "build": "tsc",
+   "lint": "eslint",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
  ..
}

ESLintが動作することを確認するため、main.tsに変数xを追加します。

src/main.ts
const x = 1;
console.log("Hello World!!");

ESLintを実行します。

npm run lint

未使用の変数があるので、以下の様にエラーが出力されます。

> my-ts-project@1.0.0 lint
> eslint


C:\my-ts-project\src\main.ts
  1:7  error  'x' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (1 error, 0 warnings)

Prettierの設定

必要なパッケージをインストールします。

npm install -D prettier

インストールしたパッケージについての説明は以下の通りです。

  • prettier
    様々な言語に対応しているコードフォーマッターです。
    ESLintとは異なり、Prettierは単体でTypeScriptのコードを解析できます。

Prettierの設定ファイルである.prettierrcを追加します。

.prettierrc
{
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "always"
}

各項目についての説明は以下の通りです。

項目 説明
"tabWidth": 2 インデントのスペース幅は2
"printWidth": 80 1行は最大で80文字まで
"singleQuote": true シングルクォーテーションを使う
"semi": true 文末にセミコロンを付ける
"bracketSpacing": true オブジェクトの中括弧前後にスペースを入れる
例:{ foo: "bar" }
"arrowParens": "always" アロー関数の引数括弧を付ける

package.jsonにPrettierの実行コマンドを追加します。
Prettierはデフォルトでは上書きを行わず、標準出力にフォーマット後のコードを出力します。
ファイルを上書きするには--writeオプションを指定します。

package.json
{
  ..
  "scripts": {
　  "dev": "ts-node src/main.ts",
　  "build": "tsc",
    "lint": "eslint",
+   "format": "prettier --write src",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
  ..
}

Prettierの動作を確認するために、main.tsに不要な空白や改行を加えます。

src/main.ts
console.log ( "Hello World!!"    )

Prettierを実行します。

npm run format

main.tsを再度開くと、コードがフォーマットされていることが確認できます。

src/main.ts
console.log("Hello World!!");

Jestの設定

必要なパッケージをインストールします。

npm install -D jest ts-jest @types/jest

インストールしたパッケージについての説明は以下の通りです。

  • jest
    JavaScriptのテストを実行するためのフレームワークです。
    Jestも単体ではTypeScriptのコードを実行できないので、追加で以下のパッケージをインストールします。
  • ts-jest
    JestでTypeScriptのコードを実行するためのトランスパイラです。
  • @types/jest
    TypeScriptでJestの関数を呼び出すのに必要なパッケージです。

Jestの設定ファイルであるjest.config.tsを作成します。

jest.config.ts
import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/*.test.ts']
};

export default config;

各項目についての説明は以下の通りです。

項目 説明
preset: 'ts-jest' TypeScriptのテストファイルをts-jestで変換してテストできるようにする
testEnvironment: 'node' テスト実行時の仮想環境をNode.jsに設定する
testMatch: ['**/*.test.ts'] テストファイルのパターンを設定する

package.jsonにJestの実行コマンドを追加します。

package.json
{
  ..
  "scripts": {
　  "dev": "ts-node src/main.ts",
　  "build": "tsc",
    "lint": "eslint",
    "format": "prettier --write src",
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "jest"
  }
  ..
}

Jestの動作を確認するために以下の関数を追加します。
2つの文字列を結合するだけのシンプルな関数です。

src/string.ts
export const concat = (s1: string, s2: string): string => {
  return s1 + s2;
};

concat関数のテストを追加します。
string.tsの同階層にstring.test.tsファイルを作成して、以下の様なテストコードを追加します。

src/string.test.ts
import { concat } from "./string";

describe("concat", () => {
  test("Return concatnated string", () => {
    expect(concat("ABC", "DEF")).toEqual("ABCDEF");
  });
});

Jestを実行します。

npm run test

テストが通ることを確認できました。

> my-ts-project@1.0.0 test
> jest

 PASS  src/string.test.ts
  concat
    √ Return concatnated string (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.001 s
Ran all test suites.

以上で設定は全て完了です。

参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?