Chapter 8: Tooling and Build

1. Advanced tsconfig.json

Beyond basic configuration — master key options that affect project structure and compilation behavior.

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "lib": ["ES2022"],
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "incremental": true,
    "tsBuildInfoFile": "./dist/.tsbuildinfo",

    "paths": {
      "@/*": ["./src/*"],
      "@utils/*": ["./src/utils/*"]
    },
    "baseUrl": ".",

    "exactOptionalPropertyTypes": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2. ESLint

ESLint with typescript-eslint catches potential issues during coding. The new Flat Config format is recommended.

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

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

export default tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    {
        rules: {
            "@typescript-eslint/no-unused-vars": ["error", {
                argsIgnorePattern: "^_",
            }],
            "@typescript-eslint/explicit-function-return-type": "warn",
            "@typescript-eslint/no-explicit-any": "error",
            "no-console": ["warn", { allow: ["warn", "error"] }],
        },
    },
    {
        ignores: ["dist/", "node_modules/"],
    }
);

npx eslint .          # 检查所有文件
npx eslint --fix .    # 自动修复可修复的问题

3. Prettier

Prettier handles code formatting — unified style, ending pointless formatting debates.

npm install -D prettier eslint-config-prettier

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 4,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always"
}

Add eslint-config-prettier to ESLint config to disable rules that conflict with Prettier:

// eslint.config.js 中追加
import prettier from "eslint-config-prettier";

export default tseslint.config(
    // ...其他配置
    prettier, // 放在最后，覆盖冲突规则
);

Set up Format on Save in your editor for automatic formatting on save.

4. Build Tool Comparison

5. npm Package Publishing

When publishing TypeScript packages, you need to provide both compiled JS and type declaration files.

// package.json 关键字段
{
  "name": "my-ts-lib",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "files": ["dist"],
  "scripts": {
    "build": "tsc",
    "prepublishOnly": "npm run build"
  }
}

npm login
npm publish     # 发布到 npm registry

The files field specifies files to include in the package — more intuitive than .npmignore, whitelist over blacklist.

6. Docker Deployment

Multi-stage build: first stage compiles TypeScript, second stage only keeps runtime JS files, significantly reducing image size.

# Dockerfile
# ===== 构建阶段 =====
FROM node:20-alpine AS builder
WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY tsconfig.json ./
COPY src/ ./src/
RUN npm run build

# ===== 生产阶段 =====
FROM node:20-alpine AS production
WORKDIR /app

COPY package*.json ./
RUN npm ci --omit=dev

COPY --from=builder /app/dist ./dist

ENV NODE_ENV=production
EXPOSE 3000

USER node
CMD ["node", "dist/index.js"]

# 构建并运行
docker build -t my-ts-app .
docker run -p 3000:3000 --env-file .env my-ts-app

📝 Chapter Summary & Tutorial Complete