Getting Started with TypeScript

Welcome to TypeScript! This guide will help you get started with TypeScript development and set up your first project.

What is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript. It adds optional static types, classes, and modules to JavaScript, making it easier to write robust, maintainable code for large-scale applications.

Prerequisites

Before starting with TypeScript, you should have:

• Node.js installed (version 12 or later)
• A code editor (we recommend VS Code)
• Basic JavaScript knowledge

Installation

1. Install TypeScript globally:

npm install -g typescript

2. Check the installation:

tsc --version

Creating Your First TypeScript Project

1. Create a new directory and initialize:

mkdir my-ts-project
cd my-ts-project
npm init -y

2. Install TypeScript locally:

npm install typescript --save-dev

3. Initialize TypeScript configuration:

npx tsc --init

This creates a tsconfig.json file with default settings.

Project Structure

Create a basic project structure:

my-ts-project/
├── src/
│   └── index.ts
├── dist/
├── package.json
└── tsconfig.json

Your First TypeScript File

Create src/index.ts:

// Basic types
const message: string = "Hello, TypeScript!";
const count: number = 42;
const isActive: boolean = true;

// Function with type annotations
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Interface
interface User {
  name: string;
  age: number;
}

// Class implementation
class UserAccount implements User {
  constructor(public name: string, public age: number) {}

  describe(): string {
    return `${this.name} is ${this.age} years old`;
  }
}

// Using the class
const user = new UserAccount("John Doe", 30);
console.log(user.describe());

Compiling TypeScript

1. Manual compilation:

npx tsc

2. Watch mode for development:

npx tsc --watch

Running Your Code

1. Add a build script to package.json:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "tsc --watch"
  }
}

2. Build and run:

npm run build
npm start

Development Tools

VS Code Setup

1. Install VS Code
2. Install recommended extensions:
   • TypeScript TSLint Plugin
   • ESLint
   • Prettier

Adding Type Checking to Your Editor

VS Code includes built-in TypeScript support, but you can enhance it:

1. Enable strict mode in tsconfig.json:

{
  "compilerOptions": {
    "strict": true
  }
}

2. Add ESLint for TypeScript:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Create .eslintrc.js:

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

Debugging

1. Source Maps Enable source maps in tsconfig.json:

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

2. VS Code Debug Configuration Create .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Program",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

Next Steps

1. Explore the TypeScript documentation
2. Practice with small projects
3. Learn about:
   • Type annotations
   • Interfaces
   • Classes
   • Generics
   • Modules
   • Decorators

Common Pitfalls to Avoid

1. Don't overuse any:

// Bad
const data: any = fetchData();

// Good
interface ApiResponse {
  id: number;
  name: string;
}
const data: ApiResponse = fetchData();

2. Don't ignore TypeScript errors:

// Bad
// @ts-ignore
const result = someFunction();

// Good
type Result = ReturnType<typeof someFunction>;
const result: Result = someFunction();

3. Don't forget to initialize class properties:

// Bad
class User {
  name: string;  // Error: Property 'name' has no initializer

// Good
class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

Resources

1. Official TypeScript Documentation
2. TypeScript Playground
3. DefinitelyTyped for type definitions
4. Community Discord/Forums
5. This tutorial series

Remember:

1. Start with strict mode enabled
2. Use type annotations wisely
3. Leverage your IDE's features
4. Write tests early
5. Keep your TypeScript knowledge up to date