타입스크립트의 기본적인 타입에 대해서 살펴봤다. 복습하자면

• Type : string, number, boolean, array, object, enum, void, any
• 특징
  - 정적 스크립트 이기 때문에 코드를 작성할 때만 동작한다.
  - 타입을 사용하므로 타입을 이용해 강화된 함수와 변수를 만들 수 있다.

✔ 심화 Types - union & Type Aliases

◼ union

const data= [] | void;
// data type은 배열 or void 가 들어옴. 
const incomingData= (a: array|boolean) => return a;
// 파라미터 a는 배열 or boolean

◾ union 예제

type combineType = string | number;
const combine =(a: combineType, b: combineType) => {
	const result= a+b ;
    return result
}
const result1= combine(100,200);
const result2= combine('hello','world');
console.log("result1:", result1);
console.log("result1:", result2);

result = a + b;
error TS2365: Operator '+' cannot be applied to types 'combineType' and 'combineType'.

이런 애러가 난다. 애러가 나는 이유는 string type은 + 로 붙일 수 없기 때문이다.

애러를 처리하려면 타입별로 분기 처리를 해줘야 한다.

  type combineType = string | number;
  const combine = (a: combineType, b: combineType) => {
    let result: any;
    if (typeof a === "number" && typeof b === "number") {
      result = a + b;
    } else {
      result = a.toString() + b.toString();
    }
    return result;
  };

이렇게 타입별로 처리를 달리 해주면 애러가 발생하지 않고 좀 더 명확한 코드를 작성할 수 있다.

❗ 만약 여기서 하나의 변수를 더 하게 된다면??

 const result1 = combine(100, 200, "result is number");
 const result2 = combine("hello", "world", "result is string"); 
// result1 300 , result2 helloworld

결과값은 파라미터로 들어온 2개의 값에 따라 조건문을 타고 내려가기 때문에, 세번째 파라미터가 들어와도 영향을 끼치지 않는다.

	{...생략}
  const combine = (a: combineType, b: combineType, r: string) => {
    let result: any;
    if ((typeof a === "number" && typeof b === "number") || r === "result is number") {
      result = +a + +b;
      //result = parsInt(a) + parsInt(b);
    } else {
      result = a.toString() + b.toString();
    }
    return result;
  };
  {...생략}

if ((typeof a === "number" && typeof b === "number") || r === "result is number") 이부분에 타입스크립트가 a , b가 number가 아닐 수도 있다는 (r === 'result is number') 추론을 하기 때문에 a,b를 number로 바꿔서 return 값을 내야 한다.

◼ 컴파일 결과

(function () {
    var combine = function (a, b, r) {
        var result;
        if ((typeof a === "number" && typeof b === "number") || r === "result is number") {
            result = +a + +b;
        }
        else {
            result = a.toString() + b.toString();
        }
        return result;
    };
    var result1 = combine(100, 200, "result is number");
    var result2 = combine("eunsu", "min", "result is string");
    console.log("result1:", result1);
    console.log("result1:", result2);
})();

◼ Type Aliases

Type Aliases는 특정 타입이나 인터페이스를 참조 할수 있는 타입 변수를 의미한다.

  type combineType = string | number;
  //conbineType은 string or number
  type UserType = {
    name: string;
    age: number;
  };
  //User Type은 name은 string age 는 number 
  type Update<t> = (t: string) => t;
  //제네릭도 사용 가능함.

✔ Type Aliases 특징

• 새로운 타입 값을 생성하는 것이 아니라 정의한 타입에 대해 나중에 참고 할 수 있게 이름을 보여하는 것과 같다.

✔ Type Aliases VS Interface

• Interface와 Type의 가장 큰 차이점은 확장 가능 / 불가능이다.
  Inerface는 타입 확장이 가능 하나, Type Aliases는 확장이 불가능하다.
• 좋은 소프트웨어는 언제나 확장이 용이해야 한다는 원칙에 따라 가급적 확장 가능한 인터페이스로 선언하면 좋다고 캡틴판교님이 말씀하셨당..