[TypeScript]Interface

feelslikemmmm·2021년 7월 1일
1

TypeScript

목록 보기
14/15
post-thumbnail

자바와 같은 다른 언어에서 인터페이스는 클래스를 구현하기 전에 필요한 메서드를 정의하는 용도로 쓰입니다

타입스크립트에서는 좀 더 다양한 것들을 정의하는데 사용됩니다

타입스크립트에서 인터페이스로 정의할 수 있는 타입 종류와 인터페이스로 타입을 정의하는 방법을 알아봅시다

객체의 타입

인터페이스 키워드 오른쪽에 타입의 이름을 적어줍니다

그리고 괄호 안에 필요한 속성을 입력을 해주면 됩니다

예시에서 age 속성은 number 타입이기 때문에 s2와 같이 문자열을 입력하면 에러가 발생합니다

선택적 프로퍼티 (Optional Properties)

선택 속성은 객체에서 없어도 되는 속성을 얘기합니다

age 오른쪽에 ? 기호(optional parameter)를 사용했는데 이렇게 사용하게 되면 age는 선택 속성이 됩니다

s1처럼 name만 입력을 해줘도 정상적으로 동작합니다

? 기호를 사용하지않고 age를 number 타입 혹은 undefine 처럼 union 타입으로 정의하게 되면 에러가 발생합니다

이것은 선택 속성과는 조금 다른데요,

s1에 age를 입력하지 않아도 되는 것이 아니라 number 타입으로 전달해주거나 혹은 undefined를 전달해야 하는 것이죠.

읽기전용 프로퍼티 (Readonly properties)

readonly 라는 키워드를 이용해서 name 속성을 정의했습니다

readonly 속성은 이름 그대로 읽기 전용 이기 때문에

s1.name을 사용해 값을 변경하려고 하면 에러가 발생합니다

readonly vs const
readonly와 const 중에 어떤 것을 사용할 지 기억하기 가장 쉬운 방법은 변수와 프로퍼티중 어디에 사용할지 질문해 보는 것입니다. 변수는 const를 사용하고 프로퍼티는 readonly를 사용합니다
타입스크립트 핸드북

인덱서블 타입 (Indexable Types)

이번에는 [key: string]: string | number; 처럼 조금 특이하게 타입을 정의 했습니다

이것을 인덱스 타입이라고 부르는데요

인터페이스에서 속성 이름을 구체적으로 정의하지 않고 값의 타입만 정의하는 것을 인덱스 타입이라고 부릅니다

지금 저 타입안에서 key에 해당 하는 부분은 중요한 이름은 아니고 아무렇게나 적어도 됩니다

지금 예시에서는 속성 이름이 문자열인 모든 속성에 대해서 값의 타입을 string 혹은 number 타입을 정의하고 있습니다

따라서 s1에 grade는 인터페이스에 정의되어 있지 않지만 에러가 발생하지 않는 것이구요

여기서 age 같은 경우에는 에러가 발생합니다

그 이유는 age 속성의 타입이 인덱스 타입에 해당하는것이 아니라

인터페이스에서 명시적으로 지정한 age 타입에 해당하기 때문에 string 타입을 사용할 수 없어서 그렇습니다

함수 타입 (Function Types)

인터페이스로 함수 타입을 정의할 수도 있습니다

왼쪽에 매개변수를 입력하고 오른쪽에 반환 타입을 입력했습니다

이것은 아래 코드와 같은 의미 입니다

인터페이스로도 함수 타입을 정의할 수 있다는 것을 보여드린 겁니다

자바스크립트에서는 함수도 속성값을 가질 수 있습니다

인터페이스로 함수 타입을 정의할때 totalCall과 같이 함수의 속성값도 같이 정의할 수 있습니다

그래서 getUser라는 함수를 만들어 놓고 내부에서도 속성 값을 사용할 수 있고

함수 바깥에서 getUser.totalCall = 0; 처럼 속성값을 입력할 수가 있습니다

이 코드를 실행해보면 1과 2가 정상적으로 출력됩니다

인터페이스 확장하기 (Extending Interfaces)

클래스처럼 인터페이스들도 확장(extend)이 가능합니다.

이는 한 인터페이스의 멤버를 다른 인터페이스에 복사하는 것을 가능하게 해주는데

인터페이스를 재사용성 높은 컴포넌트로 쪼갤 때 유연함을 제공해줍니다.

예시에서 Person 이라는 인터페이스를 extends라는 키워드를 이용해서 확장해 새로운 인터페이스를 만들고 있습니다

Korean 인터페이스는 위와 같은 인터페이스를 만든 것과 똑같습니다

인터페이스는 여러 인터페이스를 확장할 수 있어 모든 인터페이스의 조합을 만들어낼 수 있습니다.

지금 Korean은 Person과 Programmer라는 인터페이스를 확장했는데요,

따라서 지금 위에 있는 Person과 Programmer의 속성이 Korean에 모두 들어있습니다

교차 타입 (Intersection Types)

이번 예시에서는 & 기호를 사용했습니다.

& 기호는 교차 타입인데요, 교차 타입은 유니언 타입과 밀접한 관련이 있지만 사용 방법은 매우 다릅니다.

교차 타입은 여러 타입을 하나로 결합합니다.

위 예시처럼 교차 타입을 인터페이스에서 사용하면 여러 인터페이스를 하나로 합칠 수 있습니다

교차 타입은 집합에서의 교집합과 같은 기능을 합니다

예시에서 타입 PP는 오른쪽에 있는 Person 과 Product 의 모든 속성 값을 포함합니다

이 포스팅은 이재승 개발자님의 타입스크립트 시작하기 강의와
타입스크립트 공식 웹 사이트 프로젝트인 TypeScript-Handbook 을 통해서
공부한 내용을 기반으로 작성되었습니다

profile
꾸준함을 잃지 말자는 모토를 가지고 개발하고 있습니다 :)

0개의 댓글