Home-theater-designers
TypeScript는 코드 베이스에 정적 타이핑을 추가할 수 있는 JavaScript의 상위 집합입니다. 강력한 유형 시스템을 갖춘 TypeScript는 향상된 코드 가독성과 컴파일 시간 동안 오류를 포착하는 기능을 제공합니다.
TypeScript의 가장 유익한 측면 중 하나는 내장 유틸리티 유형으로, 코딩 작업을 단순화하고 귀중한 개발 시간을 절약할 수 있습니다. 형식이 안전한 코드를 쉽게 작성하는 데 도움이 되는 꼭 알아야 할 TypeScript 유틸리티 유형을 살펴보세요.
오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.
1. 부분 유틸리티 유형
TypeScript의 부분 유틸리티 유형을 사용하면 개체의 모든 속성을 선택 사항으로 만들 수 있습니다. 누락되거나 정의되지 않은 특정 속성을 가진 개체를 만들 수 있습니다. 예를 들어:
interface User {
name: string;
age: number;
email: string;
}
사용하여 부분 유틸리티 유형 , 선택 사항으로 설정된 사용자 인터페이스의 모든 속성을 사용하여 새 유형을 생성할 수 있습니다.
type OptionalUser = Partial<User>
이제 몇 가지 속성만 정의된 OptionalUser 유형의 인스턴스를 만들 수 있습니다.
const user: OptionalUser = { name: "John" };
특정 선택적 속성을 사용하여 개체를 만들어야 하는 상황이 발생할 수 있습니다. 이것은 유용 할 수 있습니다 특히 양식을 만들 때 필드가 여러 개인 경우 모든 필드가 필요하지 않을 수 있으며 이러한 경우 부분적인 유용성이 중요할 수 있습니다.
다운로드하거나 가입하지 않고 온라인으로 무료 영화
2. 유틸리티 유형 선택
TypeScript의 Pick 유틸리티 유형을 사용하면 기존 유형에서 속성의 하위 집합만 선택하여 새 유형을 생성할 수 있습니다. 필요한 몇 가지 속성으로 더 큰 개체의 범위를 좁혀야 하거나 필요한 속성에 대해 엄격한 유형 지정을 적용하려는 경우 유용합니다.
interface User {
location: string;
age: number;
email: string;
}
type PersonWithoutEmail = Pick<User, 'location' | 'age'>;
const person: PersonWithoutEmail = {
location: 'USA',
age: 30
};
이 예에서 'User'라는 인터페이스는 이메일, 연령 및 위치의 세 가지 속성을 정의합니다.
를 사용하여 유틸리티 유형 선택 , '위치' 및 '나이' 속성을 사용자 인터페이스에서 선택적으로 추출하여 'PersonWithoutEmail'이라는 새 유형을 생성할 수 있습니다.
그런 다음 'PersonWithoutEmail' 유형의 새 인스턴스를 만들고 'location' 및 'age' 속성에만 값을 할당할 수 있습니다. 이 유형에서 'email' 속성이 생략되었으므로 개체에 할당할 수 없습니다.
Pick 유틸리티 유형을 사용하면 원하는 속성만 통합하는 새 유형을 만들 수 있습니다. 이렇게 하면 코드를 더 읽기 쉽고 작업하기 쉽게 만들 수 있습니다.
3. 읽기 전용 유틸리티 유형
읽기 전용 유형은 객체의 속성이 생성된 후 변경할 수 없음을 나타냅니다. 이 유형은 장기적으로 개체 데이터의 일관성을 보장하여 보다 원활하고 안전한 코드 처리를 제공합니다.
interface User {
readonly name: string;
readonly age: number;
readonly email: string;
}
사용하여 읽기 전용 유틸리티 유형 , 읽기 전용으로 지정된 모든 사용자 인터페이스 속성을 사용하여 새 유형을 만들 수 있습니다.
type ReadonlyUser = Readonly<User>
ReadonlyUser 인스턴스를 생성할 때 속성 값을 지정할 수 있습니다.
const user: ReadonlyUser = {
name: "John",
age: 30,
email: "john@example.com"
};
개체의 속성을 읽기 전용으로 표시하면 해당 속성의 값을 수정하려는 시도가 불가능해집니다.
user.name = "Jane";
// Error: Cannot assign to 'name' because it is a read-only property.
Readonly 유형은 특정 객체가 변경되지 않도록 하려는 상황에서 특히 중요합니다. 그러나 참조됩니다. 예를 들어, 중요한 구성 설정을 포함하는 객체가 있는 경우 변경되지 않은 상태로 유지되기를 원할 것입니다.
4. 필수 유틸리티 유형
이 유형은 개체의 모든 필수 속성이 존재하도록 보장하는 반면, 부분 유형은 속성의 하위 집합을 지정하고 나머지는 선택 사항으로 두어 더 많은 유연성을 제공합니다. 이는 일부 속성이 필요하지 않거나 변경될 수 있는 상황에서 유용할 수 있습니다.
내 Xbox One 컨트롤러가 깜박이고 연결되지 않는 이유
interface User {
name: string;
location: number;
address: string;
}
를 활용하여 필수 유틸리티 유형 , 이러한 각 속성이 있어야 함을 요구하면서 모든 사용자 인터페이스 특성을 결합하는 새 유형을 만들 수 있습니다. RequiredUser 인스턴스 생성은 해당 속성이 모두 올바르게 설정된 경우에만 가능합니다.
const user: RequiredUser = {
name: "John Doe",
location: "USA",
address: "Kansas 9745-0622"
};
필수 유틸리티 유형을 활용하면 필요한 모든 속성이 개체 내에 있는지 확인할 수 있습니다.
5. 유틸리티 유형 생략
생략 유틸리티 유형을 사용하면 기존 유형에서 특정 속성을 제외하여 새 유형을 만들 수 있습니다.
interface Person {
location: string;
age: number;
email: string;
}
type PersonWithoutEmail = Omit<Person, 'email'>;
const person:PersonWithoutEmail = { location: "USA"; age : 30 };
Person 인터페이스에는 age, location 및 email의 세 가지 속성이 있습니다. PersonWithoutEmail 유형은 Omit 유틸리티 유형을 사용하여 전자 메일을 제외한 Person 개체의 모든 속성을 포함합니다. 그런 다음 전자 메일 속성에 대한 값을 지정하지 않고 이 새 유형의 인스턴스를 만들 수 있습니다.
생략 유틸리티 유형은 지정한 속성만 사용하여 새 유형을 고안할 수 있는 권한을 부여하므로 선택 유틸리티 유형과 상당한 유사성을 공유한다는 점을 명심해야 합니다.
일러스트레이터에서 사진을 일러스트레이션으로 바꾸는 방법
6. 레코드 유틸리티 유형
레코드 유틸리티 유형을 사용하여 키와 값이 특정 유형을 갖는 오브젝트 유형을 정의할 수 있습니다. 정의는 다음과 같습니다.
type Record<K extends keyof any, T> = { [P in K]: T;};
이것은 유형 T를 각 키의 값과 연관시키는 반면 K는 모든 유형의 키의 합집합입니다. 결과 개체의 속성 유형 P는 T로 설정됩니다.
문자열 키와 숫자 값이 있는 개체 유형의 시나리오를 고려하십시오. 이 경우 다음을 적용할 수 있습니다. 레코드 유틸리티 유형 처럼:
type MyRecord = Record<string, number>;
const myObject: MyRecord = {
"foo": 1,
"bar": 2,
"baz": 3,
}
이 예에서는 MyRecord를 문자열 키와 숫자 값이 있는 객체 유형으로 지정합니다. myObject 개체는 해당 값에 할당된 'foo', 'bar' 및 'baz' 키를 사용하여 이 유형의 예시를 구현합니다.
TypeScript 유틸리티 유형으로 코드 간소화
이 기사에서는 TypeScript 유틸리티 유형의 강력한 기능에 대해 알아봤습니다. 코드를 간소화하고 개발을 더 빠르고 효율적으로 만드는 데 유용한 자산이 될 수 있습니다. 일반적으로 이러한 유틸리티 유형과 TypeScript는 코드가 항상 오류가 없고 특정 구조를 준수하는지 확인하는 데 놀라운 일을 할 수 있습니다.