TypeScript - Interface,Type Alias, Union type,Intersection type

Interface

:arrow_right: 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있음.

:arrow_right: api 에서 데이터를 가지고 올 때 가장 많이 그리고 유용하게 사용할 수 있다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

Example)

• 변수에 인터페이스 적용

// 변수의 인터페이스 
interface User {
  name: string;
  age: number;
}

const heeje : User;

• 함수의 매개변수에 인터페이스 적용

// 함수의 매개변수에 사용하는 경우
interface User {
  name: string;
  age: number;
}

function getUser(user: User) {
  console.log(user);
}
cons heeje = {
  name: "heeje",
  age: 25,
}
getUser(heeje);

• 함수의 구조에 인터페이스 적용

//함수의 구조에 인터페이스 적용.
interface SumFunction {
    (a: number, b: number): number;   // 인자 : 반환값
}

let sum: SumFunction;

sum = (a: number, b: number): number => {
    return a + b;
};

• 배열의 인덱스와 값에 인터페이스 적용

//배열의 인덱싱에 사용하는 경우
interface StringArray {
    [index: number]: string;
}
let arr: StringArray;
arr[0] = "hi";
arr[1] = 10;  // 10은 number 이기 때문에 오류 발생. 

• 인터페이스 딕셔너리 패턴

interface StringRexDict {
    [key: string]: RegExp;  // 객체에서 key 와 값의 타입을 결정. 
}

let obj: StringRexDict = {
    css: /\.css$/,
    js: /\.js$/, 
};

• 인터페이스 확장 (상속)

interface Person {
    name: string;
    age: number; // 옵셔널 선택자 ? 동일하게 적용 가능
}
interface Developer extends Person {
    language: string;
}
const joo: Developer = { name: "joo", age: 20, language: "ts" };

---

타입 별칭 (Type Alias)

// string 타입을 사용할 때
const name: string = 'capt';

// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = 'capt';


// 객체 타입 별칭
type Developer = {
  name: string;
  skill: string;
}

‼️ Interface 와 Type Alias 의 차이점 ‼️

:arrow_right: 타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부

:arrow_right: 인터페이스는 확장 가능 but 타입 별칭은 확장이 불가능 따라서, interface 를 사용해야 한다!

유니온 타입(Union type)

:arrow_right: 장점: 타입 가드(특정 타입으로 타입의 범위를 좁히는 것)가 가능하다.

// 유니온 타입 => 1개 이상의 타입 지정을 하고 싶을 때 사용한다. 
const log = (v: string | number) => {
    console.log(v);
};

console.log("hi");
console.log(100);

인터섹션 타입(Intersection type)

:arrow_right: & 를 사용한다.

:arrow_right: 각 속성을 합칠 수 있는 것이다.

interface Dev {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}
// man 은 Dev 와 Person 의 속성을 둘 다 가지고 있다. 
const someone = (man: Dev & Person) => {
};