Principles of TypeScriptPrinciples of TypeScript

What will this article teach you?What will this article teach you?

------

1. What Is TypeScript1. What Is TypeScript

1.1 From "Runtime Errors" to "Compile-Time Discovery"1.1 From "Runtime Errors" to "Compile-Time Discovery"

Understand their relationship in one sentence:Understand their relationship in one sentence:

1.2 Motivation for Vibecodinging Need TypeScript Too1.2 Motivation for Vibecodinging Need TypeScript Too

1.3 TypeScript Actually Looks Like This1.3 TypeScript Actually Looks Like This

TypeScript is not a brand-new language; it's simply a "superset" of JavaScript:TypeScript is not a brand-new language; it's simply a "superset" of JavaScript:

// This is valid JavaScript, and also valid TypeScript const name = "Zhang San" const age = 25 function greet(user) { return `Hello ${user}` } // This is TypeScript-specific type annotation const name2: string = "Li Si" const age2: number = 30 function greet2(user: string): string { return `Hello ${user}` }

Key takeaways:Key takeaways:

• All JavaScript code is valid TypeScript codeAll JavaScript code is valid TypeScript code
• TypeScript adds optional type annotationsTypeScript adds optional type annotations
• TypeScript ultimately compiles to JavaScript for executionTypeScript ultimately compiles to JavaScript for execution

------

2. Basic Type Annotations2. Basic Type Annotations

2.1 Type Annotation Syntax2.1 Type Annotation Syntax

A type annotation is simply adding : type after the variable name:A type annotation is simply adding : type after the variable name:

// Syntax: variableName: type = value const name: string = "Zhang San" let age: number = 25 let isStudent: boolean = true

👇 Try it yourself: Add type annotations to variables👇 Try it yourself: Add type annotations to variables

2.2 Basic Types2.2 Basic Types

TypeScript supports all of JavaScript's basic types:TypeScript supports all of JavaScript's basic types:

Two ways to write array types:Two ways to write array types:

// Method 1: type[] (more common) const numbers: number[] = [1, 2, 3, 4, 5] const names: string[] = ["Zhang San", "Li Si", "Wang Wu"] // Method 2: Array<type> const numbers2: Array<number> = [1, 2, 3, 4, 5] const names2: Array<string> = ["Zhang San", "Li Si", "Wang Wu"]

Special types:Special types:

// any: any type (use sparingly — effectively disables type checking) let data: any = 42 data = "now it can be a string" data = { name: "Zhang San" } // can also be an object // unknown: type-safe any let value: unknown = 42 // if (typeof value === "number") { // console.log(value + 10) // must check type first before using // } // void: no return value function log(message: string): void { console.log(message) } // never: never returns function error(message: string): never { throw new Error(message) }

------

3. Object Types and Interfaces3. Object Types and Interfaces

3.1 Interface: Defining an Object's "Shape"3.1 Interface: Defining an Object's "Shape"

Interfaces are the primary way to define object types in TypeScript:Interfaces are the primary way to define object types in TypeScript:

// Define a User interface interface User { id: number name: string email: string age?: number // optional property } // Use the interface const user: User = { id: 1, name: "Zhang San", email: "zhangsan@example.com", age: 25 } // age is optional, so it can be omitted const user2: User = { id: 2, name: "Li Si", email: "lisi@example.com" }

👇 Try it yourself: Create objects that conform to an interface definition👇 Try it yourself: Create objects that conform to an interface definition

3.2 Type Alias3.2 Type Alias

Besides interfaces, you can also use type to define type aliases:Besides interfaces, you can also use type to define type aliases:

// Type alias type User = { id: number name: string email: string } // Union types type Status = "pending" | "success" | "error" const status: Status = "success" // ✅ // const status2: Status = "failed" // ❌ Error: not in the union type // Intersection types (merge multiple types) type User = { id: number name: string } type Timestamp = { createdAt: Date updatedAt: Date } type UserWithTimestamp = User & Timestamp const user: UserWithTimestamp = { id: 1, name: "Zhang San", createdAt: new Date(), updatedAt: new Date() }

Interface vs Type Alias:Interface vs Type Alias:

------

4. Function Types4. Function Types

4.1 Parameter Types and Return Types4.1 Parameter Types and Return Types

// Complete function type annotation function add(a: number, b: number): number { return a + b } // Arrow function const multiply = (a: number, b: number): number => { return a * b } // No return value function log(message: string): void { console.log(message) } // Returning multiple types (union type) function parseInput(input: string): number | string { const num = parseFloat(input) return isNaN(num) ? input : num }

4.2 Optional and Default Parameters4.2 Optional and Default Parameters

