Express+TypeScriptのプロジェクト作成
プロジェクトのディレクトリーを作成し、npmで初期化してpackage.jsonを作成します。
mkdir test-app
cd test-app
npm init -y必要なモジュールをnpmでインストールします。
npm install express
npm install --save-dev @types/express @types/jest @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier globals jest prettier ts-jest ts-node tsx typescripttsconfig.jsonを作成します。
npx tsc --initお好みでtsconfig.jsonの中身を書き換えてください。
下記は一例です。
コメントが入っている部分だけデフォルトから修正を加えました。
{
"compilerOptions": {
"rootDir": "src", // TSコンパイル前の「元ファイル(ソース)が入っているフォルダ」を指定
"outDir": "dist", // TSがコンパイル後のJSを出力するフォルダを指定（本番実行はここを使うのが基本）
"module": "NodeNext", // Node.jsのESMを使うための設定
"moduleResolution": "NodeNext", // ESMのパス解決ルールに合わせる
"target": "ES2020", // TypeScriptが生成するJavaScriptの構文レベル（お好みで）
"types": [],
"sourceMap": true,
"declaration": true,
"declarationMap": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"strict": true,
"jsx": "react-jsx",
"verbatimModuleSyntax": true,
"isolatedModules": true,
"noUncheckedSideEffectImports": true,
"moduleDetection": "force",
"skipLibCheck": true,
"esModuleInterop": true, // importとrequireの互換性をよくする
"forceConsistentCasingInFileNames": true // ファイル名の大文字/小文字の違いによるバグを防ぐ
},
"include": ["src"] // TSにこのフォルダだけを監視させる
}test-app（ルート）ディレクトリ配下にsrcディレクトリを作成し、その中にindex.tsファイルを作成します。
import Express, { type Application, type Request, type Response } from "express";
const app: Application = Express();
const PORT = 3000;
app.get('/', (req: Request, res: Response) => {
res.send('Hello, Express + TypeScript!');
});
app.listen(PORT, () => {
console.log(`Server running at <http://localhost>:${PORT}`);
});
package.jsonは以下のようになっています。
特に覚えておきたい点に関しては下記詳細に残しておきます。
詳細
"type": "module", // ESM（import/export方式）で扱うという設定
"scripts": {
"dev": "tsx watch src/index.ts", // TSXでESMのまま開発用実行（自動リロード）
"build": "tsc", // TypeScriptをコンパイルしてdist/に出力
"start": "node dist/index.js", // distの本番（コンパイル済みJS）をNodeで実行
"test": "jest", // Jestのテスト実行
"test:watch": "jest --watchAll", // テストしながら開発
"lint": "eslint 'src/**/*.{ts,js}'", // ESLintによる静的解析をsrc配下のTypeScript/JavaScriptファイルに適用
"format": "prettier --write ." // プロジェクト全体のファイルをPrettierルールでコード整形
},{
"name": "test-app",
"version": "1.0.0",
"type": "module",
"description": "",
"main": "index.js",
"scripts": {
"dev": "tsx watch src/index.ts",
"build": "tsc",
"start": "node dist/index.js",
"test": "jest",
"test:watch": "jest --watchAll",
"lint": "eslint 'src/**/*.{ts,js}'",
"format": "prettier --write ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^5.1.0"
},
"devDependencies": {
"@types/express": "^5.0.5",
"@types/jest": "^30.0.0",
"@types/node": "^24.10.1",
"@typescript-eslint/eslint-plugin": "^8.47.0",
"@typescript-eslint/parser": "^8.47.0",
"eslint": "^9.39.1",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"globals": "^16.5.0",
"jest": "^30.2.0",
"prettier": "^3.6.2",
"ts-jest": "^29.4.5",
"ts-node": "^10.9.2",
"tsx": "^4.20.6",
"typescript": "^5.9.3"
}
}下記コマンドでExpressを起動させます。
npm run dev
> fave-goods-exchange-app@1.0.0 dev
> tsx watch src/index.ts
Server running at <http://localhost:3000>上記のように「Server running at http://localhost:3000」という文字列が出たら、下記URLにアクセスして、サーバーが起動することを確認してください
http://localhost:3000/
localhost
eslint.config.jsは以下のようになっています。
npm run lintで「ESLintによる静的解析をsrc配下のTypeScript/JavaScriptファイルに適用」してくれます。
import tsParser from '@typescript-eslint/parser';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import eslintPluginPrettier from 'eslint-plugin-prettier';
import globals from 'globals';
export default [
{
files: ['**/*.ts', '**/*.tsx'],
languageOptions: {
parser: tsParser,
ecmaVersion: 'latest',
sourceType: 'module',
globals: {
...globals.node,
...globals.es2021,
...globals.jest,
},
},
plugins: {
'@typescript-eslint': tsPlugin,
prettier: eslintPluginPrettier,
},
rules: {
...tsPlugin.configs.recommended.rules,
'prettier/prettier': 'error',
},
},
];.prettierrc.jsonは以下のようになっています。
npm run formatで「プロジェクト全体のファイルをPrettierルールでコード整形」してくれます。
{
"semi": true,
"singleQuote": true,
"trailingComma": "all"
}参考：
コメント