고급 TypeScript: 최신 TypeScript 개발에 대한 심층 분석

소개

TypeScript는 확장 가능한 JavaScript 애플리케이션을 구축하기 위한 언어가 되었습니다. 이 종합 가이드에서는 개발 기술을 향상하고 보다 유형이 안전한 코드를 작성하는 데 도움이 되는 고급 TypeScript 개념을 살펴보겠습니다.

1. 고급형 시스템 특징

조건부 유형

복잡한 유형 관계 이해:

type IsArray<t> = T extends any[] ? true : false;
type IsString<t> = T extends string ? true : false;

// Usage
type CheckArray = IsArray<string>; // true
type CheckString = IsString; // true

// More complex conditional types
type UnwrapPromise<t> = T extends Promise<infer u> ? U : T;
type ArrayElement<t> = T extends (infer U)[] ? U : never;

// Example usage
type PromiseString = UnwrapPromise<promise>>; // string
type NumberArray = ArrayElement<number>; // number
</number></promise></t></infer></t></string></t></t>

템플릿 리터럴 유형

더 나은 유형 안전성을 위해 문자열 리터럴 유형 활용:

type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type APIEndpoint = '/users' | '/posts' | '/comments';

type APIRoute = `${HTTPMethod} ${APIEndpoint}`;

// Valid routes
const validRoute: APIRoute = 'GET /users';
const validRoute2: APIRoute = 'POST /posts';

// Error: Type '"PATCH /users"' is not assignable to type 'APIRoute'
// const invalidRoute: APIRoute = 'PATCH /users';

// Dynamic template literal types
type PropEventType<t extends string> = `on${Capitalize<t>}`;
type ButtonEvents = PropEventType;
// Results in: 'onClick' | 'onHover' | 'onFocus'
</t></t>

2. 고급 제네릭

일반 제약 조건 및 기본값

유연하면서도 유형이 안전한 일반 인터페이스 만들기:

interface Database<t extends id: string> {
    find(id: string): Promise<t null>;
    create(data: Omit<t>): Promise<t>;
    update(id: string, data: Partial<t>): Promise<t>;
    delete(id: string): Promise<boolean>;
}

// Implementation example
class MongoDatabase<t extends id: string> implements Database<t> {
    constructor(private collection: string) {}

    async find(id: string): Promise<t null> {
        // Implementation
        return null;
    }

    async create(data: Omit<t>): Promise<t> {
        // Implementation
        return { id: 'generated', ...data } as T;
    }

    async update(id: string, data: Partial<t>): Promise<t> {
        // Implementation
        return { id, ...data } as T;
    }

    async delete(id: string): Promise<boolean> {
        // Implementation
        return true;
    }
}
</boolean></t></t></t></t></t></t></t></boolean></t></t></t></t></t></t>

매핑된 유형 및 키 재매핑

고급 유형 변환:

type Getters<t> = {
    [K in keyof T as `get${Capitalize<string k>}`]: () => T[K]
};

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

type PersonGetters = Getters<person>;
// Results in:
// {
//     getName: () => string;
//     getAge: () => number;
// }

// Advanced key remapping with filtering
type FilteredKeys<t u> = {
    [K in keyof T as T[K] extends U ? K : never]: T[K]
};

interface Mixed {
    name: string;
    count: number;
    isActive: boolean;
    data: object;
}

type StringKeys = FilteredKeys<mixed string>;
// Results in: { name: string }
</mixed></t></person></string></t>

3. 고급 데코레이터

사용자 정의 속성 데코레이터

강력한 메타데이터 기반 데코레이터 만들기:

function ValidateProperty(validationFn: (value: any) => boolean) {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = function() {
            return value;
        };

        const setter = function(newVal: any) {
            if (!validationFn(newVal)) {
                throw new Error(`Invalid value for ${propertyKey}`);
            }
            value = newVal;
        };

        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true,
        });
    };
}

