Typescript에서 고유한 유형 만들기

열거형

열거형은 명명된 상수를 나타내는 유형이며 종종 열거형이라고 합니다. 상수 값의 의미가 명확하지 않으면 코드를 더 쉽게 이해할 수 있으므로 매우 좋습니다.

enum Response{
     Ok = 200,
     Error = 400
}

if (status === 200) {
  // do something
}

if (status === Response.Ok) {
  // do something
}

이 접근 방식의 문제는 문자열 열거형이 강력한 형식이지만 약한 형식의 숫자 열거형에 정확히 반영됩니다.

enum Level {
  High,
  Medium,
  Low
}
level = 5; // no error accur


enum Level {
  High = "H",
  Medium = "M",
  Low = "L"
}
level = "VH"; // a type error occur

개체 유형

첫 번째 TypeScript에는 개체에 대한 좋은 유추 유형 시스템이 있습니다. 객체 위로 마우스를 가져가면 객체로 유추된 유형을 볼 수 있으며 속성을 다른 유형의 값으로 변경하거나 존재하지 않는 속성을 추가하려고 하면 오류가 반환됩니다.

const JackScore = {
  name: "Jack",
  score: 70
};

JackScore.score = 75; // no error accur
JackScore.score = 'test'; // a type error occur
JackScore.passed = true; // a type error occur

개체를 입력하는 명시적인 방법도 있으며 동일한 강도를 가집니다.

const JackScore: { name: string; score: number; }  = {
  name: "Jack",
  score: 70
};

JackScore.score = 75; // no error accur
JackScore.score = 'test'; // a type error occur
JackScore.passed = true; // a type error occur

두 가지 방법 모두 강력한 유형이지만 재사용하려는 경우 개체 유형을 매번 재정의하는 데 지칠 수 있으므로 유형 별칭과 인터페이스가 매우 중요합니다.

유형 별칭 및 인터페이스

유형 별칭 및 인터페이스는 유형을 재사용하고 입력 프로세스를 더 빠르게 만드는 방법입니다.

//without types alias and interfaces
const tomScore: { name: string; score: number } = {
  name: "Tom",
  score: 70,
};
const bobScore: { name: string; score: number } = {
  name: "Bob",
  score: 80,
};
const janeScore: { name: string; score: number } = {
  name: "Jane",
  score: 90,
};
//with types alias and interfaces
type Score = {            interface Score {
name:string,       or     name:string,
score:number              score:number
}                        }

const tomScore: Score = { name: "Tom", score: 70 };
const bobScore: Score = { name: "Bob", score: 80 };
const janeScore: Score = { name: "Jane", score: 90 };

인터페이스와 유형 별칭의 차이점

기본 유형 표현

유형 별칭은 기본 유형을 나타낼 수 있지만 인터페이스는 그렇지 않습니다.

type Name = string;

배열 표현

유형 별칭 접근 방식이 훨씬 더 간결하고 명확하지만 둘 다 대표적인 배열입니다.

type Names = string[];

interface Names {
  [index: number]: string;
}

튜플 표현

유형 별칭은 튜플 유형을 나타낼 수 있지만 인터페이스는

type Point = [number, number];
}

대표 기능

둘 다 함수를 나타낼 수 있지만 유형 별칭이 훨씬 더 간결하고 명확합니다.

type Log = (message: string) => void;

interface Log {
  (message: string): void;
}

유니온 유형 만들기

유형 별칭만 공용체 유형을 나타낼 수 있습니다.

type Status = "pending" | "working" | "complete";

객체 표현

둘 다 개체의 유형을 나타낼 수 있으며 가장 간결한 접근 방식인 유형 별칭도 등호 연산자(=)로 인해 개체 리터럴에 대한 변수 할당에 대해 문이 혼동될 수 있습니다.
여기에 동점이 있다고 말할 수 있습니다.

type Person = {
  name: string;
  score: number;
};

interface Person {
  name: string;
  score: number;
}

개체 구성

유형 별칭과 인터페이스는 둘 다 객체를 함께 구성할 수 있습니다.

type Name = {
  firstName: string;
  lastName: string;
};
type PhoneNumber = {
  landline: string;
  mobile: string;
};
type Contact = Name & PhoneNumber;

interface Name {
  firstName: string;
  lastName: string;
}
interface PhoneNumber {
  landline: string;
  mobile: string;
}
interface Contact extends Name, PhoneNumber {}

라이브러리 작성

유형 별칭에는 없는 인터페이스의 중요한 기능 중 하나는 선언 병합입니다.

interface ButtonProps {
  text: string;
  onClick: () => void;
}
interface ButtonProps {
  id: string;
}

이는 타사 라이브러리에 누락된 유형 정보를 추가하는 데 유용합니다. 라이브러리를 작성 중이고 이 기능을 허용하려면 인터페이스가 유일한 방법입니다.