Posts
TypeScript7분

[TS] 타입 연산자(Type Operators)

목차15

Type Operators(타입 연산자)

타입스크립트(TypeScript)는 자바스크립트(JavaScript)의 상위 집합 언어로, 정적 타입(static type)을 지원한다.

타입스크립트는 변수, 함수, 객체 등의 값의 타입을 사전에 정의하고, 그것이 잘못 사용되는 것을 방지할 수 있다. 이 때, 타입스크립트에서는 다양한 **Type Operators(타입 연산자)**를 제공하여 타입 정의를 더욱 유연하게 할 수 있다.

Union Type Operator: | (or)

유니언 타입 연산자는 | 기호로 표시된다. 이 연산자는 두 개 이상의 타입을 묶어서 하나의 타입으로 정의할 때 사용된다.

예를 들어, 문자열과 숫자 중에서 하나의 타입을 가지는 변수를 정의하려면 다음과 같이 작성할 수 있다.

코드
let myVar: string | number;

위의 코드에서 myVar 변수는 문자열(string) 또는 숫자(number) 중 하나의 타입을 가질 수 있다.

Intersection Type Operator: & (and)

인터섹션 타입 연산자는 & 기호로 표시된다. 이 연산자는 두 개 이상의 타입을 조합하여 하나의 타입으로 정의할 때 사용된다.

예를 들어, 객체 A와 객체 B의 속성을 모두 가지는 객체를 정의하려면 다음과 같이 작성할 수 있다.

코드
type AB = A & B;

위의 코드에서 AB 타입은 A와 B 객체의 속성을 모두 가지는 타입이다.

Typeof Type Operator: typeof

타입오브(Typeof) 타입 연산자는 typeof 키워드로 표시된다. 이 연산자는 변수의 타입을 가져오는 데 사용된다.

예를 들어, 문자열 변수의 타입을 가져오려면 다음과 같이 작성할 수 있다.

코드
let myVar = "Hello World";
type MyVarType = typeof myVar;

위의 코드에서 MyVarType 타입은 string이다.

Index Type Operator: []

인덱스 타입 연산자는 대괄호([])를 사용하여 표시된다. 이 연산자는 객체의 속성 이름을 동적으로 정의할 때 사용된다.

코드
const myObj = {
  name: "John",
  age: 30
}

이 객체에서 name 속성의 타입을 가져오려면 다음과 같이 작성할 수 있다.

코드
type NameType = typeof myObj["name"];

위의 코드에서 NameType 타입은 string이다.

Keyof Type Operator: keyof

키오브(Keyof) 타입 연산자는 keyof 키워드로 표시된다. 이 연산자는 객체의 속성 이름을 유니온 타입으로 가져올 때 사용된다.

코드
const myObj = {
  name: "John",
  age: 30
}

이 객체의 속성 이름을 유니온 타입으로 가져오려면 다음과 같이 작성할 수 있다.

코드
type MyObjKeys = keyof typeof myObj;

위의 코드에서 MyObjKeys 타입은 "name" | "age" 이다.

Conditional Type Operator: extends ? :

컨디셔널(Conditional) 타입 연산자는 extends ? : 기호로 표시된다. 이 연산자는 타입을 조건부로 정의할 때 사용된다.

예를 들어, 타입 T가 숫자인 경우 숫자 타입을, 그렇지 않은 경우 문자열 타입을 반환하는 타입을 정의하려면 다음과 같이 작성할 수 있다.

코드
type ReturnType<T> = T extends number ? number : string;

위의 코드에서 ReturnType 타입은 타입 T가 숫자인 경우 number 타입을, 그렇지 않은 경우 string 타입을 반환한다.

Exclude Type Operator: Exclude<A, B>

익스클루드(Exclude) 타입 연산자는 Exclude<A, B> 형태로 표시된다. 이 연산자는 타입 A에서 타입 B를 제외한 유니온 타입을 반환할 때 사용된다.

코드
type A = "a" | "b" | "c" | "d";
type B = "b" | "d";

이때 타입 A에서 타입 B를 제외한 유니온 타입을 가져오려면 다음과 같이 작성할 수 있다.

코드
type C = Exclude<A, B>;

위의 코드에서 C 타입은 "a" | "c" 이다.

Extract Type Operator: Extract<A, B>

