Master TypeScript: Practical Tips, Advanced Types, and Real-World Projects

Introduction

TypeScript, a superset of JavaScript, adds static type checking, a rich type system, and modern language features, making it increasingly popular for frontend development.

1. Project Initialization

Project Structure

<code>my-ts-project/
├── src/
│   ├── index.ts
│   ├── components/
│   ├── utils/
├── dist/
├── tsconfig.json
├── package.json
└── node_modules/</code>

The src folder holds all TypeScript source files, while dist stores compiled JavaScript.

tsconfig.json

<code>{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}</code>

target : specifies the JavaScript version to emit.

module : sets the module system.

strict : enables all strict type‑checking options.

esModuleInterop : adds compatibility for ES module syntax.

skipLibCheck : skips type checking of declaration files for faster builds.

outDir and rootDir : define output and source roots.

baseUrl and paths : simplify import statements.

2. Common Types

<code>let isDone: boolean = false;
let age: number = 30;
let userName: string = "John Doe";
let numbers: number[] = [1, 2, 3];
let user: [string, number] = ["John", 25];
enum Color { Red, Green, Blue }
let color: Color = Color.Green;</code>

These basic types provide strong compile‑time checks and help avoid common errors.

3. Interfaces and Type Aliases

<code>interface User {
  name: string;
  age: number;
  address?: string; // optional
}

type Address = {
  street: string;
  city: string;
  country: string;
};

const user: User = { name: "John Doe", age: 30 };
const address: Address = { street: "123 Main St", city: "Anytown", country: "USA" };</code>

Interfaces can be extended, while type aliases cannot.

<code>interface Employee extends User {
  jobTitle: string;
}

const employee: Employee = { name: "Jane Doe", age: 28, jobTitle: "Developer" };</code>

4. Enums

<code>enum Direction { Up = 1, Down, Left, Right }
let direction: Direction = Direction.Up;</code>

5. Union and Intersection Types

<code>type StringOrNumber = string | number;
let value: StringOrNumber;
value = "Hello";
value = 123;

interface A { a: string; }
interface B { b: number; }
type AB = A & B;
const ab: AB = { a: "Hello", b: 42 };</code>

6. Advanced Type Features

Generics

<code>function identity<T>(arg: T): T { return arg; }
let output1 = identity<string>("myString");
let output2 = identity<number>(100);

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

const myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = (x, y) => x + y;</code>

Conditional Types

<code>type IsString<T> = T extends string ? true : false;
type Test1 = IsString<string>; // true
type Test2 = IsString<number>; // false</code>

Mapped Types

<code>type Readonly<T> = { readonly [P in keyof T]: T[P]; };
type Partial<T> = { [P in keyof T]?: T[P]; };

interface Person { name: string; age: number; }

type ReadonlyPerson = Readonly<Person>;
type PartialPerson = Partial<Person>;</code>

7. Using Third‑Party Libraries

<code>npm install lodash
npm install @types/lodash</code>

<code>import _ from 'lodash';
const numbers = [1, 2, 3, 4, 5];
console.log(_.shuffle(numbers));</code>

DefinitelyTyped provides type definitions for popular libraries.

<code>declare module 'my-untyped-lib' {
  export function myFunction(param: string): void;
}</code>

8. Real‑World TypeScript Cases

React with TypeScript

<code>import React from 'react';

interface Props { name: string; }

const Greeting: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};
export default Greeting;

interface CounterState { count: number; }

class Counter extends React.Component<{}, CounterState> {
  state: CounterState = { count: 0 };
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <button onClick={this.increment}>Increment</button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}</code>

Node.js with TypeScript

<code>import express from 'express';
const app = express();
app.get('/', (req, res) => {
  res.send('Hello, TypeScript!');
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

import express, { Request, Response } from 'express';
const app = express();
interface User { id: number; name: string; email: string; }
const users: User[] = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Doe', email: '[email protected]' }
];
app.get('/users', (req: Request, res: Response) => {
  res.json(users);
});
app.get('/users/:id', (req: Request, res: Response) => {
  const user = users.find(u => u.id === parseInt(req.params.id, 10));
  if (user) res.json(user);
  else res.status(404).send('User not found');
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});</code>

9. New TypeScript 4.x Features

<code>// Incremental compilation
{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./.tsbuildinfo"
  }
}

// Template literal types
type Color = "red" | "green" | "blue";
type BrightColor = `${Color}-bright`;
let brightColor: BrightColor = "red-bright"; // OK
brightColor = "blue-dark"; // Error</code>

10. Practical Tips for Better Code Quality

Enable strict mode for stricter type checking.

Use eslint with @typescript-eslint plugins for linting.

Integrate prettier for consistent formatting.

Set noImplicitAny and strictNullChecks in tsconfig.json to improve type safety.

11. Performance Optimizations

Configure skipLibCheck and incremental in tsconfig.json to speed up compilation.

Prefer const over let for variables that do not change.

Conclusion

TypeScript brings huge benefits to frontend development by improving readability, maintainability, and catching errors early. Leveraging its powerful type system and the latest features makes your code more robust and efficient. Feel free to ask questions or share your experiences.