inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

타입스크립트 입문 - 기초부터 실전까지

유니온 타입의 특징

유니온 사용 이유가 헷갈려요 ㅠㅜ

472

김 코딩왕 김챡씨

작성한 질문수 7

4

typescript 입문하기가 너무 어려웠는데 선생님 덕분에 차츰차츰 배우고 있는 학생이에요!

인터페이스 Developer와 Person의 공통 멤버인 name만 사용할 수 있다고 하셨는데

유니온을 왜 사용하는건지 감이 잘 안와요.. name 하나만 사용할거면 타입을 하나만 정해도 되는거 아닌가요? 보통 뭘 할때 많이 사용 되는 개념인지 예시 하나만 들어주실 수 있으신가요?? ㅠㅜㅠ

// 특징: 모든 타입의 공통적인 멤버에만 접근 가능
interface Developer {
    name: string,
    skill: string
}

interface Person {
    name: string,
    age: number
}

function askSomeone(someone: Developer | Person) {
    someone.name
}

es6 javascript typescript

답변 2

3

캡틴판교

안녕하세요 코딩왕 챡씨님, 예나님, 좋은 질문해 주셨네요 :) 저도 처음 유니온 타입과 인터섹션 타입을 접했을 때 타입 추론 관점에서 헷갈리는 부분들이 많았어요. 지금은 타입스크립트가 많이 편해진 상황에서 유니온 타입을 바라보면 참 좋은 문법이구나 라는 생각이 많이 듭니다 :)

유니온 타입의 가장 큰 장점이자 실제로 많이 활용되는 사례는 아래와 같이 하나의 변수에 여러 개의 타입을 정의하고 싶은 경우입니다.

type ProjectId = string | number;

var newProjectId: ProjectId = 100;
var oldProjectId: ProjectId = '100';

위 코드에서 사용한 type은 타입 별칭이라고 하는건데 강의 뒤쪽에 소개가 되어 있어요. 첫 번째 줄에서 ProjectId라는 타입을 정의하는데 그 타입은 유니온 타입을 이용해서 string과 number를 모두 받을 수 있게 정의하였습니다.

그리고나서 아래 코드를 보시면 newProjectId와 oldProjectId에 첫 번째 줄에서 정의한 ProjectId 타입을 지정했어요. 그래서 newProjectId에서는 숫자를 정의할 수 있고 oldProjectId는 문자를 정의할 수 있습니다. 위와 같은 상황이 실제 서비스 구현하실 때 많이 마주하시게 될텐데요. 자바스크립트는 타입이 없다보니 숫자로 취급하던 값을 무의식적으로 문자로 변환하실 수도 있습니다. 경우에 따라서는 내가 의도하지 않게 타입이 바뀌었더라도 애플리케이션 실행에는 영향이 없을 수도 있는데 가끔은 크리티컬한 에러가 발생할 수 있습니다. 그래서 좀 더 명시적으로 에러가 나지 않는 방향으로 코딩을 하자고 하는게 바로 코드에 타입을 추가해서 개발자의 의도를 한번 더 파악해보자. 이런 느낌이라고 보시면 좋을 것 같아요 :)

0

김 코딩왕 김챡씨

감사합니다 :)

1

heedori

저도 이거 궁금했습니다!

TSLint

0

67

1

vscode eslint server 오류

0

80

1

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

0

77

1

live server 설치 오류

1

372

2

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

0

286

2

npm i 설치 이유 문의

1

407

3

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

2

289

3

vue 에서 jquery 사용 문제

1

696

2

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

1

501

2

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

1

544

1

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

1

453

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

355

2

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

1

325

2

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

1

391

1

전화번호부 타입선언

1

267

2

타입을 전역으로 분리

1

593

2

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

1

460

1

Git 관련 질문이 있습니다

1

672

2