본문 바로가기
typescript

TypeScript 타입 별칭

by 냉면돈가스 2022. 6. 4.

타입스크립트에는 인터페이스 말고도 타입을 생성할 수 있는 방법이 있습니다.

type NewType = {
    name: string,
    age: number
}

인터페이스도 새로 타입을 설정해주는걸로 알고있는데

무슨 차이가 있는지 알아봤음

 

 ================================================

 

 - 인터페이스는 객체에 한정됨

type NewType = string | number;
type NewType0 = 'aaa' | 5;

let aaa: NewType = 'a';
aaa = 5;

let bbb: NewType0 = 5;
bbb = 'aaa';

 

type으로 생성한 타입별칭은 객체 이외의 타입을 넣을 수 있음

 

 - 확장하는 방법이 다름

 

인터페이스는 extends

interface NewType3 {
    name: string
}
  
interface NewType4 extends NewType3 {
    age: number
}

const NewType4Value: NewType4 = {
    name:'jong',
    age: 15
}
console.log(NewType4Value); //{ name: 'jong', age: 15 }

type은 & 기호로 확장함

type NewType5 = {name:string};
type NewType6 = {age:number} & NewType5;
const NewType6Value: NewType6 = {
    name:'jong',
    age: 15
}
console.log(NewType6Value); //{ name: 'jong', age: 15 }

 

 - 확장할 수 있는 방법2 (중첩 선언하기)

 

인터페이스에서는 굳이 extends를 쓰지 않아도 똑같은 이름으로 인터페이스를 선언할 시에 

내용이 바꿔치기되는게 아닌 이어붙이기가 된다.

interface NewType7 {
    name:string
}
interface NewType7 {
    age:number
}
const NewType7Value: NewType7 = {
    name:'jong',
    age: 15
}
console.log(NewType7Value); //{ name: 'jong', age: 15 }

그런데 위 코드처럼 작성하면 코드가 많아질수록 헷갈리지않을까??

라고 생각이 듬

개인적으론 잘 안쓸거 같네요.

 

type은 안됩니다.

type NewType8 = {name:string};
type NewType8 = {age:number}; //error

 

 

 

 

'typescript' 카테고리의 다른 글

TypeScript 제너릭  (0) 2022.06.03
TypeScript 인터페이스  (0) 2022.05.30
TypeScript 타입종류  (0) 2022.05.29
TypeScript 변수 선언 시 주의점  (2) 2022.05.22
TypeScript를 쓰는 이유  (1) 2022.05.22

댓글