[ TypeScript ] 타입스크립트 - 유니온 타입과 인터섹션 타입 (Intersection, Union), 별칭짓기

🐾 기본타입 특정 값만 넣을수 있도록 만들기

 let a:string;
    a = '안녕안녕'; //오류 x
    a = 10; //오류 발생

let a:'hello'; // a에는 hello만 들어갈수있다.
    a = 'hello'; //오류 x
    a = 'hello2'; //오류 발생

특정값

튜플(타입)이라고 부른다.(길이와, 요소의 타입이 정해져있는 배열)

//let a : string[]; // a에는 string이 요소로 들어가있는 배열만 들어갈수있다.
let a: [string, number]; // a에는 []  배열인데, 0번째 요소는 string, 1번째 요소는 number만 들어갈수있는 배열이다. ---> 튜플이라고 부른다.(길이와, 요소의 타입이 정해져있는 배열)
    a = ['hello', 10]; //오류 x
    a = ['hello', 10, 20]; //오류 발생
    a = ['hello', '10']; //오류 발생

let a:['김철수', 10]; // a에는 두칸짜리 배열인데, 0번째 요소는 '김철수', 1번째 요소는 10만 들어갈수있는 배열이다.
    a = ['김철수', 10]; //오류 x
    a = ['김철수', 10, 20]; //오류 발생
    a = ['김철수', '10']; //오류 발생

거의 쓸일이 많지는않다.

---

🐾 Union 타입

• 자바스크립트의 OR 연산자(||)
• 연산자 👉 '|' 를 사용해서 여러가지 타입중에 하나만 지정할수있다.
• 'A' 이거나 'B'이다
• 이 타입을 사용하면 하나 이상의 타입을 선언가능

예시)

let a: string | number; // a에는 string이나 number만 들어갈수있다.
    a = 'hello'; //오류 x
    a = 10; //오류 x
    a = true; //오류 발생

let b: string | number | boolean; // b에는 string이나 number, boolean만 들어갈수있다.
    b = 'hello'; //오류 x
    b = 10; //오류 x
    b = true; //오류 x
    b = [1,2,3]; //오류 발생

let grade = 'vip' | 'sliver' | 'normal';
    grade = 'vip'; //오류 x
    grade = 'sliver'; //오류 x
    grade = 'normal'; //오류 x
    grade = 'vvip'; //오류 발생

---

📌 배열과 Union

ar1에는 string이나 number만 들어갈수있는 배열이다.

let ar1 : (string | number)[]; // ar1에는 string이나 number만 들어갈수있는 배열이다.
ar1 = ['hello', 'hi', 'bye'] //오류 x
ar1 = [1,2,3,4,5] //오류 x
ar1 = ['hello', 1, 2, 3, 4, 5] //오류 x

ar2에는 string이 들어간 배열, number가 들어간 배열만 들어갈수있는 배열이다.

let ar2 : string[] | number[]; // ar2에는 string이 들어간 배열, number가 들어간 배열만 들어갈수있는 배열이다.
ar2 = ['hello', 'hi', 'bye'] //오류 x
ar2 = [1,2,3,4,5] //오류 x
ar2 = ['hello', 1, 2, 3, 4, 5] //오류 발생

(튜플타입) ar3에는 1칸짜리 배열인데, string이나 number만 들어갈수있는 배열이다.

let ar3 : [string | number]; //(튜플타입) ar3에는 1칸짜리 배열인데, string이나 number만 들어갈수있는 배열이다.
ar3 = ['hello'] //오류 x
ar3 = [1] //오류 x
ar3 = ['hello', 1] //오류 발생

---

📌 객체와 Union

 interface IStudent {
    name: string,
    age: number,
    grade: 'A' | 'B' | 'C' | 'D' | 'F',
    schoolYear: 1 | 2 | 3 | 4,
 }

 interface ITeacher{
    name: string,
    age: number,
    subject: string,
    salary: number,
 }

 let ab: IStudent | ITeacher // ab에는 IStudent타입이나 ITeacher타입만 들어갈수있다.
 ab = { name: '김철수', age: 20, grade: 'F', schoolYear: 1 }
 ab = { name: '홍길동', age: 20, subject: '수학', salary: 3000 }

이렇게 하면 ab. 하면 미리보기로 age,name만 자동으로 뜬다. 👉 (IStudent/ITeacher 공통된애들) (19-20)

grade를 치면 이렇게 값이 뭐있는지 자동으로 뜬다.

ab에는 IStudent타입이나 ITeacher타입만 들어갈수있다.

 ab = { name: '김철수', age: 20, grade: 'F', schoolYear: 1 }
 ab = { name: '홍길동', age: 20, subject: '수학', salary: 3000 }
 //자동완성 사용할때 조금 조심은 해야한다. 

---

🐾 Intersection 타입

연산자 👉 '&' 를 사용해서 여러 타입을 모두 만족하는 하나의 타입.

📝 string 이면서 number?가능한가? No ❗️만족하는 타입이 없기때문에

let tmp2: string & number;  //let tmp2 = never;
tmp2 = 'hello'; //오류 발생
tmp2 = 10; //오류 발생
tmp2 = true; //오류 발생

tmp2에는 아무것도 들어갈수없다. - 존재하지 않는 타입이다. 그래서 let tmp2: never 이라고 뜬다.

---

IStudent이면서 동시에 ITeacher이면서 동시에 만족하는 타입을 넣어주겠다.

오류 🚫

let tmp3 : IStudent & ITeacher; 
// IStudent와 ITeacher의 key값이 겹치는게 없어야한다. (name, age)

tmp3 = {name: '김철수', age: 20, grade:'F', schoolYear:1, subject:'수학', salary:3000};

오류 발생

let tmp3 : IStudent & ITeacher; 
// IStudent와 ITeacher의 key값이 겹치는게 없어야한다. (name, age)

tmp3 = {name: '김철수', age: 20, grade:'F', schoolYear:1}; //오류 발생
tmp3 = {name: '홍길동', age: 20, subject:'수학', salary:3000}; //오류 발생

---

🐾 type별칭 짓기

예시)

let a : string ; 
// 이렇게 string을 쓰기 싫어서, 
    
// 타입을 만들거야. 
type mymymy = string;

let b : mymymy; // b는 string 타입만 넣을수있음. 

grade: 'A' | 'B' | 'C' | 'D' | 'F'
👉 이런식으로 타입을 지정해주는데, 이런식으로 타입을 지정하는것도 귀찮다. 혹은 띄어쓰기로 오타가 발생할수도있다.

그래서 이 타입에 별명을 지을까?

  type SchoolGrade = 'A' | 'B' | 'C' | 'D' | 'F';
  interface IStudent {
   name: string,
   age: number,
   grade: SchoolGrade,
   schoolYear: 1 | 2 | 3 | 4,
}

이렇게 똑같다. 별명만 붙인거다