[TypeScript 문법]TypeScript의 타입 별칭(Type Aliases)

📘 TypeScript의 타입 별칭(Type Aliases)

---

타입별칭 (Type Aliases)

: 타입 별칭(Type Aliases)은 사용자가 정의하는 타입 변수
➡️ type alias 와 interface의 변수명은 대문자로 쓰는게 국룰

• 이는 새로운 이름으로 기존의 타입을 참조하는 것을 의미한다.
• 타입별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 사용하여 작성

type MyString = string;
let str1: string = 'hello!';
// string 타입처럼 사용할 수 있음
let str2: MyString = 'hello world!'

원래 string 이라는 타입이 존재하고 있지만, 이에 myString이라는 새로운 이름을 부여한 것 . 여기서 myString과 string은 동일한 의미를 갖게 된다
➡️ 타입을 정의할 수 있는 모든 곳에는 타입 별칭을 쓸 수 있음

• 이런 방식으로 타입 별칭을 사용하면 코드간결화 + 가독성 ↑
• 또한 복잡한 타입을 간략하게 표현 + 타입 정의를 재사용할 수 있음

type Person = {
  id: number;
  name: string;
  email: string;
}

// Commentary 인터페이스에서 Person타입을 참조하고 있음
interface Commentary {
  id: number;
  content: string;
  user: Person; // Person 타입 참조
}

// 객체에서 Commentary 인터페이스를 참조하고 있음
let comment1: Commentary = {
  id: 1,
  content: "뭐에요?",
  user: {
    id: 1,
    name: "김코딩",
    email: "kimcoding@naver.com",
  },
}

// Commnetary 인터페이스 내부에 content 프로퍼티가 존재하기 때문에
// content 프로퍼티를 작성하지 않으면 🚨 컴파일 에러가 남
let kimcoding: Commentary = {
    id: 1,
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@codestates.com",
    },
};

// Person 타입 내부에 isDeveloper 프로퍼티가 존재하지 않기 때문에
//isDeveloper 프로퍼티를 작성할 시 🚨컴파일 에러가 남
let kimcoding: Commentary = {
    id: 1,
    content: "뭐예요?",
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@codestates.com",
        isDeveloper: true,
    },
};

• 인터페이스나 다른 변수를 정의할 때 타입 별칭으로 정의한 타입을 참조하게 됨으로써 코드의 간결성 + 가독성 ↑
• 타입 별칭으로 만들어진 타입 참조시, 인터페이스와 마찬가지로 내부에 정의된 프로퍼티를 "전부" 참조해야함
• 타입 별칭으로 만들어진 타입 내부에 정의된 프로퍼티 외에 다른 프로퍼티를 작성하게 되면 🚨 컴파일 에러 발생

인터페이스 vs 타입별칭

---

타입별칭 또한 인터페이스와 같은 특징이 있기 때문에 인터페이스의 역할을 타입 별칭이 수행할 수도 있음
➡️ 그러나 둘 사이에 미묘한 차이점이 존재

type Person = {
  name: string;
  age: number;
}

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

let kimcoding: Person = {
  name: '김코딩',
  age: 30,
}

let coding: User = {
  name: '김코딩',
  age: 30,
}

위처럼 코드를 입력했을 때, 작성하는 동안 타입이나 인터페이스 내부에 어떤 프로퍼티가 존재하는지 기억이 나지 않는 경우가 있음
➡️ 각각 마우스를 올려놓은 결과

• kimcoding이 참고하고 있는 Person에 마우스를 올리면 내부에 어떤 프로퍼티를 정의했는지 보임
• coding이 참고하고 있는 User에 마우스를 올리면 내부에 어떤 프로퍼티를 정의했는지 보이지 않음

⭐️ 타입 별칭으로 정의한 타입으로 작성시에 조금 더 편하게 코드 작성 가능

➡️ 또한 확장 가능성에 대해서도 차이가 존재

type Person = {
    name: string;
    age: number;
}

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

// 타입 별칭으로 확장을 하는 경우 에러가 발생
type Students extends Person {
    className: string;  
}

// 인터페이스로 확장을 하는 경우 정상적으로 동작
interface Students extends User {
	 className: string;   
}

// 인터페이스로 확장을 하는 경우 정상적으로 동작
interface Students extends Person {
    className: string;  
}