Development environment setup and toolchain

TypeScript, as a superset of JavaScript, provides type safety and better tooling support for large-scale projects. Setting up an efficient development environment and configuring the toolchain are critical steps for project success, involving multiple aspects such as editor selection, build tool integration, and debugging configuration.

Basic Development Environment Configuration

Installing Node.js is the first step, as it is a prerequisite for running the TypeScript compiler. It is recommended to use nvm to manage multiple Node.js versions:

nvm install 18
nvm use 18

After globally installing the TypeScript compiler, you can use the tsc command:

npm install -g typescript

Create a tsconfig.json file to control compilation behavior. This is the core configuration file for TypeScript projects:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Editor and IDE Selection

VS Code is the preferred editor for TypeScript development. The following key plugins should be installed:

• TypeScript Vue Plugin (Volar): Support for Vue projects
• ESLint: Code quality checks
• Prettier: Code formatting

Configure workspace settings to enable auto-formatting on save:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

For large projects, WebStorm offers more powerful refactoring tools. Its built-in TypeScript support includes:

• Intelligent type inference
• Safe renaming operations
• Precise import suggestions

Build Tool Integration

Modern frontend projects typically require bundling tools. For example, to create a TypeScript project with Vite:

npm create vite@latest my-app -- --template vanilla-ts

Configure vite.config.ts to add special handling:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    target: 'esnext',
    minify: false
  }
})

Webpack configuration requires adding ts-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
}

Code Quality Toolchain

A complete toolchain should include the following components:

1. ESLint configuration example:

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ]
}

2. Prettier configuration (.prettierrc):

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

3. Add validation scripts to package.json:

{
  "scripts": {
    "lint": "eslint src --ext .ts,.tsx",
    "format": "prettier --write src/**/*.ts"
  }
}

Debugging Configuration

VS Code debugging configuration (launch.json):

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TS",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

Chrome debugging requires sourcemap support. Enable it in tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

Testing Tool Integration

Jest configuration example (jest.config.js):

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleFileExtensions: ['ts', 'js'],
  transform: {
    '^.+\\.ts$': 'ts-jest'
  }
}

Example test case:

// math.test.ts
import { add } from './math'

describe('math functions', () => {
  it('should add two numbers', () => {
    expect(add(1, 2)).toBe(3)
  })
})

Advanced Toolchain Configuration

For monorepo projects, Turborepo is recommended:

npm install turbo --global

Project structure configuration (turbo.json):

{
  "pipeline": {
    "build": {
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"]
    }
  }
}

Custom compiler plugin example:

import ts from 'typescript'

const transformer: ts.TransformerFactory<ts.SourceFile> = context => {
  return sourceFile => {
    const visitor = (node: ts.Node): ts.Node => {
      // Custom transformation logic
      return ts.visitEachChild(node, visitor, context)
    }
    return ts.visitNode(sourceFile, visitor)
  }
}

Continuous Integration Configuration

GitHub Actions example (.github/workflows/ci.yml):

name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - run: npm test

Performance Optimization Tips

1. Incremental compilation configuration:

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./.tsbuildinfo"
  }
}

2. Project reference configuration (tsconfig.json):

{
  "references": [
    { "path": "../core" },
    { "path": "../utils" }
  ]
}

3. Use tsc-alias to handle path aliases:

npm install --save-dev tsc-alias

Add to the build script:

{
  "scripts": {
    "build": "tsc && tsc-alias"
  }
}