타입 지정 방법
TypeScript에는 기본 타입과 객체 타입이 존재한다.
기본 타입은 JS에도 존재하는 Number, String, Object.. 같은 데이터 타입 + Enum, Never같은 TS에서 추가된 타입을 의미한다.
자세한 사항은 typescript 핸드북에서 볼 수 있다.
기본 타입을 부여하는 방법은 어렵지 않아 따로 설명하지 않겠다.
객체 타입은 말 그대로 객체형식으로 설정된 타입이다.
사용자가 필요에 의해 새로 만드는 형식이기 때문에 매우 다양한 방법으로 타입을 지정할 수 있다.
새로 만든 타입에 Type Alias와 Interface간의 차이가 존재하는데 아래에서 정리하겠다.
객체 타입을 지정하는 방법은 2가지가 존재한다.
1. Type Alias
타입 별칭이라는 의미의 Type Alias는 의미 그대로 타입에 이름을 붙힐 수 있다.
사용 방식 1. 기본 타입에 별칭을 짓는 방법
모든 식별자(함수, 클래스, 변수, 객체..)에는 타입을 정의 해야하고
사용 방식은 type 타입이름 = 데이터타입으로 설정한다.
// type alias 미사용
const age: number = 25;
// type alias 사용
type UserAge = number;
const age: UserAge = 25;
// type alias의 사용 2
type RGB = "R" | "G" | "B";
const rgb : RGB = "R"; // 성공
const rgb1 : RGB = "H"; // 실패사용 효과
-
type에 이름을 붙히므로써 표현력을 높힐 수 있다.
-
직접 type에 들어갈 값을 설정함으로써 더 안정적인 코드를 작성할 수 있다.
단순히 number, string이라면 무슨 숫자인데? 무슨 문자열인데? 라는 의문이 생길 수 있는데
type에 이름을 붙혀 더 세세한 정보를 제공한다.
사용 방식 2. 객체 타입을 생성하는 방법
사용방식은 type 타입이름 = { 속성명 : 데이터타입 }으로 작성한다.
// type alias 미사용
const person: object = {
name: "Yun",
age : 25,
address : "seoul",
}
// type alias 사용
type PersonInfo = {
name : string;
age : number;
}
const person: PersonInfo = {
name : "Yun",
age : 25,
}일반 객체의 타입을 object로 설정하면 내부 속성들은 모두
타입 추론을 통해 타입이 지정된다.
이는 잘못된 타입이 설정될 수 있으며 사용자가 직접 타입을 하나 하나 설정할 수 없다.때문에 type alias를 통해 객체 타입을 설정하여 객체의 속성을 지정해 줘야한다.
사용 방식 3. 타입을 합치는 방법
사용 방식은 type 타입1 = 타입2 & 타입3 & { 타입1의 내용 }처럼 &를 통해 합칠 수 있다.
type Year = { month : 12 }
type Month = Year & { day : 30 }
type Day = Month & { hour : 24 }
const day : Day = {
month : 12,
day : 30,
hour : 24,
}
// 만약 month or day or hour 중 하나라도 빠지면 타입 에러 발생type Year = { month : 12 }
type Month = Year & { day : 30 }
type Day = Month | { hour : 24 }
const day : Day = {
//month : 12,
//day : 30,
hour : 24,
}
// 에러가 발생하지 않음
&와|의 차이점
- 유니온을 사용할 경우 or 연산이 되어
month & day또는hour중 하나만 있으면 에러가 발생하지 않는다.- 인터섹션을 사용할 경우 and 연산이 되어
month & day & hour모두 정의 되어야 에러가 발생하지 않는다.
2. Interface
인터페이스도 기본적으로 타입 별칭과 같이 타입에 이름을 부여합니다.
사용 방식 1. 객체 타입을 지정하는 방법
사용 방식은 interface { 속성명 : 데이터타입 }으로 작성한다.
// 단순 객체 생성
interface Person {
name : string;
age : number;
}
const person: Person = {
name : "Yun",
age : 25,
}약간의 문법 차이가 있을 뿐 type alias와 유사하다.
사용 방식 2. 타입을 합치는 방법
사용 방식은 interface 타입1 extends 타입2, 타입3 { 타입1의 내용 }으로 작성한다.
interface R { r : "Red"; }
interface G { g : "Green"; }
interface B extends R, G{ b : "Blue"; color : string}
const rgb2: B = {
r : "Red",
g : "Green",
b : "Blue",
color : "삼원색",
}
// r, g, b, color 중 하나라도 빠지면 타입 에러 발생extends도 &와 마찬가지로 and 연산을 하여서 하나라도 타입의 속성이 없다면 에러를 발생시킨다.
Type Alias와 Interface의 차이점
1. Type Alias는 타입을 값으로 갖고 Interface는 값으로 갖지 않는다.
type A = { a : string }
interface A { a : string }
// 때문에 interface는 할당연산자(=)를 사용할 수 없다때문에 interface는 type a = string; 같은 기본타입에 별칭을 짓는 방법이 없다.
또한 타입에 커서를 올려 자세한 정보를 확인할 경우 type alias는 타입의 값을 보여주는데, interface는 interface 명만 표시한다.
2. Interface는 같은 이름으로 재선언과 확장이 가능하지만 Type Alias는 불가능하다.
// 확장 가능한 interface의 특징
interface UserInfo {
id : string;
password : string;
}
interface UserInfo {
email : string;
}
const user: UserInfo = {
id : "gameU",
password : "passW",
email : "user@abc.com",
}
Type Alias에서는 오류가 발생한다.
이러한 확장성 때문에 interface를 선호하는 사람들도 있다.
3. Type Alias에서는 유니온(|) 타입을 사용할 수 있지만 Interface에서는 불가능하다.
4. Type Alias에서는 튜플 타입을 사용할 수 있지만 Interface에서는 불가능하다.
튜플이란 TS에서 새로 탄생한 데이터 타입으로 기존 JS의 배열 타입을 확장한 개념이다.
차이점 : 배열의 모든 특성을 유지한 채, 배열의 원소에 하나하나 타입을 지정한다.
=> 이를 통해 배열 원소의 수와 타입을 고정시킬 수 있다.
// 일반 배열
const userArr = ["Yun", 25, "y@abc.com", true]
// 튜플
const userTuple: [string, number, string, boolean] = ["Yun", 25, "y@abc.com", true]