TypeScript는 확장 가능한 JavaScript 애플리케이션을 구축하기 위한 언어가 되었습니다. 이 종합 가이드에서는 개발 기술을 향상하고 보다 유형이 안전한 코드를 작성하는 데 도움이 되는 고급 TypeScript 개념을 살펴보겠습니다.
복잡한 유형 관계 이해:
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<"hello">; // 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>>; // string type NumberArray = ArrayElement<number[]>; // number
더 나은 유형 안전성을 위해 문자열 리터럴 유형 활용:
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<'click' | 'hover' | 'focus'>;
// Results in: 'onClick' | 'onHover' | 'onFocus'
유연하면서도 유형이 안전한 일반 인터페이스 만들기:
interface Database<T extends { id: string }> {
find(id: string): Promise<T | null>;
create(data: Omit<T, 'id'>): 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, 'id'>): 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;
}
}
고급 유형 변환:
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 }
강력한 메타데이터 기반 데코레이터 만들기:
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;
}
}
강력한 유형 변환 구축:
// Deep Partial type
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object
? DeepPartial<T[P]>
: T[P];
};
// Deep Required type
type DeepRequired<T> = {
[P in keyof T]-?: T[P] extends object
? DeepRequired<T[P]>
: T[P];
};
// Deep Readonly type
type DeepReadonly<T> = {
readonly [P in keyof T]: T[P] extends object
? DeepReadonly<T[P]>
: 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
}
};
완전한 유형 안전성을 갖춘 빌더 패턴 구현:
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 & { [key 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 };
// }
강력한 오류 처리 시스템 만들기:
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
이러한 고급 TypeScript 패턴은 유형이 안전하고 유지 관리가 가능한 애플리케이션을 만드는 데 있어서 언어의 힘을 보여줍니다. 이러한 개념을 익히면 TypeScript의 유형 시스템을 최대한 활용하는 강력한 애플리케이션을 구축하는 데 더 나은 준비를 갖추게 될 것입니다.
TypeScript 문서
TypeScript 심층 분석
TypeScript GitHub 저장소
아래 댓글로 이러한 패턴에 대한 경험을 공유해 주세요! 귀하의 프로젝트에서 가장 유용하다고 생각하는 고급 TypeScript 기능은 무엇입니까?
태그: #typescript #javascript #웹개발 #프로그래밍 #타이핑
위 내용은 고급 TypeScript: 최신 TypeScript 개발에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
