TypeScript - Type alias

대표이미지

 

728x90

 

타입스크립트에서는 타입을 재사용하고 코드를 더 읽기 쉽게 만들기 위해 타입 별칭(Type aliases)을 사용할 수 있다. 타입 별칭은 'type' 키워드를 사용하여 정의하며, 기존의 타입들을 조합하여 새로운 타입을 만들 수 있다.

 

코드를 짜다보면 

let 동물 :string | number | undefined;

 

위 코드와 같이 복잡하게 타입을 나열하는 경우가 있다.

🖥️ 기본적인 타입 별칭 사용

type Point = {
  x: number;
  y: number;
};

// 사용 예제
const point: Point = { x: 1, y: 2 };

 

위의 코드에서 'Point'는 객체의 구조를 정의하는 타입 별칭이다.

 

• 타입 별칭 속성 선택사항

object 자료에서 color, width 속성이 둘 다 필요하지만 어떤 object 자료는 color 속성이 선택사항이라면 다음과 같이 물음표연산자만 추가하면 된다.

 

type Square = {
  color? : string,
  width : number,
}

let 네모2 :Square = { 
  width : 100 
}

 

물음표는 undefined 라는 타입도 가질 수 있다.

 

• type 키워드를 여러개 extend

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY
let 좌표 :XandY = { x : 1, y : 2 }

 

object에 지정한 타입의 경우 합치기도 가능하다 & 기호를 쓴다면 object 안의 두개의 속성을 합쳐준다.

 

🖥️ 타입 별칭과 유니온(Union) 타입을 함께 사용

type ID = string | number;

// 사용 예제
const userId: ID = 123;
const username: ID = "john_doe";

 

위의 코드에서 'ID'는 문자열이나 숫자 중 하나가 될 수 있는 유니온 타입을 나타내는 타입 별칭이다.

 

🖥️ 제네릭을 사용한 타입 별칭

type Response<T> = {
  data: T;
  status: number;
};

// 사용 예제
const userResponse: Response<{ username: string }> = {
  data: { username: "john_doe" },
  status: 200,
};

 

위의 코드에서 'Response'는 제네릭을 사용하여 데이터의 타입을 동적으로 설정할 수 있는 타입 별칭이다.

 

🖥️ 함수 시그니처와 타입 별칭

type MathFunction = (x: number, y: number) => number;

// 사용 예제
const add: MathFunction = (a, b) => a + b;
const subtract: MathFunction = (a, b) => a - b;

 

위의 코드에서 'MathFunction'은 두 개의 숫자를 받아 숫자를 반환하는 함수를 나타내는 타입 별칭이다.

 

🖥️ 인터페이스와 타입 별칭의 차이

타입 별칭과 인터페이스는 유사하지만 몇 가지 차이가 있다. 주요 차이점은 확장 가능성과 선언 방법이다. 타입 별칭은 확장이 불간으하고, 객체, 유니온, 인터섹션 등을 포함한 다양한 타입을 정의할 수 있다.

 

인테페이스는 확장이 가능하며 주로 객체의 구조를 선언할 때 사용한다.

 

type Car = {
  brand: string;
  model: string;
};

interface ExtendedCar extends Car {
  year: number;
}

const myCar: ExtendedCar = {
  brand: "Toyota",
  model: "Camry",
  year: 2022,
};

 

위의 코드에서 'ExtendedCar'는 'Car'를 확장한 인터페이스입니다. 타입 별칭으로는 이런 확장을 할 수 없다. 

 

타입 별칭과 인터페이스 중 어떤 것을 선택할지는 사용하는 상황과 개발자의 선호도에 따라 다르다.

 

 

🖥️ readonly로 잠그기

const 출생지역 = 'seoul'; 
출생지역 = 'busan'; //const 변수는 여기서 에러남

 

• 변수에 readonly 사용

let readOnlyVariable: readonly number[] = [1, 2, 3];

// 아래의 주석을 해제하면 에러 발생
// readOnlyVariable[0] = 4;

// 변수에 새로운 배열을 할당하는 것은 가능
readOnlyVariable = [4, 5, 6];

 

위의 코드에서 readonly 를 사용하여 배열 변수를 읽기 전용으로 선언했다. 배열의 요소를 변경하려고 하면 TypeScript는 에러를 발생시킨다. 그러나 변수에 새로운 배열을 할당하는 것은 가능하다.

 

• 객체 속성에 readonly

const라는 변수는 값이 변하지 않는 변수를 만들 때 사용한다. 재할당시 에러가 나기 때문에 값이 변하는걸 미리 감지하고 차단할 수 있다.

 

하지만 object 자료를 const에 집어넣어도 object 내부는 마음대로 변경가능 하다. const 변수는 재할당만 막아줄 뿐이지 그 안에 있는 object 속성을 바꾸는 것 까지는 관여하지 않기 때문이다.

 

const 여친 = {
  name : '엠버'
}
여친.name = '유라';  //const 변수지만 에러안남

 

그럴 땐 readonly 키워드를 속성 왼쪽에 붙이면 특정 속성을 변결불가능 하게 잠궈준다.

 

type Girlfriend = {
  readonly name : string,
}

let 여친 :Girlfriend = {
  name : '엠버'
}

여친.name = '유라' //readonly라서 에러남

 

• 배열 readonly

const readOnlyArray: readonly string[] = ["apple", "banana", "cherry"];

// 아래의 주석을 해제하면 에러 발생
// readOnlyArray[0] = "orange";

// 배열에 새로운 요소를 추가하는 것은 가능
const newArray = [...readOnlyArray, "orange"];

 

위의 코드에서 'readonly' 를 사용하여 문자열 배열을 읽기 전용으로 선언했다. 배열의 요소를 변경하려고 하면 TypeScript에서 에러를 발생 시킨다. 그러나 배열에 새로운 요소를 추가하는 것은 가능하다.

 

'readonly'는 코드에서 읽기 전용으로 강제함으로써 코드의 안정성을 높이는 데 도움을 줄 수 있다. 하지만 주의해야 할 점은 'readonly'가 꼭 불변성을 보장하지 않는다는 것이다. 배열의 경우 배열 자체는 읽기 전용이지만 배열의 요소는 그렇지 않다. 따라서 배열 요소가 객체일 경우 해당 객체의 속성을 변경하는 것은 여전히 가능하다.