Mastering TypeScript

TypeScript has become an essential tool for modern JavaScript development, providing static typing and advanced tooling that helps catch errors early and improve code quality.

TypeScript Basics

TypeScript is a superset of JavaScript that adds static typing and other features:

typescript
Copy
1// Basic type annotations
2let name: string = "John";
3let age: number = 30;
4let isActive: boolean = true;
5
6// Function with typed parameters and return type
7function greet(person: string): string {
8  return `Hello, ${person}!`;
9}
10

Advanced TypeScript Features

Interfaces

Interfaces define the shape of objects:

typescript
Copy
1interface User {
2  id: number;
3  name: string;
4  email: string;
5  isAdmin?: boolean; // Optional property
6}
7
8function createUser(user: User): User {
9  return user;
10}
11

Generics

Generics provide type-safe flexibility:

typescript
Copy
1function identity<T>(arg: T): T {
2  return arg;
3}
4
5const num = identity(42); // num is number
6const str = identity("hello"); // str is string
7

Type Guards

Type guards help narrow down types:

typescript
Copy
1function process(value: string | number) {
2  if (typeof value === "string") {
3    // TypeScript knows value is a string here
4    return value.toUpperCase();
5  } else {
6    // TypeScript knows value is a number here
7    return value.toFixed(2);
8  }
9}
10

TypeScript with React

TypeScript and React work great together, providing type checking for props, state, and more:

tsx
Copy
1interface ButtonProps {
2  text: string;
3  onClick: () => void;
4  color?: "primary" | "secondary";
5}
6
7const Button: React.FC<ButtonProps> = ({
8  text,
9  onClick,
10  color = "primary",
11}) => {
12  return (
13    <button className={`btn btn-${color}`} onClick={onClick}>
14      {text}
15    </button>
16  );
17};
18

Conclusion

TypeScript significantly improves the developer experience by catching errors at compile time rather than runtime. As your projects grow in size and complexity, TypeScript's benefits become even more apparent.