// Optional parameter (marked with ?) function greet(name: string, title?: string): string { return title ? `${title} ${name}` : name } greet("Zhang San") // "Zhang San" greet("Zhang San", "Mr.") // "Mr. Zhang San" // Default parameter function greet2(name: string, title: string = "friend"): string { return `${title} ${name}` } greet2("Li Si") // "friend Li Si" greet2("Li Si", "Dr.") // "Dr. Li Si"

4.3 Function Types as Parameters4.3 Function Types as Parameters

// Accepting a function as a parameter function calculate( a: number, b: number, operation: (x: number, y: number) => number ): number { return operation(a, b) } calculate(10, 5, (x, y) => x + y) // 15 calculate(10, 5, (x, y) => x * y) // 50 // Cleaner approach: define the function type first type Operation = (x: number, y: number) => number function calculate2( a: number, b: number, operation: Operation ): number { return operation(a, b) }

------

5. Generics5. Generics

5.1 Basic Concepts of Generics5.1 Basic Concepts of Generics

Generics let you define functions, interfaces, or classes without specifying concrete types upfront — you specify them at usage time:Generics let you define functions, interfaces, or classes without specifying concrete types upfront — you specify them at usage time:

// Generic function: T is a type variable function identity<T>(arg: T): T { return arg } // Explicitly specify the type at usage const num1 = identity<number>(42) // type is number const str1 = identity<string>("hello") // type is string // Type inference: TypeScript can infer automatically const num2 = identity(42) // inferred as number const str2 = identity("hello") // inferred as string

👇 Try it yourself: Use generics to handle different types of data👇 Try it yourself: Use generics to handle different types of data

5.2 Generic Constraints5.2 Generic Constraints

Restrict generics to meet certain conditions:Restrict generics to meet certain conditions:

// Constrain T to have a length property interface HasLength { length: number } function logLength<T extends HasLength>(arg: T): void { console.log(arg.length) } logLength("hello") // ✅ strings have length logLength([1, 2, 3]) // ✅ arrays have length // logLength(42) // ❌ numbers don't have a length property

5.3 Generic Interfaces and Classes5.3 Generic Interfaces and Classes

// Generic interface interface Box<T> { value: T getValue(): T } const numberBox: Box<number> = { value: 42, getValue: () => 42 } const stringBox: Box<string> = { value: "hello", getValue: () => "hello" } // Generic class class Storage<T> { private items: T[] = [] add(item: T): void { this.items.push(item) } get(index: number): T { return this.items[index] } } const numberStorage = new Storage<number>() numberStorage.add(1) numberStorage.add(2) // numberStorage.add("string") // ❌ Error const stringStorage = new Storage<string>() stringStorage.add("hello") // stringStorage.add(1) // ❌ Error

------

6. Type Inference and Practical Tips6. Type Inference and Practical Tips

6.1 Type Inference6.1 Type Inference

TypeScript can automatically infer types from context:TypeScript can automatically infer types from context:

// Inference during variable initialization const name = "Zhang San" // inferred as string const age = 25 // inferred as number const isActive = true // inferred as boolean // Array inference const numbers = [1, 2, 3] // inferred as number[] const mixed = [1, "hello", true] // inferred as (number | string | boolean)[] // Function return value inference function add(a: number, b: number) { return a + b // return value inferred as number }

👇 Try it yourself: Observe how TypeScript infers types👇 Try it yourself: Observe how TypeScript infers types

6.2 When to Use Explicit Type Annotations6.2 When to Use Explicit Type Annotations

6.3 Type Guards6.3 Type Guards

Check types at runtime:Check types at runtime:

// typeof type guard function processValue(value: string | number) { if (typeof value === "string") { // TypeScript knows value is string here console.log(value.toUpperCase()) } else { // TypeScript knows value is number here console.log(value * 2) } } // instanceof type guard class Dog { bark() { console.log("Woof") } } class Cat { meow() { console.log("Meow") } } function makeSound(animal: Dog | Cat) { if (animal instanceof Dog) { animal.bark() // TypeScript knows this is Dog } else { animal.meow() // TypeScript knows this is Cat } } // Custom type guard interface User { name: string email: string } function isUser(value: any): value is User { return ( typeof value === "object" && value !== null && typeof value.name === "string" && typeof value.email === "string" ) } function processValue(value: unknown) { if (isUser(value)) { // value is User here console.log(value.name) } }

6.4 Utility Types6.4 Utility Types

TypeScript provides some built-in utility types:TypeScript provides some built-in utility types:

