TypeScript最佳实践 #

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

type ID = string | number;
type Status = 'pending' | 'approved';

function process(value: unknown): void {
    if (typeof value === 'string') {
        console.log(value.toUpperCase());
    }
}

type Direction = 'up' | 'down' | 'left' | 'right';

function move(direction: Direction): void {
    console.log(direction);
}

interface Circle {
    kind: 'circle';
    radius: number;
}

interface Square {
    kind: 'square';
    sideLength: number;
}

type Shape = Circle | Square;

function getArea(shape: Shape): number {
    switch (shape.kind) {
        case 'circle':
            return Math.PI * shape.radius ** 2;
        case 'square':
            return shape.sideLength ** 2;
    }
}

function add(a: number, b: number): number {
    return a + b;
}

async function fetchUser(id: number): Promise<User> {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
}

function createElement(tag: 'a'): HTMLAnchorElement;
function createElement(tag: 'canvas'): HTMLCanvasElement;
function createElement(tag: string): HTMLElement {
    return document.createElement(tag);
}

function identity<T>(arg: T): T {
    return arg;
}

async function fetchJson<T>(url: string): Promise<T> {
    const response = await fetch(url);
    return response.json();
}

class User {
    private password: string;
    protected createdAt: Date;
    public name: string;
    
    constructor(name: string, password: string) {
        this.name = name;
        this.password = password;
        this.createdAt = new Date();
    }
}

class Config {
    readonly apiUrl: string;
    
    constructor() {
        this.apiUrl = process.env.API_URL!;
    }
}

interface Logger {
    log(message: string): void;
}

interface Database {
    save(data: any): void;
}

class UserService {
    constructor(
        private logger: Logger,
        private database: Database
    ) {}
    
    save(user: User): void {
        this.logger.log('Saving user');
        this.database.save(user);
    }
}

export interface User {
    name: string;
}

export function greet(user: User): string {
    return `Hello, ${user.name}!`;
}

import type { User } from './types';
import { greet } from './utils';

import { Button } from '@components/Button';
import { formatDate } from '@utils/date';

type Result<T, E = Error> = {
    success: true;
    value: T;
} | {
    success: false;
    error: E;
};

function divide(a: number, b: number): Result<number> {
    if (b === 0) {
        return { success: false, error: new Error('Division by zero') };
    }
    return { success: true, value: a / b };
}

class ValidationError extends Error {
    constructor(public field: string, message: string) {
        super(message);
        this.name = 'ValidationError';
    }
}

function validate(user: User): void {
    if (!user.name) {
        throw new ValidationError('name', 'Name is required');
    }
}

const enum Direction {
    Up,
    Down,
    Left,
    Right
}

function move(direction: Direction): void {
    console.log(direction);
}

type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

import type { User } from './types';

src/
├── components/
│   ├── Button/
│   │   ├── index.ts
│   │   └── Button.tsx
│   └── index.ts
├── hooks/
│   └── useUser.ts
├── services/
│   └── UserService.ts
├── types/
│   └── index.ts
├── utils/
│   └── date.ts
└── index.ts

export interface User {
    id: number;
    name: string;
}

export type Status = 'pending' | 'approved';

export interface ApiResponse<T> {
    code: number;
    data: T;
}