TypeScript는 코드 베이스에 정적 타이핑을 추가할 수 있는 JavaScript의 상위 집합입니다. 강력한 타입 시스템을 갖춘 타입스크립트는 코드 가독성을 개선하고 컴파일 시 오류를 포착할 수 있는 기능을 제공합니다.

TypeScript의 가장 유용한 측면 중 하나는 코딩 작업을 간소화하고 귀중한 개발 시간을 절약할 수 있는 내장 유틸리티 유형입니다. 타입 안전 코드를 쉽게 작성할 수 있도록 도와주는 반드시 알아야 할 타입스크립트 유틸리티 유형을 살펴보세요.

부분 유틸리티 유형

TypeScript의 부분 유틸리티 유형을 사용하면 객체의 모든 속성을 선택 사항으로 만들 수 있습니다. 이를 통해 누락되거나 정의되지 않은 특정 속성을 가진 객체를 만들 수 있습니다. 예를 들어

 interface User { 
  name: string;
  age: number;
  email: string;
}

부분 유틸리티 유형 을 사용하면 사용자 인터페이스의 모든 속성을 선택 사항으로 설정한 새 유형을 만들 수 있습니다:

 type OptionalUser = Partial<User> 

이제 일부 속성만 정의한 OptionalUser 유형의 인스턴스를 만들 수 있습니다:

 const user: OptionalUser = { name: "John" }; 

특정 선택적 속성을 가진 객체를 생성해야 하는 상황이 발생할 수 있습니다. 이는 특히 여러 필드가 있는 양식을 작성할 때 유용할 수 있는데, 모든 필드가 필요하지 않을 수 있으며 이러한 경우 부분적인 유틸리티가 중요할 수 있기 때문입니다.

선택 유틸리티 유형

