- 개요안녕하세요. 이번 시간에는 TypeScript interface에 대해 알아보겠습니다. TypeScript에서 Obejct 타입을 선언할 때 interface와 type을 사용합니다. JavaScript에서 객체를 접근을 해야 하는 상황이 많습니다. TypeScript는 객체를 선언하고 그냥 접근하게 되면... 접근을 할 수 없습니다. (JavaScript는 그냥 되는데... 불편하군... )
이렇기 때문에 우리는 interface를 선언해서 접근을 합니다. - 사용법선언 방법 및 사용법
object 타입으로 선언했을 때와 다르게 User interface를 활용해 user 객체 name 속성에 접근하면 Error가 발생하지 않습니다. optional, readonly, index 사용법
gender: 속성은 옵셔널(물음표) 형태이기 때문에 사용하지 않으면 선언을 피할 수 있습니다. birth: 속성은 읽기 전용으로 선언했기 때문에 값을 수정하려고 하면 Compile Error가 발생합니다. [key:number]: 속성은 index 방식으로 여러 개를 한 번에 사용할 수도 있지만, 사용하지 않으면 선언을 피할 수 있습니다. Class 사용
Class를 사용하기 때문에 interface에 함수를 정의해 사용할 수도 있습니다. 상속 Class가 Interface를 상속을 받을 때 implements 키워드를 사용했습니다. 만약 Interface 끼리 상속을 하게 되면 어떻게 해야 될까요? extends 키워드를 사용하면 interface들끼리 상속이 가능합니다.
interface 끼리 상속은 extends를 사용하며 class 상속은 implements를 사용합니다. 이번 시간에는 TypeScript에서 interface를 다루는 방법에 대해 알아봤습니다. typescript03 타입스크립트 인터페이스기존에 자바스크립트에는 인터페이스라는 개념이 없었습니다. 하지만 타입스크립트를 이용해 인터페이스를 사용할 수 있게 됐습니다. 인터페이스라는 용어에 대해서 한번 짚고 넘어갈 필요가 있습니다. 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약 같은 것입니다. 실생활에서 예를들어 '타이핑' 이라는 인터페이스가 있다고 친다면, 키보드의 K 를 누르면 알파벳 'K' 가 모니터에 출력된다. 는 눌렀을 때 어떠한 문자가 출력된다는 '타이핑' 인터페이스를 지키고 있는 것입니다. 역으로 타이핑 인터페이스(규약)를 지키고 있다면 특정 문자가 모니터에 출력이 될 것입니다.
그럼 타입스크립트에서 인터페이스를 어떻게 이용하는지 알아보겠습니다. 📝 목차
인터페이스 사용타입스크립트에서 인터페이스를 사용하는 방법을 알아보겠습니다.
여기에 키보드를 만드는 함수가 있습니다. 이 함수는 주문서를
받는데 그 주문서에 적혀있는 내용은 성분인 그런데 만약 주문서에 작성할 내용이 엄청 많아지면 코드가 너무 지저분해질것이 분명합니다. 이 때 타입스크립트의 interface 를 사용합니다. 다음 코드는 인터페이스를 사용했을 때의 코드입니다.
확실히 가독성이 더 좋아진것을 볼 수 있습니다. 그리고 주문서의 항목란이 많아질 경우에도 문제가 없을것 같습니다. 선택적 프로퍼티각인이라는 항목이 주문서에 추가가 되었습니다. 하지만 이 각인은 고객이 이름을 적어주었을 경우에만 새겨줍니다. 이렇게 선택적으로 어떠한 옵션을 주어야할 때 선택적 프로퍼티를 이용합니다. 프로퍼티 이름의 끝에
선택적으로 이름을 넣어주었습니다. 읽기전용 프로퍼티주문을 했는데 고객이 각인될 내용을 바꾸고 싶다합니다. 주문이 들어가면 바꿀 수 없는 시스템이라 가정을 한다면 읽기전용으로 하고싶은 프로퍼티앞에
추가적으로 배열을 읽기전용으로 하고싶다면
push, 인덱스 접근 후 할당, 새로운 string 배열인 temp 에 할당같은 것들이 전부 불가능하지만 Type Assertion 을 이용하면 가능합니다. 함수 타입인터페이스의 프로퍼티로 함수 시그니쳐를 정의할 수 있습니다.
만들어진 키보드를 체크하는 인터페이스에는 sound(누르는 소리) 와 weight(누르는 가중치)를 파라미터로 받습니다. 만약 누르는 힘이 10 이상 든다면 제품을 쓸 수 없다고 가정했습니다. 인터페이스 프로퍼티로 정해준 함수
시그니쳐의 파라미터의 이름과 구현하는 부분의 파라미터 이름이 꼭 동일할 필요는 없습니다. Indexable 타입Indexable 타입 예제
StringArray 가 number 로 인덱스 될 때 string을 리턴합니다. 자바스크립트 색인의 동작방식타입스크립트로 들어가기전에 자바스크립트의 객체 프로퍼티를 접근하는 방법을 살펴봅니다. 자바스크립트는 객체의 프로퍼티에 접근을 할 때 문자열로 접근할 수 있습니다.
그리고 객체로도 객체의 프로퍼티로 지정할 수 있습니다.
자바스크립트 색인의 동작방식에 의해 객체의 색인에 접근할 때 내부적으로
Indexable 사용법자바스크립트에서 사용하듯 타입스크립트에서 객체를 하나 만들어보겠습니다.
하지만 이 코드는 타입스크립트에서는 에러를 발생합니다.
해결방법은 index signature 를 사용하면 됩니다.
주의해야할 점1. index signature 의 타입은 문자열 또는 숫자만 가능합니다.
2. 문자열 색인과 숫자 색인이 모두 존재할 경우, 숫자로 된 색인의 값의 타입은 문자열로 색인 된 값 타입의 서브타입이어야 합니다.
위의 코드가 에러인 이유는 처음에 말씀드렸던 자바스크립트가 색인을 할 때
유니온 타입을 이용한 Index Signature
유니온 타입을 이용하려면 인덱서는 그 아래 프로퍼티의 속성들을 모두 가지고 있어야한다. 제한된 리터럴문자열 셋매핑된 유형을 사용해 index signature 가 문자열 조합의 구성원이어야 사용할 수 있게끔 제약할 수 있다.
중첩된 Index Signature
이렇게 했을 경우 다음과 같은 오타는 잡지 못합니다.
해결책은 다음과 같습니다. nest, children, subnodes 등등과 같은 이름을 갖는 프로퍼티를 만들고 그 안에 내장시킵니다.
이제 다음과 같은 코드는 에러를 뱉습니다.
NestedDOM다음 코드는 위의 NestedCSS 를 응용해 만들어봤습니다. NestedDOM 에 대한 인터페이스입니다.
NestedDOM 인터페이스를 구현한 객체입니다.
위의 코드는 다음 html 로 기대됩니다.
NestedDOM 을 파싱하는
readonly 프로퍼티
readonly 를 앞에 붙이게되면 읽기전용이됩니다. 클래스 타입클래스에서도 인터페이스를 사용할 수 있습니다.
위의 코드는 에러를 뱉습니다.
추가적으로 인터페이스를 구현한 클래스의 타입은 인터페이스가 될 수 있습니다.
확장 인터페이스인터페이스도 클래스처럼
Hybrid 타입자바스크립트의 프로퍼티에는 함수도 포함될 수 있습니다. 확장 인터페이스에서의 예제를 응용해본다면 InputNode 는 click 메서드를 통해 사용자의 이벤트를 받을 수 있어야할 것 같습니다.
참고문서
|