inflearn logo
강의

Course
Instructor

TypeScript Introduction - From Basics to Practice

Introduction and application of type guard

만약에 인터페이스 3개를 상속 받았을 경우에 타입가드를 쓴다면

277

photo

2 asked

1


interface Samsung{
    name:string;
    phonenumber: number;

}
interface KIA{
    name: string;
    carnumber: number;

}
interface Apple{
    name: string;
    Applenumber: number;

}
var phone : Samsung | KIA | Apple;

function IsSamsung(typeProduct : Samsung | KIA | Apple): typeProduct is Samsung{  // 삼성이 아니라면 phone = KIA | Apple
        return (typeProduct as Samsung).phonenumber !== undefined; 
}

function IsKIA(typeProduct : Samsung | KIA | Apple): typeProduct is KIA{  // KIA 가 아니라면 Apple
        return (typeProduct as KIA).carnumber !== undefined; 
}

if(IsSamsung(phone)){
    phone.phonenumber;
}else{
    if(IsKIA(phone)){
        phone.carnumber;
    }
    else{
        phone.Applenumber;
    }
}
이런 식으로 함수를 2개 써서 하는게 최선일까요?

es6 typescript javascript

Answer 2

2

captain

안녕하세요 photo님, 좋은 질문 주셨네요 :) 최종적으로 사용하고 싶은 타입이 Apple인 경우에는 아래와 같이 바로 타입을 필터링해서 사용하시면 될 것 같아요 :)

if (isApple(phone)) {

  // ...

}

1

photo

function ThreeTypeGuard(typeProduct: Samsung| KIA | Apple):any {
    if((typeProduct as Samsung).phonenumber !== undefined){
        return typeProduct as Samsung;
    }
    else if((typeProduct as KIA).carnumber !== undefined){
        return typeProduct as KIA;
    }
    else{
        return typeProduct as Apple;
    }
    
}
phone = {
    name : "abc",
    //phonenumber : 123,
    //carnumber : 123,
    Applenumber : 123,
}
if(ThreeTypeGuard(phone)){
    phone.Applenumber
}
이렇게 하면 한개 함수로 3개를 다 처리 할수 있는거 같습니다.

TSLint

0

67

1

vscode eslint server 오류

0

82

1

안녕하세요. 기본타입- 튜플, 객체, 진위값 부분의 영상의 화면이 나오질 않습니다.

0

77

1

live server 설치 오류

1

374

2

강의 교안 pdf 는 따로 제공하지않나요?

0

287

2

npm i 설치 이유 문의

1

407

3

index.ts Delete `␍`eslintprettier/prettier 오류(빨간줄) 해결

2

290

3

vue 에서 jquery 사용 문제

1

697

2

TSLint 확장 프로그램은 현재 지원하지 않는다고 합니다.

1

501

2

강의 내용처럼 노란 밑줄이 작동하지 않아서 유사 질문들을 실행해보았는데요

1

544

1

section 3-1 JSdoc 타입이 추론되지 않아서 다음과 같이 수정했는데 이거 맞나요?

1

454

2

함수에 리턴 안됐다고 노란밑줄이 쳐져야하는데 없습니다

2

457

1

파일이 다른데 식별자가 중복되었다고 뜹니다.

1

445

2

빨간줄 에러 질문드립니다

1

489

2

마우스 갖다대면 리턴값 설명 나오는 거 질문드려요

1

358

2

js에서 @ts-check 적어도 체크하지 못하는 문제입니다

2

395

2

index.html에서 타입스크립트 콘솔 찍는 법 질문드립니다

1

567

2

섹션 1-3 추론 질문드립니다

1

356

2

왜 api쪽에는 왜 에러가 안나는지 궁금합니다.

1

325

2

const item1을 선언했을 때 타입을 선언해줘도 괜찮을까요?

1

391

1

전화번호부 타입선언

1

267

2

타입을 전역으로 분리

1

594

2

객체 선언 시 구분자는 쉼표, 세미콜론 모두 사용가능한건가요?

1

460

1

Git 관련 질문이 있습니다

1

672

2