class User {
    @ValidateProperty((value) => typeof value === 'string' && value.length > 0)
    name: string;

    @ValidateProperty((value) => typeof value === 'number' && value >= 0)
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

4. 고급 유틸리티 유형

사용자 정의 유틸리티 유형

강력한 유형 변환 구축:

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

// Deep Required type
type DeepRequired<t> = {
    [P in keyof T]-?: T[P] extends object
        ? DeepRequired<t>
        : T[P];
};

// Deep Readonly type
type DeepReadonly<t> = {
    readonly [P in keyof T]: T[P] extends object
        ? DeepReadonly<t>
        : T[P];
};

// Example usage
interface Config {
    server: {
        port: number;
        host: string;
        options: {
            timeout: number;
            retries: number;
        };
    };
    database: {
        url: string;
        name: string;
    };
}

type PartialConfig = DeepPartial<config>;
// Now we can have partial nested objects
const config: PartialConfig = {
    server: {
        port: 3000
        // host and options can be omitted
    }
};
</config></t></t></t></t></t></t>

5. 유형이 안전한 API 패턴

유형 안전성을 갖춘 빌더 패턴

완전한 유형 안전성을 갖춘 빌더 패턴 구현:

class RequestBuilder<t> {
    private data: T;

    constructor(data: T = {} as T) {
        this.data = data;
    }

    with<k extends string v>(
        key: K,
        value: V
    ): RequestBuilder<t in k v> {
        return new RequestBuilder({
            ...this.data,
            [key]: value,
        });
    }

    build(): T {
        return this.data;
    }
}

// Usage
const request = new RequestBuilder()
    .with('url', 'https://api.example.com')
    .with('method', 'GET')
    .with('headers', { 'Content-Type': 'application/json' })
    .build();

// Type is inferred correctly
type Request = typeof request;
// {
//     url: string;
//     method: string;
//     headers: { 'Content-Type': string };
// }
</t></k></t>

6. 고급 오류 처리

유형 안전 오류 처리

강력한 오류 처리 시스템 만들기:

class Result<t e extends error> {
    private constructor(
        private value: T | null,
        private error: E | null
    ) {}

    static ok<t>(value: T): Result<t never> {
        return new Result(value, null);
    }

    static err<e extends error>(error: E): Result<never e> {
        return new Result(null, error);
    }

    map<u>(fn: (value: T) => U): Result<u e> {
        if (this.value === null) {
            return new Result(null, this.error);
        }
        return new Result(fn(this.value), null);
    }

    mapError<f extends error>(fn: (error: E) => F): Result<t f> {
        if (this.error === null) {
            return new Result(this.value, null);
        }
        return new Result(null, fn(this.error));
    }

    unwrap(): T {
        if (this.value === null) {
            throw this.error;
        }
        return this.value;
    }
}

// Usage example
function divide(a: number, b: number): Result<number error> {
    if (b === 0) {
        return Result.err(new Error('Division by zero'));
    }
    return Result.ok(a / b);
}

const result = divide(10, 2)
    .map(n => n * 2)
    .unwrap(); // 10
</number></t></f></u></u></never></e></t></t></t>

결론

이러한 고급 TypeScript 패턴은 유형이 안전하고 유지 관리가 가능한 애플리케이션을 만드는 데 있어서 언어의 힘을 보여줍니다. 이러한 개념을 익히면 TypeScript의 유형 시스템을 최대한 활용하는 강력한 애플리케이션을 구축하는 데 더 나은 준비를 갖추게 될 것입니다.

추가 리소스

• TypeScript 문서

• TypeScript 심층 분석

• TypeScript GitHub 저장소

아래 댓글로 이러한 패턴에 대한 경험을 공유해 주세요! 귀하의 프로젝트에서 가장 유용하다고 생각하는 고급 TypeScript 기능은 무엇입니까?

---

태그: #typescript #javascript #웹개발 #프로그래밍 #타이핑

위 내용은 고급 TypeScript: 최신 TypeScript 개발에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!