TL;DR: TypeScript 유틸리티 유형은 기존 유형을 변환하는 사전 구축된 함수로, 코드를 더 깔끔하고 유지 관리하기 쉽게 만듭니다. 이 문서에서는 사용자 프로필 업데이트, 구성 관리, 데이터를 안전하게 필터링하는 방법 등 실제 사례를 통해 필수 유틸리티 유형을 설명합니다.
TypeScript는 현대 웹 개발의 초석으로서 개발자가 더욱 안전하고 유지 관리하기 쉬운 코드를 작성할 수 있도록 해줍니다. JavaScript에 정적 타이핑을 도입함으로써 TypeScript는 컴파일 타임에 오류를 잡는 데 도움이 됩니다. 2024년 스택 오버플로 개발자 설문조사에 따르면 TypeScript는 개발자들 사이에서 가장 인기 있는 스크립팅 기술 부문에서 5위를 차지했습니다.
TypeScript의 놀라운 기능이 성공의 주된 이유입니다. 예를 들어, 유틸리티 유형은 개발자가 유형 조작을 단순화하고 상용구 코드를 줄이는 데 도움이 됩니다. 유틸리티 유형은 TypeScript 2.1에 도입되었으며 새 릴리스마다 추가 유틸리티 유형이 추가되었습니다.
이 글에서는 TypeScript를 익히는 데 도움이 되는 유틸리티 유형에 대해 자세히 설명합니다.
유틸리티 유형은 기존 유형을 새로운 변형 유형으로 변환할 수 있도록 하는 TypeScript의 사전 정의된 일반 유형입니다. 기존 유형을 매개변수로 사용하고 특정 변환 규칙에 따라 새 유형을 반환하는 유형 수준 함수로 생각할 수 있습니다.
이 기능은 유형 정의를 실제로 복제할 필요 없이 이미 존재하는 유형의 수정된 변형이 필요한 경우가 많은 인터페이스 작업 시 특히 유용합니다.
부분 유틸리티 유형은 유형을 취하고 모든 속성을 선택 사항으로 만듭니다. 이 유틸리티 유형은 속성을 재귀적으로 선택 사항으로 만들기 때문에 유형이 중첩된 경우 특히 유용합니다.
예를 들어 사용자 프로필 업데이트 기능을 생성한다고 가정해 보겠습니다. 이 경우 사용자가 모든 필드를 업데이트하지 않으려면 Partial 유형을 사용하고 필수 필드만 업데이트하면 됩니다. 이는 모든 필드가 필요하지 않은 양식 및 API에서 매우 편리합니다.
다음 코드 예시를 참고하세요.
interface User {
id: number;
name: string;
email?: string;
}
const updateUser = (user: Partial<User>) => {
console.log(Updating user: ${user.name} );
};
updateUser({ name: 'Alice' });
필수 유틸리티 유형은 제공된 유형의 모든 속성이 필수로 설정된 유형을 구성합니다. 이는 개체를 데이터베이스에 저장하기 전에 모든 속성을 사용할 수 있는지 확인하는 데 유용합니다.
예를 들어 자동차 등록에 필수를 사용하면 새 자동차 기록을 생성하거나 저장할 때 브랜드, 모델, 마일리지 등 필수 속성을 놓치지 않도록 할 수 있습니다. 이는 데이터 무결성 측면에서 매우 중요합니다.
다음 코드 예시를 참고하세요.
interface User {
id: number;
name: string;
email?: string;
}
const updateUser = (user: Partial<User>) => {
console.log(Updating user: ${user.name} );
};
updateUser({ name: 'Alice' });
읽기 전용 유틸리티 유형은 모든 속성이 읽기 전용인 유형을 생성합니다. 이는 원하지 않는 변경으로부터 중요한 설정을 보호하기 위해 구성 관리에 매우 유용합니다.
예를 들어 앱이 특정 API 엔드포인트에 의존하는 경우 실행 과정에서 변경되어서는 안 됩니다. 읽기 전용으로 설정하면 앱의 전체 수명 주기 동안 일정하게 유지됩니다.
다음 코드 예시를 참고하세요.
interface Car {
make: string;
model: string;
mileage?: number;
}
const myCar: Required<Car> = {
make: 'Ford',
model: 'Focus',
mileage: 12000,
};
Pick** 유틸리티 유형은 기존 유형에서 속성 세트를 선택하여 유형을 구성합니다. 이는 사용자 이름, 이메일 등 필수 정보를 필터링하여 대시보드나 요약 보기에 표시해야 할 때 유용합니다. 이는 데이터의 보안과 명확성을 향상시키는 데 도움이 됩니다.
다음 코드 예시를 참고하세요.
interface Config {
apiEndpoint: string;
}
const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };
// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'
Omit 유틸리티 유형은 기존 유형에서 특정 속성을 제외하여 유형을 구성합니다.
예를 들어 생략은 이메일 주소와 같은 민감한 정보 없이 사용자 데이터를 제3자와 공유하려는 경우에 유용합니다. 해당 필드를 제외하는 새 유형을 정의하여 이를 수행할 수 있습니다. 특히 API에서는 API 응답의 외부 내용을 살펴보고 싶을 수도 있습니다.
다음 코드 예시를 참고하세요.
interface User {
id: number;
name: string;
email: string;
}
type UserSummary = Pick<User, 'name' | 'email'>;
const userSummary: UserSummary = {
name: 'Alice',
email: 'alice@example.com',
};
Record 유틸리티 유형은 지정된 키와 값을 사용하여 객체 유형을 생성하며, 이는 구조화된 매핑을 처리할 때 유용합니다.
예를 들어, 재고 관리 시스템의 맥락에서 기록 유형은 품목과 수량을 명시적으로 매핑하는 데 유용할 수 있습니다. 이러한 유형의 구조를 사용하면 예상되는 모든 과일이 고려되도록 하면서 재고 데이터에 쉽게 액세스하고 수정할 수 있습니다.
interface User {
id: number;
name: string;
email?: string;
}
const userWithoutEmail: Omit<User, 'email'> = {
id: 1,
name: 'Bob',
};
Exclude** 유틸리티 유형은 공용체에서 특정 유형을 제외하여 유형을 구성합니다.
특정 기본 유형(예: 숫자 또는 부울, 문자열은 허용하지 않음)만 허용해야 하는 함수를 설계할 때 제외를 사용할 수 있습니다. 이렇게 하면 예상치 못한 유형으로 인해 실행 중에 오류가 발생할 수 있는 버그를 방지할 수 있습니다.
다음 코드 예시를 참고하세요.
type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;
const inventory: Inventory = {
apple: 10,
banana: 5,
orange: 0,
};
Extract 유틸리티 유형은 공용체에서 특정 유형을 추출하여 유형을 구성합니다.
계산 수행과 같이 혼합 유형 컬렉션에서 숫자 값만 처리해야 하는 시나리오에서는 추출을 사용하면 숫자만 전달됩니다. 이는 엄격한 유형 지정으로 런타임 오류를 방지할 수 있는 데이터 처리 파이프라인에 유용합니다.
다음 코드 예시를 참고하세요.
interface User {
id: number;
name: string;
email?: string;
}
const updateUser = (user: Partial<User>) => {
console.log(Updating user: ${user.name} );
};
updateUser({ name: 'Alice' });
NonNullable 유틸리티 유형은 주어진 유형에서 null 및 undefine을 제외하여 유형을 구성합니다.
사용자 이름이나 제품 ID와 같은 일부 값을 항상 정의해야 하는 앱에서 값을 NonNullable으로 설정하면 해당 키 필드가 null 또는 null이 되지 않습니다. 🎜>정의되지 않음
. 누락된 값으로 인해 문제가 발생할 수 있는 API의 응답 및 양식 유효성 검사 중에 유용합니다.
다음 코드 예시를 참고하세요.
interface Car {
make: string;
model: string;
mileage?: number;
}
const myCar: Required<Car> = {
make: 'Ford',
model: 'Focus',
mileage: 12000,
};
ReturnType 유틸리티는 함수의 반환 유형을 추출합니다.
좌표와 같은 복잡한 객체를 반환하는 고차 함수나 콜백으로 작업할 때 ReturnType
을 사용하면 매번 수동으로 명시할 필요 없이 예상되는 반환 유형을 정의하는 것이 단순화됩니다. 이를 통해 일치하지 않는 유형 관련 버그를 줄여 개발 속도를 높일 수 있습니다.
interface Config {
apiEndpoint: string;
}
const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };
// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'
매개변수 유틸리티는 함수의 매개변수 유형을 튜플로 추출합니다.
이를 통해 함수 주위에 래퍼를 작성할 때와 같이 함수 매개변수를 동적으로 조작하거나 유효성을 검사하려는 상황에서 매개변수 유형을 쉽게 추출하고 재사용할 수 있습니다. 함수 시그니처의 일관성을 보장하여 코드베이스 전체에서 코드 재사용성과 유지 관리성을 크게 향상시킵니다.
다음 코드 예시를 참고하세요.
interface User {
id: number;
name: string;
email: string;
}
type UserSummary = Pick<User, 'name' | 'email'>;
const userSummary: UserSummary = {
name: 'Alice',
email: 'alice@example.com',
};
TypeScript로 앱을 개발할 때 이러한 유틸리티 유형을 결합하면 강력한 결과를 얻을 수 있습니다. 여러 유틸리티 유형이 효과적으로 함께 작동하는 몇 가지 시나리오를 살펴보겠습니다.
특정 필드를 요구하고 다른 필드는 선택 사항으로 허용하는 유형을 생성할 수 있습니다.
interface User {
id: number;
name: string;
email?: string;
}
const userWithoutEmail: Omit<User, 'email'> = {
id: 1,
name: 'Bob',
};
이 예에서 UpdateUser에는 id
속성이 필요하지만 이름과 이메일은 선택 사항으로 허용됩니다. 이 패턴은 식별자가 항상 존재해야 하는 레코드를 업데이트하는 데 유용합니다.
특정 조건에 따라 다양한 형태를 가질 수 있는 API 응답을 정의할 수 있습니다.
type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;
const inventory: Inventory = {
apple: 10,
banana: 5,
orange: 0,
};
여기서 ApiResponse를 사용하면 API 호출에 대한 유연한 응답 유형을 생성할 수 있습니다. Pick
을 사용하면 관련 사용자 데이터만 응답에 포함되도록 할 수 있습니다.특정 기준에 따라 Union에서 특정 유형을 필터링해야 하는 상황이 발생할 수 있습니다.
다음 코드 예시를 참고하세요.
interface User {
id: number;
name: string;
email?: string;
}
const updateUser = (user: Partial<User>) => {
console.log(Updating user: ${user.name} );
};
updateUser({ name: 'Alice' });
여기서 Exclude 유틸리티는 원래 ResponseTypes 공용체에서 loading을 제외하는 유형( NonLoadingResponses )을 생성하는 데 사용됩니다. handleResponse 함수만 허용하도록 허용 유효한 입력은 성공 또는 오류입니다.
유틸리티 유형은 엄청나게 강력하지만 이를 과도하게 사용하면 코드가 복잡해지고 읽을 수 없게 될 수 있습니다. 이러한 유틸리티를 활용하는 것과 코드 명확성을 유지하는 것 사이에서 균형을 유지하는 것이 중요합니다.
다음 코드 예시를 참고하세요.
interface Car {
make: string;
model: string;
mileage?: number;
}
const myCar: Required<Car> = {
make: 'Ford',
model: 'Focus',
mileage: 12000,
};
각 유틸리티 사용 사례의 목적이 명확한지 확인하세요. 유형의 의도된 구조를 혼란스럽게 할 수 있으므로 너무 많은 유틸리티를 함께 중첩하지 마십시오.
다음 코드 예시를 참고하세요.
interface Config {
apiEndpoint: string;
}
const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };
// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'
컴파일 후 TypeScript 유형이 사라지기 때문에 런타임 시 성능에 미치는 영향은 거의 없지만, 복잡한 유형은 TypeScript 컴파일러 속도를 저하시켜 개발 속도에 영향을 미칠 수 있습니다.
interface User {
id: number;
name: string;
email: string;
}
type UserSummary = Pick<User, 'name' | 'email'>;
const userSummary: UserSummary = {
name: 'Alice',
email: 'alice@example.com',
};
TypeScript가 웹 개발자들 사이에서 가장 인기 있는 언어 중 하나라는 것은 의심의 여지가 없습니다. 유틸리티 유형은 올바르게 사용될 경우 TypeScript 개발 경험과 코드 품질을 크게 향상시키는 TypeScript의 고유한 기능 중 하나입니다. 그러나 성능 및 코드 유지 관리 문제가 있을 수 있으므로 모든 시나리오에 사용해서는 안 됩니다.
위 내용은 TypeScript 유틸리티 유형: 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
