타입 별칭, 유니온타입(or), 인터섹션타입(&) 사용법

1. 타입과 타입 별칭(Type Aliasing)

• 기존 타입에 대한 별명 부여
• 객체에 대한 새로운 타입 생성

type MyType = string; // MyType 이라는 별칭 부여
let a :MyType = "Hello";

type MyType2 = { name:string; age:number; }
letb : MyType2 = { name:"홍길동", age:20 };

 

1.1 선택적 필드와 읽기 전용

• 선택적 필드: 물음표를 사용 => age 필드는 값이 들어갈 수도 있고, 없을 수도 있다.
• 읽기 전용 : readonly 사용 => email 필드는 처음 값이 정해지면 변경할 수 없다.

// 선택적 필드와 읽기 전용
type MyType3 = { name:string; age?number; readonly email:string; };
let c :MyType3 = {name:"홍길동", email:"gdhong@test.com" };

// 읽기 전용이므로 오류 발생
_c.email = "gdhong@test.com";

 

1.2 튜플 타입: 배열의 개수와 인자의 형식까지 지정 가능한 타입

//튜플 타입
type TupleType = [string, number];
let a :TupleType = ["hello", 1001:

 

1.3 타입 별칭을 활용해 다른 타입을 선언하기

type PersonType = {
name: string;
}

type PersonListType = {
pageNo: number;
pageSize: number;
persons: PersonType[];
}

const personList: PersonListType = {
pageNo:2,
pageSize:4,
persons : [
{ name:"", mobile: "010-2222-1111" },
{ name:"L", mobile: "010-2222-1112", birthYear: 1993 },
{ name:"", mobile: "010-2222-1113", birthYear: 1992 },
]

2. 유니온 타입

• 합집합 개념, or과 같음
• |를 사용함

type YourType = string | number;
let a1 YourType = 100;
let a2: YOurType = "hello";

 

type PersonType1 = { no:number: name:string; email:string }
type PersonType2 = { no:number: name:string; tel:string }

 

만약 PersonType1의 속성을 모두 가지거나 PersonType2의 속성을 모두 가지고 싶을 때(no, name, email 속성을 가지거나 혹은 no, name, string 속성을 가지는 타입을 만들고 싶을 때), 아래와 같이 선택적 속성을 생각할 수 있다.

하지만 이런 경우 아래와 같이 no, name 속성만 있는 경우를 허용해버릴 수 있다.

//선택적 속성을 생각해볼 수 있지만 no, name 속성만 있는 경우를 허용해버림
type PersonType3 = { no:number, name:string, email?: string, tel?:string };
// 정상 실행
let p3: PersonType3 = { no:1001, name:"2" };

 

 

따라서 PersonType1의 속성을 모두 가지거나 PersonType2의 속성을 모두 가지고 싶을 때는

유니온 타입을 사용해서 타입을 지정해야 한다.

type PersonType1 = { no:number: name:string; email:string };
type PersonType2 = { no:number: name:string; tel:string };

type PersonTypeUnion PersonType1 | PersonType2; // 유니온 타입

let p1 PersonTypeUnion = { no:1001, name:"2", email: "gdhong@test.com" };
let p2 PersonTypeUnion = { no:1001, name:"", tel: "010-1111-1111" }

//email 또는 tel 속성을 포함하지 않으므로 오류 발생
let p3 PersonTypeUnion = { no:1001, name:"2" };

 

3. 인터셉션 타입(Intersection Type)

• 두가지 타입을 모두 만족시켜야 함
• &를 사용

type PersonTypeA = {
no:number:
name:string:
email:string
};
type PersonTypeB = {
no:number:
name:string:
tel:string
A
};

type PersonTypelnter = PersonTypeA & PersonTypeB:

const p1 PersonTypelnter = { no:1001, name:"2", email:"gdhong@test.com", tel: "010-1111-1111" };