// Partial: make all properties optional interface User { id: number name: string email: string } type PartialUser = Partial<User> // Equivalent to: { id?: number; name?: string; email?: string } // Required: make all properties required type RequiredUser = Required<PartialUser> // Equivalent to: { id: number; name: string; email: string } // Pick: keep only specified properties type UserBasicInfo = Pick<User, "id" | "name"> // Equivalent to: { id: number; name: string } // Omit: exclude specified properties type UserWithoutEmail = Omit<User, "email"> // Equivalent to: { id: number; name: string } // Record: create an object type type UserRoles = Record<string, boolean> // Equivalent to: { [key: string]: boolean }

------

7. Practical Tips: Using TypeScript in Vibecoding7. Practical Tips: Using TypeScript in Vibecoding

7.1 Getting AI to Generate Type-Safe Code7.1 Getting AI to Generate Type-Safe Code

❌ Bad prompt:❌ Bad prompt:

Write a user management feature for me

✅ Good prompt:✅ Good prompt:

Write a user management feature for me, using TypeScript. The data structure is defined as follows: interface User { id: number name: string email: string age: number } I need to implement: 1. Get user list: returns User[] 2. Create user: accepts Partial<User>, returns User 3. Update user: accepts id and Partial<User>, returns User 4. Delete user: accepts id, returns void Please ensure all functions have complete type annotations.

7.2 Understanding TypeScript Error Messages7.2 Understanding TypeScript Error Messages

Common errors and their meanings:Common errors and their meanings:

7.3 Incrementally Adopting TypeScript7.3 Incrementally Adopting TypeScript

If you have a JavaScript project, you can gradually migrate to TypeScript:If you have a JavaScript project, you can gradually migrate to TypeScript:

1. Step 1: Rename files to .tsStep 1: Rename files to .ts
bash 📋 Salin📋 Copy

 # From utils.js to utils.ts mv utils.js utils.ts

1. Step 2: Fix obvious type errorsStep 2: Fix obvious type errors
typescript 📋 Salin📋 Copy

 // If you get: Parameter 'a' implicitly has an 'any' type // Add type annotations function add(a: number, b: number) { return a + b }

1. Step 3: Gradually add type definitionsStep 3: Gradually add type definitions
typescript 📋 Salin📋 Copy

 // First use any for a quick fix function processUser(user: any) { // ... } // Later refine the types interface User { id: number name: string } function processUser(user: User) { // ... }

1. Step 4: Enable stricter type checkingStep 4: Enable stricter type checking
json 📋 Salin📋 Copy

 // tsconfig.json { "compilerOptions": { "strict": true, // Enable strict mode "noImplicitAny": true, // Disallow implicit any "strictNullChecks": true // Strict null checks } }

------

8. What You Should Now Be Able to Recognize8. What You Should Now Be Able to Recognize

• See : string → this is a string type annotationSee : string → this is a string type annotation
• See : number[] → this is a number array annotationSee : number[] → this is a number array annotation
• See interface User → this defines an object typeSee interface User → this defines an object type
• See type User = → this is a type aliasSee type User = → this is a type alias
• See → this is a genericSee → this is a generic
• See extends → interface inheritance or generic constraintSee extends → interface inheritance or generic constraint
• See ? → optional propertySee ? → optional property
• See readonly → readonly propertySee readonly → readonly property
• See | → union typeSee | → union type
• See & → intersection typeSee & → intersection type

If you read the "deep dive" section of each chapter carefully, you've also mastered these core concepts:If you read the "deep dive" section of each chapter carefully, you've also mastered these core concepts:

• Type annotations: Explicitly tell TypeScript the type of a variableType annotations: Explicitly tell TypeScript the type of a variable
• Interfaces: Define the structure and types of objectsInterfaces: Define the structure and types of objects
• Generics: Write reusable, type-safe codeGenerics: Write reusable, type-safe code
• Type inference: TypeScript automatically infers typesType inference: TypeScript automatically infers types
• Type guards: Check types at runtimeType guards: Check types at runtime
• Utility types: Partial, Required, Pick, Omit, and moreUtility types: Partial, Required, Pick, Omit, and more
📖 Konsep Penting📖 Core Concept

- "How should I write the type annotation for this function? The parameter is X, the return value is Y" - "Help me define an interface that describes this data structure: ..." - "What does this TypeScript error mean? How do I fix it?" - "How do I add a constraint to this generic function to ensure T must have a certain property?"- "How should I write the type annotation for this function? The parameter is X, the return value is Y" - "Help me define an interface that describes this data structure: ..." - "What does this TypeScript error mean? How do I fix it?" - "How do I add a constraint to this generic function to ensure T must have a certain property?"

← SebelumnyaPrevious3-browser-and-frontend/state-management3-browser-and-frontend/state-management SelanjutnyaNext →3-browser-and-frontend/web-performance3-browser-and-frontend/web-performance