TypeScript) 유니온, 타입별칭, 타입가드

any 타입

• 타입 스크립트는 타입에 관한 정보가 많을수록 더 좋다 (?)
• 타입 정보는 개발자의 의도를 명확하게 전달할 수 있다.
• 효과적인 코드의 유지보수가 가능하다.
• any타입을 일부러 사용하지는 말아야한다.
• 타입을 지정할 수 없는 제한적인 경우에만 any 타입을 사용할 것

union 타입 (공용체)

• 제한된 타입을 동시에 지정하고 싶을 때

let anyVal : number | string ;

• | 기호를 사이에 두고 타입을 지정할 수 있다.
• anyVal변수는 number, string 타입 값만 올 수 있다.

let numstr: number | string = '100';

function convertToString(val: number | string): string {
  return String(val);
}

function convertToNumber(val: number | string): number {
  return Number(val);
}

console.log(convertToString(numstr));  // '100'
console.log(convertToNumber(numstr));  // 100

type strOrNum = number | string;

let numstr: strOrNum = '100';

function convertToString(val: strOrNum): string {
  return String(val);
}

function convertToNumber(val: strOrNum): number {
  return Number(val);
}

console.log(convertToString(numstr));  // '100'
console.log(convertToNumber(numstr));  // 100

type 키워드로 원하는 타입들(위 예제에서는 number와 string )만 지정해 놓습니다.

전역에서 선언하였기에 함수에 매개변수 타입도 지정 가능합니다.

이렇게 타입에 별칭을 사용하는게 type alias라고 합니다.

타입 가드

type strOrNum = number | string;

let numstr: strOrNum = '100';

// 타입가드 함수
function isString(val: number | string): val is string {
  return typeof val === 'string';
}

function isNumber(val: number | string): val is number {
  return typeof val === 'number';
}

function convertToString(val: number | string): string {
  if (isString(val)) {
    return val; // 이미 string이므로 그대로 반환
  }
  // val이 number인 경우 string으로 변환
  return val.toString();
}

function convertToNumber(val: number | string): number {
  if (isNumber(val)) {
    return val; // 이미 number이므로 그대로 반환
  }
  // val이 string인 경우 number로 변환
  return parseFloat(val);
}

console.log(convertToString(numstr)); // '100'
console.log(convertToNumber(numstr)); // 100

또는

type strOrNum = number | string;

let numstr: strOrNum = '100';

// 타입가드 함수
function isString(val: number | string): val is string {
  return typeof val === 'string';
}

function convertToString(val: number | string): string {
  return isString(val) ? val : val.toString();
}

function convertToNumber(val: number | string): number {
  return isString(val) ? parseFloat(val) : val;
}

console.log(convertToString(numstr)); // '100'
console.log(convertToNumber(numstr)); // 100