Introduction

TypeScript is a powerful programming language that enhances JavaScript with static typing, object-oriented features, and advanced tooling capabilities. Whether you're just starting out or looking to level up your TypeScript skills, this blog post will guide you from the basics to advanced concepts. Let's dive in!

Installing TypeScript

To get started with TypeScript, you'll need to install it globally on your machine. Open your command line interface and run the following command:

npm install -g typescript

Basic Types

TypeScript introduces static types to JavaScript. Let's explore some basic types:

Type Inference

TypeScript can infer types based on the assigned values:

let message: string = 'Hello, TypeScript!'
let count: number = 42
let isActive: boolean = true
let names: string[] = ['Alice', 'Bob', 'Charlie']
let tuple: [number, string] = [1, 'TypeScript']

Type Inference

TypeScript can infer types based on the assigned values:

let username = 'John' // Type: string
let age = 25 // Type: number
let isValid = true // Type: boolean

Functions and Parameters

Functions can have explicit return types and parameter types:

function add(a: number, b: number): number {
  return a + b
}
console.log(add(2, 3)) // Output: 5

Interfaces

Interfaces define the shape of objects in TypeScript:

interface Person {
  name: string
  age: number
}

function greet(person: Person): string {
  return `Hello, ${person.name}! You are ${person.age} years old.`
}

const alice: Person = { name: 'Alice', age: 30 }
console.log(greet(alice)) // Output: Hello, Alice! You are 30 years old.

Classes and Inheritance

TypeScript supports classes and inheritance:

class Animal {
  constructor(public name: string) {}

  move(distance: number = 0): void {
    console.log(`${this.name} moved ${distance} meters.`)
  }
}

class Dog extends Animal {
  bark(): void {
    console.log('Woof! Woof!')
  }
}

const dog = new Dog('Buddy')
dog.move(10) // Output: Buddy moved 10 meters.
dog.bark() // Output: Woof! Woof!

Advanced TypeScript

Generics

Generics allow you to create reusable components that work with a variety of types:

function identity<T>(arg: T): T {
  return arg
}

let result = identity<string>('TypeScript') // Type: string

Enums

Enums provide a way to define a set of named constants:

enum Color {
  Red,
  Green,
  Blue,
}
let color: Color = Color.Green
console.log(color) // Output: 1

Decorators

Decorators enable you to modify classes, methods, and properties at design time:

function log(target: any, key: string): void {
  console.log(`Method ${key} is invoked.`)
}
class Calculator {
  @log
  add(a: number, b: number): number {
    return a + b
  }
}
const calc = new Calculator()
calc.add(2, 3) // Output: Method add is invoked.

Modules and Namespaces

Modules and namespaces provide a way to organize and encapsulate code:

// math.ts
export function add(a: number, b: number): number {
  return a + b
}
// app.ts
import { add } from './math'
console.log(add(2, 3)) // Output: 5

Type Declarations for External Libraries

TypeScript allows you to add type declarations for external JavaScript libraries:

// my-library.d.ts
declare module 'my-library' {
  export function greet(name: string): void
}
// app.ts
import { greet } from 'my-library'
greet('Alice') // Output: Hello, Alice!

Advanced Type Techniques

TypeScript offers advanced type techniques such as conditional types, mapped types, and intersection types. These techniques allow you to create complex type transformations and compositions.

Best Practices and Tips

• Enable strict type checking ("strict": true in tsconfig.json) to catch potential errors.
• Use interfaces and types to define clear contracts between components.
• Leverage TypeScript's editor support for autocompletion, type inference, and refactoring.
• Document your code using JSDoc-style type annotations to enhance code readability.
• Regularly update TypeScript to benefit from the latest language features and improvements.

Conclusion

Congratulations on completing this journey from beginner to advanced TypeScript! You've learned the fundamentals, explored advanced concepts, and gained insights into best practices. TypeScript's static typing, object-oriented features, and powerful tooling make it a valuable language for building robust and scalable applications. Keep practicing, exploring, and applying TypeScript in your projects to become a proficient TypeScript developer.