Typescript chevron_right Tooling and Project Setup

Tooling and Project Setup

calendar_today schedule 2 min read

1. Welcome and Icebreaker:

Welcome! Today, let’s start with a quick question: What is your favorite tool or extension that boosts your productivity when coding?

2. Outline the Session:

Agenda:

  1. Understanding TypeScript project configuration (tsconfig.json).
  2. Exploring compiler options for safety and compatibility.
  3. Setting up linting and formatting tools (ESLint, Prettier).
  4. Integrating bundlers (Webpack, Parcel) and testing frameworks (Jest, Mocha).
  5. Debugging TypeScript code.
  6. Practice: Set up a complete TypeScript project with all these tools.

Learning Outcomes:

  • Configure and customize TypeScript projects for different needs.
  • Apply linting, formatting, and testing tools for code quality.
  • Debug and maintain TypeScript codebases efficiently.

Expectations: Ask questions and share your experiences with tooling!

3. Concept Explanation:

A well-structured TypeScript project relies on proper tooling. The tsconfig.json file configures the TypeScript compiler, controlling strictness, target output, and module system. Linting (ESLint) and formatting (Prettier) enforce code quality and consistency. Bundlers like Webpack or Parcel package your code for deployment, while testing frameworks (Jest, Mocha) ensure reliability. Debugging tools help you trace and fix issues efficiently.

  • tsconfig.json: Central config for TypeScript. Key options: strict, noImplicitAny, target, module.
  • ESLint & Prettier: Lint and format code automatically.
  • Bundlers: Combine code and assets for the browser or Node.js.
  • Testing: Unit and integration tests catch bugs early.
  • Debugging: Use editor integrations and source maps for effective debugging.

4. Live Coding Demonstration:

Let’s set up a TypeScript project with all essential tooling:

# 1. Initialize project
mkdir my-ts-project && cd my-ts-project
npm init -y

# 2. Install TypeScript and create config
npm install --save-dev typescript
npx tsc --init

# 3. Install ESLint and Prettier
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier

# 4. Install a bundler (Webpack example)
npm install --save-dev webpack webpack-cli ts-loader

# 5. Install Jest for testing
npm install --save-dev jest ts-jest @types/jest
npx ts-jest config:init

# 6. Add scripts to package.json
# (edit package.json to add build, lint, format, test scripts)

Best Practices:

  • Use strict mode in TypeScript for safer code.
  • Keep configs (tsconfig.json, .eslintrc, .prettierrc) in version control.
  • Write tests for critical logic.
  • Use source maps for easier debugging.

5. Tasks

Project Setup Challenge:

  • Create a new TypeScript project.
  • Configure tsconfig.json with strict: true and target: ES2020.
  • Set up ESLint and Prettier.
  • Add a simple test with Jest.
  • Build and run your project, then lint and format your code.