TypeScript Changed Everything#

Switching from plain JavaScript to TypeScript was one of the best decisions I ever made.

The JavaScript Problem#

1
// JavaScript be like...
2
function greet(name) {
3
  return "Hello, " + name.toUpperCase();
4
}
5

6
greet(123); // Runtime Error!
7
// You only find out when it's too late

TypeScript Saves the Day#

1
// TypeScript catches it before you even run
2
function greet(name: string): string {
3
  return "Hello, " + name.toUpperCase();
4
}
5

6
greet(123); // Nope! Compile error
7
greet("LUKKID"); // All good!

Basic Types That’ll Save Your Life#

1
// The basics
2
let name: string = "LUKKID";
3
let age: number = 20;
4
let isAwesome: boolean = true;
5

6
// Arrays
7
let skills: string[] = ["React", "Node.js", "Python"];
8
let numbers: Array<number> = [1, 2, 3];
9

10
// Objects with interfaces
11
interface User {
12
  id: number;
13
  name: string;
14
  email?: string; // Optional stuff
15
}
16

17
const user: User = {
18
  id: 1,
19
  name: "LUKKID"
20
};

My Favorite Features#

1. Interfaces#

1
interface Project {
2
  id: string;
3
  title: string;
4
  tech: string[];
5
  completed: boolean;
6
}
7

8
function displayProject(project: Project) {
9
  console.log(`${project.title} - ${project.tech.join(", ")}`);
10
}

2. Generics#

1
function getFirst<T>(arr: T[]): T | undefined {
2
  return arr[0];
3
}
4

5
const firstNumber = getFirst([1, 2, 3]); // knows it's number
6
const firstName = getFirst(["a", "b"]); // knows it's string

3. Union Types#

1
type Status = "pending" | "approved" | "rejected";
2

3
function updateStatus(id: string, status: Status) {
4
  // Only these 3 values allowed!
5
}
6

7
updateStatus("1", "approved"); // Works
8
updateStatus("1", "maybe");    // Nope!

React + TypeScript = Perfect Combo#

1
interface ButtonProps {
2
  label: string;
3
  onClick: () => void;
4
  variant?: "primary" | "secondary";
5
}
6

7
const Button: React.FC<ButtonProps> = ({
8
  label,
9
  onClick,
10
  variant = "primary"
11
}) => {
12
  return (
13
    <button
14
      className={`btn btn-${variant}`}
15
      onClick={onClick}
16
    >
17
      {label}
18
    </button>
19
  );
20
};
21

22
// VSCode autocomplete goes crazy here
23
<Button label="Click me" onClick={() => alert("Hi!")} />

Tips for Making the Switch#

Start with any — then slowly add real types
Turn on strict mode — hurts at first, worth it later
Use VSCode — the autocomplete is insane
Read the errors — TypeScript tells you exactly what’s wrong

My tsconfig.json#

1
{
2
  "compilerOptions": {
3
    "target": "ES2020",
4
    "module": "ESNext",
5
    "strict": true,
6
    "esModuleInterop": true,
7
    "skipLibCheck": true,
8
    "forceConsistentCasingInFileNames": true
9
  }
10
}