inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

실습 풀이 4 - 오류 해결 및 구체적인 타입 정의

타입과 인터페이스의 차이점은 무엇인가요?

304

김예란

작성한 질문수 14

9

안녕하세요, 강의 듣다가 궁금한게 생겼는데요.

타입과 인터페이스의 차이점이 뭔가요?

둘 다 중복된 코드를 제거 하기 위해 사용하는게 동일해보여서요. 미리 선정의된 타입/인터페이스를 하단의 코드에서 임포트해서 사용하는 듯 한데... 둘이 사용하는 상황이 어떻게 다른지, 용도가 서로 어떻게 다른지 궁금합니다!! :-)

typescript javascript es6

답변 1

13

캡틴판교

오 예란님 오랜만이에요! :) 이전에 열심히 들으시면서 인사이트 있는 질문들을 많이 주셨었는데.. 여기서 또 뵙네요 :)

타입(타입 별칭)과 인터페이스... 얘기를 하자면 정말 길어집니다. 그래서 간단히 결론부터 말씀 드리면 객체를 다룰 때는 인터페이스를 그 외에는 타입을 쓰시면 어떨까 해요. 타입은 인터페이스로 선언할 수 없는 구조를 정의할 수 있습니다. 예를 들면, 

type Yeran = string | number | boolean;
type YeranFavoriteFood = 'noodle' | 'pizza' | 'somewhat';

이건 인터페이스로 선언이 불가능한 타입 구조입니다 :) 그리고 인터페이스는 아래와 같이 동일한 이름으로 중복 선언해서 확장이 가능합니다.

interface Yeran {
name: string;
age: number;
}

interface Yeran {
thankyou: string;
}

const yeran: Yeran = {
name: 'yeran',
age: 21,
thankyou: '예란님 감사해요 :)',
};

이 외에도 여러 가지 특징이 있긴 하는데요. 앞서 말씀 드린 것처럼 객체 타입을 정의할 때는 인터페이스, 그 외에는 타입을 쓰시는 것으로 규칙을 잡으시고 추후 경험을 쌓으시면서 다시 기준을 잡으시면 어떨까 합니다 :)

수강해 주셔서 감사해요!

TSLint

0

66

1

vscode eslint server 오류

0

75

1

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

0

77

1

live server 설치 오류

1

368

2

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

0

284

2

npm i 설치 이유 문의

1

403

3

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

2

289

3

vue 에서 jquery 사용 문제

1

692

2

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

1

499

2

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

1

542

1

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

1

452

2

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

2

455

1

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

1

443

2

빨간줄 에러 질문드립니다

1

488

2

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

1

356

2

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

2

393

2

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

1

565

2

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

1

354

2

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

1

323

2

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

1

390

1

전화번호부 타입선언

1

265

2

타입을 전역으로 분리

1

592

2

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

1

459

1

Git 관련 질문이 있습니다

1

669

2