TypeScript의 선택 유틸리티 유형은 기존 유형에서 속성의 하위 집합만 선택하여 새 유형을 생성하는 데 도움이 됩니다. 더 큰 객체를 필요한 몇 가지 속성으로만 좁혀야 하거나 필요한 속성에 대해 엄격한 타이핑을 적용하려는 경우에 유용합니다.

 interface User { 
  location: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Pick<User, 'location' | 'age'>;

const person: PersonWithoutEmail = {
  location: 'USA',
  age: 30
};

이 예제에서 “User”라는 인터페이스는 이메일, 나이, 위치라는 세 가지 속성을 정의합니다.

선택 유틸리티 유형 을 사용하면 사용자 인터페이스에서 “위치” 및 “나이” 속성을 선택적으로 추출하여 “PersonWithoutEmail”이라는 새 유형을 생성할 수 있습니다.

이 글도 확인해 보세요:  성능 최적화를 위한 자바스크립트 팁과 요령 10가지

그런 다음 “PersonWithoutEmail” 유형의 새 인스턴스를 만들고 “위치” 및 “나이” 속성에만 값을 할당할 수 있습니다. 이 유형에서 “이메일” 속성은 생략되었으므로 개체에 할당할 수 없습니다.

선택 유틸리티 유형을 사용하면 원하는 속성만 통합된 새 유형을 만들 수 있습니다. 이렇게 하면 코드를 더 읽기 쉽고 작업하기 쉽게 만들 수 있습니다.

읽기 전용 유틸리티 유형

읽기 전용 유형은 객체의 속성이 생성된 후 변경되지 않음을 나타냅니다. 이 유형은 장기적으로 객체 데이터의 일관성을 보장하므로 코드를 보다 원활하고 안전하게 처리할 수 있습니다.

 interface User {
  readonly name: string;
  readonly age: number;
  readonly email: string;
}

읽기 전용 유틸리티 유형 를 사용하면 모든 사용자 인터페이스 속성이 읽기 전용으로 지정된 새 유형을 만들 수 있습니다:

 type ReadonlyUser = Readonly<User> 

ReadonlyUser 인스턴스를 만들 때 다음과 같이 속성 값을 지정할 수 있습니다:

 const user: ReadonlyUser = { 
  name: "John",
  age: 30,
  email: "[email protected]"
};

개체의 속성을 읽기 전용으로 표시하면 해당 속성 값을 수정할 수 없게 됩니다:

 user.name = "Jane";
// Error: Cannot assign to 'name' because it is a read-only property.

읽기 전용 유형은 특정 개체가 참조되더라도 변경되지 않도록 하려는 상황에서 특히 중요합니다. 예를 들어 중요한 구성 설정이 있는 개체가 있는 경우 해당 개체가 변경되지 않도록 하고 싶을 수 있습니다.

필수 유틸리티 유형

이 유형은 객체의 모든 필수 속성이 존재하도록 보장하는 반면, 부분 유형은 속성의 하위 집합을 지정하고 다른 속성은 선택 사항으로 남겨두어 더 유연하게 사용할 수 있도록 합니다. 이는 일부 속성이 필요하지 않거나 변경될 수 있는 상황에서 유용할 수 있습니다.

 interface User {
  name: string;
  location: number;
  address: string;
}

필수 유틸리티 유형 를 활용하면 모든 사용자 인터페이스 속성을 결합하는 새로운 유형을 만들 수 있으며, 이러한 각 속성이 반드시 있어야 합니다. 모든 속성이 올바르게 설정된 경우에만 RequiredUser 인스턴스를 생성할 수 있습니다.

 const user: RequiredUser = { 
  name: "John Doe",
  location: "USA",
  address: "Kansas 9745-0622"
};

필수 유틸리티 유형을 사용하면 필요한 모든 속성이 객체 내에 존재하도록 보장합니다.

이 글도 확인해 보세요:  슬랙에서 나만의 사용자 지정 슬래시 명령 만들기

유틸리티 유형 생략

생략 유틸리티 유형을 사용하면 기존 유형에서 특정 속성을 제외하여 새 유형을 만들 수 있습니다.

 interface Person {
  location: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, 'email'>;
const person:PersonWithoutEmail = { location: "USA"; age : 30 };

사람 인터페이스에는 나이, 위치, 이메일의 세 가지 속성이 있습니다. PersonWithoutEmail 유형은 생략 유틸리티 유형을 사용하여 이메일을 제외한 Person 개체의 모든 속성을 포함합니다. 그러면 이메일 속성에 대한 값을 지정하지 않고도 이 새 유형의 인스턴스를 만들 수 있습니다.

생략 유틸리티 유형은 지정한 속성만 사용하여 새 유형을 고안할 수 있다는 점에서 선택 유틸리티 유형과 상당히 유사하다는 점을 염두에 두어야 합니다.

기록 유틸리티 유형

기록 유틸리티 유형을 사용하여 키와 값에 특정 유형이 있는 개체 유형을 정의할 수 있습니다. 정의는 다음과 같습니다.

 type Record<K extends keyof any, T> = { [P in K]: T;}; 

이것은 유형 T를 각 키의 값과 연결하고, K는 모든 유형의 키의 조합입니다.

문자열 키와 숫자 값이 있는 객체 유형의 시나리오를 생각해 보겠습니다. 이 경우 레코드 유틸리티 유형 를 적용하면 됩니다:

 type MyRecord = Record<string, number>;

const myObject: MyRecord = {
  "foo": 1,
  "bar": 2,
  "baz": 3,
}

이 예에서는 문자열 키와 숫자 값이 있는 객체 유형으로 MyRecord를 지정합니다. myObject 객체는 이 유형의 예시를 구현하며, “foo”, “bar” 및 “baz” 키가 해당 값에 할당되어 있습니다.

TypeScript 유틸리티 유형으로 코드 간소화

이 글에서는 코드를 간소화하고 더 빠르고 효율적으로 개발하는 데 있어 귀중한 자산이 될 수 있는 TypeScript 유틸리티 유형의 막강한 힘을 살펴봤습니다. 이러한 유틸리티 유형과 타입스크립트는 일반적으로 코드가 항상 오류가 없고 특정 구조를 준수하도록 보장하는 데 놀라운 효과를 발휘합니다.

By 최은지

윈도우(Windows)와 웹 서비스에 대한 전문 지식을 갖춘 노련한 UX 디자이너인 최은지님은 효율적이고 매력적인 디지털 경험을 개발하는 데 탁월한 능력을 발휘합니다. 사용자의 입장에서 생각하며 누구나 쉽게 접근하고 즐길 수 있는 콘텐츠를 개발하는 데 주력하고 있습니다. 사용자 경험을 향상시키기 위해 연구를 거듭하는 은지님은 All Things N 팀의 핵심 구성원으로 활약하고 있습니다.