Typescript에서 유형을 확인하는 방법

Typescript에서는 부울, 문자열, 클래스의 개체 인스턴스 및 개체의 값과 같은 값 유형을 확인해야 합니다.

Typescript에는 다음을 사용하여 작업하는 세 가지 방법이 있습니다.

typeof: 키워드는 부울, 문자열, 숫자 등과 같은 값 유형을 확인하는 데 도움이 됩니다.

instanceof: 개체 인스턴스를 클래스 생성자와 비교하기 위한 키워드입니다.

type guards: typescript 기능 언어를 사용하여 유형을 검사하는 강력한 방법입니다.

대본

애플리케이션 코드에서 엔터티 클래스Invoice로 회계 소프트웨어를 구축하고 있습니다.

class Invoice {
  public amount: number;
  public description: string;
  country: string;
}

class SalesInvoices extends Invoice {
  products: Array<string> = [];
}

class PurchaseInvoice extends Invoice {
  tax: number;
}

const invoicesToProcess: Array<Invoice> = [];

한 팀은 우리가 몇 가지 작업을 수행하기를 원합니다.

설명 필드에 대한 함수 지원 번호 또는 문자열을 만듭니다.

invoiceToProcess 배열에 SalesInvoice만 추가하는 함수를 만듭니다.

invoiceToProcess를 반복하고 국가가 "ES"이고 금액이 100보다 큰 경우 모든 송장을 인쇄합니다.

아이디어는 각 작업에 typeof, instanceof 및 type guards를 사용하는 것입니다. 해보자:

TypeOf 사용

연산자typeof는 javascript 값 유형을 비교하는 데 도움이 됩니다. amount 매개변수가 문자열 또는 숫자이기 때문에 typeof 함수에 삼진과 함께 createInvoice를 사용합니다.

function createInvoice(
  description: string | number,
  amount: number,
  country
): Invoice {
  const descriptionValue =
    typeof description === "number" ? `${description}` : description;
  return {
    description: descriptionValue,
    amount,
    country,
  };
}

이제 설명에 함수, 지원 문자열 및 번호가 있습니다.

const invoiceWithNumber = createInvoice(1231321, 120, "ES");
const invoIceWithString = createInvoice("Banana", 90, "USA");
console.log(invoIceWithString, invoiceWithNumber);

완벽합니다. 2단계로 넘어갑시다.

Learn more about typeof and values types.

InstanceOf 사용

salesInvoice는 Invoice에서 확장되기 때문에 우리의 과제는 SalesInvoice를 invoicesToProcess에 추가하는 것뿐입니다. invoiceToProcess는 모든 송장 매개변수를 이해하고 송장에서 양식 송장을 확장하여 유효합니다.

instanceof 연산자는 클래스 인스턴스를 비교하기 때문에 도움이 됩니다.

function addInvoiceToProcess(invoice: Invoice) {
  if (invoice instanceof SalesInvoices) {
    invoicesToProcess.push(invoice);
  }
}

instanceof 연산자는 생성자를 SalesInvoice와 비교하여 일치하는 경우 송장을 어레이에 푸시합니다. 코드를 테스트해 봅시다.

const salesInvoice = new SalesInvoices();
salesInvoice.amount = 100;
salesInvoice.country = "ES";

const basicInvoice = new Invoice();
basicInvoice.amount = 90;
basicInvoice.country = "USA";

addInvoiceToProcess(basicInvoice);
addInvoiceToProcess(salesInvoice);

console.log(invoicesToProcess);

완벽하게 작동하고 최종 작업으로 이동합니다.

Learn more about instanceof

타입 가드 사용

마지막 두 접근 방식의 경우 값 유형 또는 인스턴스에 도움이 되는 typeof 및 instanceof를 사용하지만 값은 어떻습니까?

마지막 과제는 국가가 "ES"이고 금액이 "100"이상인 경우 인쇄하는 것이며 이를 위해 Type Guards를 사용합니다.

유형 보호는 어설션을 사용하는 is 연산자가 포함된 함수로, 컴파일러에 일부 유형에 적합함을 알려줍니다.

function isValidInvoice(invoice: Invoice): invoice is SalesInvoices {
  return invoice.amount > 100 && invoice.country === "ES";
}

// the code looks clean.
invoicesToProcess.forEach((invoice) => {
  if (isValidInvoice(invoice)) {
    console.log(invoice);
  }
});

Learn more about Type Guards

요약

우리는 Typescript에서 유형 검사를 처리하는 방법을 배웠고 유형 가드를 사용하여 어설션 함수를 작성하여 코드를 깔끔하고 따라하기 쉽게 만들었습니다.

향후 유형 검사에 도움이 되기를 바랍니다.

Full source code