TypeScript 인터페이스를 사용하는 방법?

인터페이스는 개체의 청사진입니다. 어떤 속성이 있는지, 필수 속성과 선택적 속성, 보유하고 있는 데이터 유형을 알려줍니다.

TypeScript has become more popular than ever. For me it was not love at first sight, but now we are connected. I don't start a project without TypeScript! 😅 So if you experience the same feelings, your not alone 🤗

TypeScript의 대부분의 모델은 인터페이스와 클래스의 조합입니다. Aninterface은 클래스 또는 개체의 청사진입니다. 이IPizza 인터페이스에서 피자가 가진 모든 속성을 정의합니다. 각 속성에서 정보가 어떤 종류의 데이터 유형인지 정의합니다.
interface에 정의된 모든 속성은 필수입니다. 선택 사항으로 만들려면 ? 를 사용해야 합니다. 예를 들어 propertyName?: string 인터페이스에서 이 속성을 정의하는 경우 선택 사항입니다. TypeScript는 속성이 Object 에 누락된 경우 오류를 표시하지 않습니다. 반면에 속성이 필요한 경우 누락되면 오류가 발생합니다.

속성이 interface에 정의되지 않은 경우 데이터가 청사진을 따르지 않기 때문에 TypeScript 컴파일러에서 오류가 발생합니다.

예시

우리는 모두 피자에 대한 속성을 생각해낼 수 있습니다.

이름

슬라이스(슬라이스의 수)

토핑

가격

치즈크러스트

비건

채식주의자

그것들을 인터페이스에 넣고 어떤 종류의 데이터 유형인지 결정합시다.

interface IPizza {
    name: string;
    slices: number;
    toppings: string;
    price: number;
    cheescrust: boolean;
    vegan?: boolean;
    vegetarian?: boolean;
}

위의 예는 피자에 대한 interface를 보여줍니다. 모든 속성에 단일 데이터 유형을 부여했습니다. 이제 피자 개체를 만들고 인터페이스를 사용하여 올바른 속성을 갖도록 할 수 있습니다.

const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: 'Tomato sauce, BBQ sauce',
    price: 15,
    cheescrust: true
}

이제 pizza는 인터페이스에 따릅니다. interface는 이제 데이터 유효성 검사의 한 형태입니다. interface에 없는 속성이나 잘못된 데이터 유형이 있는 속성을 추가하면 TypeScript에서 오류가 발생합니다.

const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: ['Tomatosauce', 'BBQ sauce'],
    price: 15,
    cheescrust: true,
    meat: true
}

이 개체를 사용하면 오류가 발생합니다! 👇 (확인 CodeSandbox for yourself )

여러 값

하지만 토핑이나 크기를 제공하기 위해 문자열이나 숫자의 배열을 원하면 어떻게 해야 할까요? 우리는 그것을 꽤 빨리 할 수 ​​있습니다. string[]에 number[] 또는 interface를 씁니다.

interface IPizza {
    name: string;
    slices: number;
    toppings: string[];
    price: number;
    cheescrust: boolean;
    sizes: number[];
    vegan?: boolean;
    vegetarian?: boolean;
}

이제 pizza 개체가 유효합니다.

const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: ['Tomatosauce', 'BBQ sauce'],
    price: 15,
    cheescrust: true,
    vegan: false,
    vegetarian: false,
    sizes: [0, 1, 2, 3, 4]
}

여러 피자 개체가 포함된 배열을 입력하려는 경우 IPizza[] 와 동일한 방식으로 수행할 수 있습니다.

const pizzaArray: IPizza[] = []

조건부 값

때로는 속성이 string 또는 null 일 수 있다고 말할 것입니다. 이 경우 파이프 | 둘 다임을 보여줍니다.

// IPizza properties with an array of values.
interface IPizza {
    name: string;
    slices: number;
    toppings: string[];
    price: number;
    cheescrust: boolean | null;
    sizes: number[];
    vegan?: boolean;
    vegetarian?: boolean;
}

예를 들어 cheescrust는 선택 사항이지만 부울 또는 null일 수 있습니다.

const pizza: IPizza {
    name: 'Pizza Tuna',
    slices: 8,
    toppings: ['Tomatosauce'],
    price: 11.99,
    cheescrust: null,
    vegan: false,
    vegetarian: false,
    sizes: [0, 1, 2, 3, 4]
}

피자 참치의 경우 치즈 크러스트를 제공하고 싶지 않다고 말하므로 값을 null 로 지정합니다.

감사!

이 이야기를 읽은 후 새로운 것을 배웠거나 새로운 것을 창조하도록 영감을 받았기를 바랍니다! 🤗 그렇다면 이메일(이 페이지 상단으로 스크롤)을 통해 구독하거나 여기 Hashnode에서 저를 팔로우하세요.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

답변으로 질문이나 할 말이 남았다면 아래로 스크롤하여 메시지를 입력하세요. 비공개로 하고 싶을 때 를 보내주세요. 제 디엠은 언제나 열려있습니다😁