[내일배움캠프-TIL]6. React-9기 2주차 - 공부요약

오늘도 타입스크립트 강의를 듣다가 배운것을 간단하게 적어보려고 한다.

Literal Type

특정 값만 가질 수 있도록 제한하는 타입이다. 문자열, 숫자, 불리언 값등 값 자체를 타입으로 정의하여 해당 값들만 허용하도록 할 수 있다.

function combine(
	input1: number|string, 
    input2: number|string,
    resultConversion === "as-number"|"as-text"){ // as-number, as-text 타입으로 제한한다.
  let result;
  if(typeof input1 === "number" && typeof input2 === "number" ||
      resultConversion === "as-number"){  // input1, input2가 number 이거나 "as-number" 이면 
    result = +input1 + +input2; // 숫자로 반환
  }else{
    result = input1.toString() + input2.toString(); // 아니라면 문자로 반환
}
  return result;

const combinedAges = Combined(30, 29, "as-number");
console.log(combinedAges);   // 출력 : 59

const combinedStringAges = Combined("30", "29", "as-number");
console.log(combinedStringAges); // 출력 59

const combinedName = Combined("David", "Anna", "as-text");
console.log(combinedName);    //출력 DavidAnna

type alias

특정 타입에 이름을 붙여 사용하는 방법으로 코드의 가독성과 재사용성을 높이는데 유용하다.

위에서 input 타입을 보면 유니언 타입인데 number|string으로 사용되고 있다. 여기에 이름을 붙여 사용하면 편할 것 같다. 위의 함수 부분만 떼와서 수정하면

type NumStr = number|string;         //number|string을 NumStr로 정의한다.
type NumTxt = "as-number"|"as-text";

function combine(
	input1: NumStr, // NumStr을 사용한다.
   input2: numStr, // NumStr을 재사용한다.
   resultConversion === NumTxt){  
 let result;
 if(typeof input1 === "number" && typeof input2 === "number" ||
     resultConversion === "as-number"){  
   result = +input1 + +input2; 
 }else{
   result = input1.toString() + input2.toString(); 
}
 return result;

아직도 타입스크립트의 타입만 적고있다니.. 좀 더 노력해야겠다. 갈길이 멀다