Skip to content

getting-started.md

Latest commit

 

History

History
266 lines (214 loc) · 4.7 KB

getting-started.md

File metadata and controls

266 lines (214 loc) · 4.7 KB
sidebar_position 0

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
  1. 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
  1. Install TypeScript locally:
npm install typescript --save-dev
  1. 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
  1. 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"
  }
}
  1. 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
  }
}
  1. 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
  }
}
  1. 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();
  1. Don't ignore TypeScript errors:
// Bad
// @ts-ignore
const result = someFunction();

// Good
type Result = ReturnType<typeof someFunction>;
const result: Result = someFunction();
  1. 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