TypeScript는 개발자가 확장 가능하고 유지 관리 가능한 JavaScript 코드를 작성하는 방법을 재정의했습니다. 정적 타이핑 및 인터페이스와 같은 기본 기능은 널리 알려져 있지만 코드에서 새로운 수준의 유연성과 성능을 발휘할 수 있는 고급 TypeScript 개념이 있습니다. 다음은 이 강력한 JavaScript 상위 집합을 마스터하기 위해 모든 개발자가 알아야 할 10가지 고급 TypeScript 개념입니다.
TypeScript를 익히면서 JavaScript 기초를 강화하고 싶으십니까?
제 eBook: JavaScript: From ES2015 to ES2023도 놓치지 마세요. ES 모듈, 비동기/대기, 프록시, 데코레이터 등과 같은 필수 기능을 다루는 최신 JavaScript에 대한 최고의 가이드입니다!
제네릭을 사용하면 엄격한 유형 안전성을 유지하면서 다양한 유형에서 작동하는 구성요소, 함수 및 클래스를 만들 수 있습니다. 이 개념은 코드를 재사용 가능하고 강력하게 만듭니다.
function wrap<T>(value: T): { value: T } {
return { value };
}
const wrappedString = wrap<string>("TypeScript"); // { value: "TypeScript" }
const wrappedNumber = wrap<number>(42); // { value: 42 }
제네릭은 유형 안전성을 손상시키지 않으면서 유연성이 필요한 라이브러리와 프레임워크에 필수적입니다.
매핑 유형을 사용하면 기존 유형을 변환하여 새 유형을 만들 수 있습니다. 이는 객체 유형의 읽기 전용 또는 선택적 버전을 생성하는 데 특히 유용합니다.
type ReadOnly<T> = {
readonly [K in keyof T]: T[K];
};
interface User {
id: number;
name: string;
}
type ReadOnlyUser = ReadOnly<User>; // { readonly id: number; readonly name: string }
이 기능은 TypeScript의 유형 변환의 초석입니다.
조건부 유형을 사용하면 조건에 따라 조정되는 유형을 만들 수 있습니다. 확장 키워드를 사용하여 논리를 정의합니다.
type IsString<T> = T extends string ? "Yes" : "No"; type Test1 = IsString<string>; // "Yes" type Test2 = IsString<number>; // "No"
조건부 유형은 API 또는 유틸리티 유형 사용자 정의와 같이 다른 유형에 의존하는 유형을 만드는 데 적합합니다.
keyof 연산자는 객체 유형의 모든 속성 키를 통합하는 반면, 조회 유형은 특정 속성의 유형을 동적으로 검색합니다.
interface User {
id: number;
name: string;
}
type UserKeys = keyof User; // "id" | "name"
type NameType = User["name"]; // string
이러한 도구는 동적 개체로 작업하거나 일반 유틸리티 기능을 만드는 데 매우 유용합니다.
TypeScript에는 일반적인 유형 변환을 단순화하는 Partial, Pick 및 Omit과 같은 내장 유틸리티 유형이 포함되어 있습니다.
interface User {
id: number;
name: string;
email: string;
}
type PartialUser = Partial<User>; // All properties are optional
type UserIdName = Pick<User, "id" | "name">; // Only id and name
type NoEmailUser = Omit<User, "email">; // All properties except email
이러한 유틸리티 유형은 유형을 수정하거나 조정할 때 시간을 절약하고 상용구를 줄입니다.
infer 키워드는 조건부 유형과 함께 작동하여 주어진 컨텍스트에서 유형을 추론합니다.
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function getUser(): User {
return { id: 1, name: "John", email: "john@example.com" };
}
type UserReturnType = ReturnType<typeof getUser>; // User
이는 유형을 동적으로 추출하고 조작하기 위해 라이브러리에서 일반적으로 사용됩니다.
교집합 유형(&)과 합집합 유형(|)을 사용하면 여러 유형을 결합하거나 구별하는 유형을 정의할 수 있습니다.
function wrap<T>(value: T): { value: T } {
return { value };
}
const wrappedString = wrap<string>("TypeScript"); // { value: "TypeScript" }
const wrappedNumber = wrap<number>(42); // { value: 42 }
이러한 유형은 복잡한 데이터 관계를 모델링하는 데 필수적입니다.
유형 가드를 사용하면 런타임 중에 유형의 범위를 동적으로 좁힐 수 있습니다. 이를 통해 조합 유형 작업이 더 안전하고 예측 가능해집니다.
type ReadOnly<T> = {
readonly [K in keyof T]: T[K];
};
interface User {
id: number;
name: string;
}
type ReadOnlyUser = ReadOnly<User>; // { readonly id: number; readonly name: string }
유형 가드는 유형을 개선하여 런타임 오류를 제거하는 데 도움이 됩니다.
템플릿 리터럴 유형을 사용하면 문자열 템플릿을 사용하여 새로운 문자열 리터럴 유형을 구성할 수 있습니다.
type IsString<T> = T extends string ? "Yes" : "No"; type Test1 = IsString<string>; // "Yes" type Test2 = IsString<number>; // "No"
이 기능은 구조화된 방식으로 문자열을 사용하는 API, 이벤트 핸들러 및 패턴 작업에 특히 유용합니다.
데코레이터는 클래스, 속성, 메서드 또는 매개변수에 주석을 달고 수정할 수 있는 TypeScript의 실험적 기능입니다.
interface User {
id: number;
name: string;
}
type UserKeys = keyof User; // "id" | "name"
type NameType = User["name"]; // string
데코레이터는 아직 실험적이지만 종속성 주입 및 메타데이터 처리를 위해 Angular 및 NestJS와 같은 프레임워크에서 널리 사용됩니다.
이러한 고급 TypeScript 개념을 익히면 유형이 더 안전하고 확장 가능하며 유지 관리 가능한 코드를 작성하는 데 도움이 됩니다. 엔터프라이즈 수준 애플리케이션에서 작업하든 오픈 소스 라이브러리에서 작업하든 이러한 도구를 사용하면 더 깔끔하고 효율적인 TypeScript를 작성할 수 있습니다.
TypeScript를 마스터하면서 JavaScript 기술을 강화하고 싶으십니까?
내 전자책: JavaScript: ES2015에서 ES2023까지를 확인해 보세요. ES6부터 ES2023의 최신 기능까지 최신 JavaScript 기능에 대한 완벽한 가이드입니다. 최신 JavaScript를 이해하는 것은 TypeScript를 마스터하기 위한 완벽한 기초입니다.
? eBook 다운로드 - JavaScript: ES2015에서 ES2023으로
위 내용은 코딩 효율성을 향상시키기 위해 꼭 알아야 할 TypeScript 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
