[Typescript] 고급 타입

타입 가드 Narrowing

• 요약
  • typeof 변수
  • 속성명 in 오브젝트 자료
  • 인스턴스 instanceof 부모
• 타입가드는 특정 속성이나 메소드를 사용하기 전에
• 그것이 존재하는지 확인하거나 타입을 사용하기 전에 이 타입으로 어떤 작업을
• 수행할 수 있는지를 확인하는 개념
• 런타임 시 특정 타입으로 작업을 수행하기 전에 해당 타입을 검사하는 코드 패턴
• 작업을 수행하기 전에 타입을 검사하여 런타임 오류를 방지할 수 있음
• 객체의 경우, instanceof나 in을 사용
• 다른 타입들의 경우 typeof를 사용

// typeof

type Combinable = string | number;

function add(a: Combinable, b: Combinable){
    if(typeof a === 'string' || typeof b === 'string'){
        return a.toString() + b.toString()
    }
    return a + b;
}

• 유니온 타입이 지닌 유연성을 활용할 수 있게 해줌
• 런타임 시 코드가 정확하게 작동하게 해줌

// in
// 속성은 in을 이용해서 확인

const e1: ElevatedEmployee = {
  name: "yumi",
  privileges: ["create-server"],
  startDate: new Date(),
};

function printEmployeeInformation(emp: UnknownEmployee) {
  console.log("Name: " + emp.name);
  if ("privileges" in emp) {
    console.log("Privilages: " + emp.privileges);
  }
  if ("startDate" in emp) {
    console.log("startDate: " + emp.startDate);
  }
}

printEmployeeInformation(e1);

// instanceof 타입 가드

class Car {
    drive() {
        console.log('Driving...');
        
    }
}

class Truck {
    drive() {
        console.log('Driving a truck...');
    }

    loadCargo(amount: number){
        console.log('Loading cargo...' + amount);
        
    }
}

type Vechicle = Car | Truck

const v1 = new Car()
const v2 = new Truck()

function useVechicle(Vechicle: Vechicle) {
    Vechicle.drive()
    if(Vechicle instanceof Truck){
        Vechicle.loadCargo(1000)
    }
}

useVechicle(v1)
useVechicle(v2)

discriminated 유니언

• 타입 가드를 쉽게 구현할 수 있게 해주는 유니언 타입으로 작업을
• 수행할 때 사용할 수 있는 패턴
• 객체 타입으로 작업할 때도 사용 가능
• 결론: 객체와 유니언 타입을 사용한 작업 시 사용하는 패턴

interface Bird {
    type: 'bird'
    flyingSpeed: number
}

interface Horse {
    type: 'horse'
    runningSpeed: number
}

type Animal = Bird | Horse

function moveAnimal(animal: Animal) {
    let speed;
    switch (animal.type) {
        case 'bird':
            speed = animal.flyingSpeed
            break
            case 'horse':
                speed = animal.runningSpeed
    }
    console.log('Moving at speed: ' + speed);
    
}

moveAnimal({type: 'bird', flyingSpeed: 10})

• 인터페이스와도 작동하는데, 이 인터페이스는 인터페이스를 기반으로
• 구축된 모든 객체가 이 타입을 갖도록 하기 때문
• 주어진 속성의 존재 여부를 확인하거나 instanceof를 사용하는 게 아닌
• 실제 존재하는 속성을 사용하여 어떤 유형의 객체와 작업하고 있는지 확인 가능

형 변환(typecasting)

• 형 변환은 타입스크립트가 직접 감지하지 못하는 특정 타입의 값을 타입스크립트에 알려주는 역할
• 형 변환은 두가지 구문으로 구현할 수 있음

1. 변환하고자 하는 요소 앞이나 타입스크립트에 타입을 알려주고자 하는 위치 앞에 <HTMLInputElement> 키워드 추가하는 방법

const userInputElement = <HTMLInputElement>document.getElementById('user-input')!

userInputElement.value = 'Hi there!'

• 이 타입은 전역적으로 사용 가능
• tsconfig파일 내에 dom lib이 포함되어 있기 때문

2. 선택한 부분 다음에 as 키워드 사용

const userInputElement = document.getElementById('user-input')! as HTMLInputElement

userInputElement.value = 'Hi there!'

• 느낌표를 사용하여 느낌표 앞의 표현식을 null로 반환하지 않겠다고 타입스크립트에게 인식시킴
• 반면, 이것이 null을 반환하지 않을 것이라는 확신이 들지 않는 경우 if문을 사용

// const userInputElement = <HTMLInputElement>document.getElementById('user-input')!
const userInputElement = document.getElementById('user-input');

if (userInputElement) {
    (userInputElement as HTMLInputElement).value = 'Hi there!'
}

인덱스 속성

interface ErrorContainer{ // { email: 'Not a valid email', username: 'Must start with a character!}
    [prop: string]: string; // 모든 속성에 문자열 값 타입이 있어야 한다고 설정
}

const errorBag: ErrorContainer = {
    // 1: 이라고 입력해도 상관없음. 모두 문자열로 인식하기 때문
    email: 'Not a valid email!',
     username: 'Must start with a capital character!'
};

함수 오버로드

• 동일한 함수에 대해 여러 함수 시그니처를 정의할 수 있는 기능
• 간단히 말해, 다양한 매개변수를 지닌 함수를 호출하는 여러가지 방법을 사용하여
• 함수 내에서 작업을 수행할 수 있게 해줌
• 함수 오버로드는 주요 함수 바로 위에 같은 이름을 입력하는 것
• 그리고 이 함수를 호출하는 데 두 인수가 모두 숫자형이면 이 함수는 숫자형을 반환한다고 타입 스크립트에게 알려줌

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: string, b: number): string;
function add(a: number, b: string): string;

function add(a: Combinable, b: Combinable) {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  }
  return a + b;
}

const result = add("yuum", "schwarz");
result.split("");

• 타입스크립트가 자체적으로 반환 타입을 정확히 추론하지 못하는 경우에 사용

optinal 체이닝

• 정의되어 있는지 여부가 확실치 않은 요소 다음에 물음표를 추가
  • 이 기능은 타입스크립트 3.7 이상에서만 지원
• 선택적 체이닝 연산자는 객체 데이터의 중첩된 속성과 객체에 안전하게 접근할 수 있게 해줌
• 사실상 이는 데이터에 접근하기 전에 데이터의 존재 여부를 확인하는 if 문으로 컴파일 됨

const fetchedUserData = {
  id: "u1",
  name: "yumi",
 // job: { title: "CEO", description: "My own company" },
};

console.log(fetchedUserData?.job?.title);

Null 병합

• null 데이터 처리에 도움을 줌
• 어떤 데이터나 입력값이 있는데 그것이 null인지, undefined인지, 유효한 데이터인지 알 수 없는 경우 사용

const userInput = " ";

const storedData = userInput ?? "DEFAULT";

console.log(storedData);