Getting Started with TypeScript
Getting Started with TypeScript
TypeScript has become an essential tool in modern web development. It brings static typing to JavaScript, helping catch errors early and improving developer experience. Let's explore how to get started with TypeScript in your projects.
What is TypeScript?
TypeScript is a superset of JavaScript that adds static type definitions. It compiles to plain JavaScript and runs anywhere JavaScript runs.
Key Benefits
- Early Error Detection: Catch errors at compile time, not runtime
- Better IDE Support: Enhanced autocomplete, refactoring, and navigation
- Self-Documenting Code: Types serve as inline documentation
- Easier Refactoring: Confident code changes with type safety
Setting Up TypeScript
Installation
```bash
Install TypeScript globally
npm install -g typescript
Or install locally in your project
npm install --save-dev typescript @types/node ```
Configuration
Create a tsconfig.json file in your project root:
```json { "compilerOptions": { "target": "ES2020", "module": "commonjs", "lib": ["ES2020", "DOM"], "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] } ```
Basic Types
Primitive Types
```typescript // Basic types let name: string = "John" let age: number = 30 let isActive: boolean = true
// Arrays let numbers: number[] = [1, 2, 3] let names: Array<string> = ["Alice", "Bob"]
// Tuples let person: [string, number] = ["John", 30] ```
Object Types
```typescript // Interface interface User { id: number name: string email: string isActive?: boolean // Optional property }
// Type alias type Product = { id: number title: string price: number }
// Usage const user: User = { id: 1, name: "John Doe", email: "john@example.com" } ```
Function Types
```typescript
// Function with typed parameters and return type
function greet(name: string): string {
return Hello, ${name}!
}
// Arrow function const add = (a: number, b: number): number => a + b
// Function type type MathOperation = (x: number, y: number) => number
const multiply: MathOperation = (x, y) => x * y ```
Advanced Types
Union Types
```typescript type Status = "loading" | "success" | "error"
function handleResponse(status: Status) { switch (status) { case "loading": return "Loading..." case "success": return "Success!" case "error": return "Error occurred" } } ```
Generics
```typescript // Generic function function identity<T>(arg: T): T { return arg }
// Generic interface interface ApiResponse<T> { data: T status: number message: string }
// Usage const userResponse: ApiResponse<User> = { data: { id: 1, name: "John", email: "john@example.com" }, status: 200, message: "Success" } ```
Utility Types
```typescript interface User { id: number name: string email: string password: string }
// Pick specific properties type PublicUser = Pick<User, "id" | "name" | "email">
// Omit specific properties type CreateUser = Omit<User, "id">
// Make all properties optional type PartialUser = Partial<User>
// Make all properties required type RequiredUser = Required<User> ```
Working with React and TypeScript
Component Props
```typescript interface ButtonProps { children: React.ReactNode onClick: () => void variant?: "primary" | "secondary" disabled?: boolean }
function Button({ children, onClick, variant = "primary", disabled }: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={btn btn-${variant}}
>
{children}
</button>
)
}
```
Hooks with TypeScript
```typescript // useState with explicit type const [user, setUser] = useState<User | null>(null)
// useEffect useEffect(() => { fetchUser().then(setUser) }, [])
// Custom hook function useApi<T>(url: string) { const [data, setData] = useState<T | null>(null) const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null)
useEffect(() => { fetch(url) .then(response => response.json()) .then(setData) .catch(err => setError(err.message)) .finally(() => setLoading(false)) }, [url])
return { data, loading, error } } ```
Best Practices
1. Start Gradually
You don't need to convert everything at once. Start with new files and gradually migrate existing ones.
2. Use Strict Mode
Enable strict mode in your tsconfig.json for better type safety:
```json { "compilerOptions": { "strict": true, "noImplicitAny": true, "strictNullChecks": true } } ```
3. Leverage Type Inference
TypeScript is smart about inferring types. Don't over-annotate:
```typescript // Good: Let TypeScript infer const users = await fetchUsers() // TypeScript knows this is User[]
// Unnecessary: Over-annotation const users: User[] = await fetchUsers() ```
4. Use Meaningful Names
```typescript // Good interface UserPreferences { theme: "light" | "dark" notifications: boolean }
// Bad interface UP { t: string n: boolean } ```
Conclusion
TypeScript is a powerful tool that can significantly improve your development experience and code quality. Start small, learn gradually, and embrace the type system. Your future self (and your teammates) will thank you!
The key is to start using TypeScript in new projects and gradually adopt it in existing ones. Don't try to learn everything at once – focus on the basics and build from there.