익스트랙트(Extract) 타입 연산자는 Extract<A, B> 형태로 표시된다. 이 연산자는 타입 B에서 타입 A에 할당 가능한 부분집합을 추출할 때 사용된다.

코드
type MyType = string | number | boolean;

이때 boolean 타입에서 string과 number 타입에 할당 가능한 부분집합을 추출하려면 다음과 같이 작성할 수 있다.

코드
type ExtractedType = Extract<string | number, boolean>;

위의 코드에서 ExtractedType 타입은 never 이다. 이는 boolean 타입에서 string과 number 타입에 할당 가능한 부분집합이 없기 때문이다.

NonNullable Type Operator: NonNullable<T>

논널러블(NonNullable) 타입 연산자는 NonNullable<T> 형태로 표시된다. 이 연산자는 타입 T에서 null 또는 undefined를 제외한 타입을 반환할 때 사용된다.

코드
type A = string | null | undefined;

이때 null 또는 undefined를 제외한 타입을 가져오려면 다음과 같이 작성할 수 있다.

코드
type B = NonNullable<A>;

위의 코드에서 B 타입은 string 이다.

ReturnType Type Operator: ReturnType<T>

리턴타입(ReturnType) 타입 연산자는 ReturnType<T> 형태로 표시된다. 이 연산자는 함수의 반환 타입을 추출할 때 사용된다.

코드
function myFunc(a: string, b: number): boolean {
  return a.length > b;
}

이 함수의 반환 타입을 가져오려면 다음과 같이 작성할 수 있다.

코드
type MyFuncReturnType = ReturnType<typeof myFunc>;

위의 코드에서 MyFuncReturnType 타입은 boolean 이다.

Record Type Operator: Record<K, T>

레코드(Record) 타입 연산자는 Record<K, T> 형태로 표시된다. 이 연산자는 타입 K의 속성 이름을 갖는 객체를 생성할 때 사용된다.

코드
type K = "name" | "age" | "city";
type T = string;

이때 타입 K의 속성 이름을 갖는 타입 T의 값으로 초기화된 객체를 생성하려면 다음과 같이 작성할 수 있다.

코드
type MyObj = Record<K, T>;

위의 코드에서 MyObj 타입은 다음과 같은 타입을 갖는 객체를 생성한다.

코드
{
  name: string;
  age: string;
  city: string;
}

Required Type Operator: Required<T>

리콰이어드(Required) 타입 연산자는 Required<T> 형태로 표시된다. 이 연산자는 모든 속성이 필수적으로 존재하는 타입을 만들 때 사용된다.

코드
interface Person {
  name?: string;
  age?: number;
}

이때 모든 속성이 필수적으로 존재하는 타입을 만들려면 다음과 같이 작성할 수 있다.

코드
type RequiredPerson = Required<Person>;

위의 코드에서 RequiredPerson 타입은 다음과 같습니다.

코드
{
  name: string;
  age: number;
}

ThisType Type Operator: ThisType<T>

디스 타입(ThisType) 연산자는 ThisType<T> 형태로 표시된다. 이 연산자는 다른 타입 연산자와는 조금 다르게 사용된다. 이 연산자는 this가 가리키는 객체의 타입을 지정할 때 사용된다. 

코드
const myObj = {
  name: "John",
  greet(this: { name: string }): void {
    console.log(`Hello, ${this.name}!`);
  }
}

이 객체에서 greet 메서드를 호출할 때 this가 가리키는 객체의 타입을 지정하려면 다음과 같이 작성할 수 있다.

코드
type MyObjThisType = ThisType<{ name: string }>;

const myObj = {
  name: "John",
  greet(this: MyObjThisType): void {
    console.log(`Hello, ${this.name}!`);
  }
}

위의 코드에서 MyObjThisType 타입은 { name: string } 이다.

Undefinable Type Operator: Undefinable<T>

언디파인어블(Undefinable) 타입 연산자는 Undefinable<T> 형태로 표시된다. 이 연산자는 타입 T에 undefined 값을 추가할 때 사용된다.

코드
type A = string | null;

이때 undefined 값을 추가하려면 다음과 같이 작성할 수 있다.

코드
type B = Undefinable<A>;

위의 코드에서 B 타입은 string | null | undefined 이다.

반응형