TypeScript: 인터페이스의 속성만 매개변수로 허용

그래서 최근에 팀원과 Angular Pipe 작업을 하고 있었습니다. 우리는 주소 인터페이스가 있었고 주소 인터페이스의 속성인 인수만 허용하기를 원했습니다. 그러나 당신은 그것을 어떻게 정의합니까?

매우 간단합니다. keyof 연산자를 사용해야 합니다!

상호 작용

먼저 주소 인터페이스를 확인해야 합니다. 아래는 우리가 사용하는 것의 보다 단순화된 버전이지만 이 예제에 적합합니다.

interface Address {
    streetname: string;
    housnumber: number;
    postal: string;
    city: string;
}

keyof 연산자 사용

keyof operator 을 사용하면 매개변수가 인터페이스의 속성과 같아야 한다고 말할 수 있습니다.

function fakeFunc(param: keyof Address): void {
    console.log(param);
}

이제 우리는 이 함수가 Address 인터페이스에 존재하는 매개변수와 함께만 사용되는지 확인할 수 있습니다. 그렇지 않으면 TypeScript 인터페이스를 얻게 됩니다.

기능 확인

example에서 'streetname' 매개변수가 허용되지만 'random' 매개변수가 "'"random"' 유형의 인수를 'keyof Address' 유형의 매개변수에 할당할 수 없습니다."라는 오류를 표시하는 것을 볼 수 있습니다. 인터페이스에 없기 때문입니다. (컴파일 오류를 보려면 확인을 클릭해야 합니다CodeSandbox )

감사!

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

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

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