5강의 메인주제는 interface였다.
1.인터페이스 소개 및 변수를 정의하는 인터페이스
interface: 반복되는 타입들에 대해서 하나의 interface로 정의하고 타입으로 사용
interface를 쓰면 중간에 오탈자가 생기거나 다른사람이 보더라도 해당 interface의 동일한 규칙이 있음을 알 수 있다.
인터페이스의 기본 형태는 다음과 같다.
interface User {
age:number;
name:string;
}
만약 변수에 특정 인터페이스를 지정했는데 해당 인터페이스와 스펙(구조)가 같지 않다면 다음과 같이 TS가 에러를 보여준다.
인터페이스와 동일한 형태를 띄도록 수정하면 다음처럼 에러가 사라진다.
2. 함수의 인자를 정의하는 인터페이스
다음으로 함수에 인터페이스를 적용하는 방법을 알아 보겠다. 첫번째는 함수의 인자를 정의하는 인터페이스다.
만약 인자에 any라는 값을 넣으면 다음과 같이 에러가 발생하지 않고 함수를 사용할 수 있다.
하지만 any의 사용은 TS의 장점을 무력화 시키는 방식으로 권장되지 않는다. 만약 user라는 함수의 인자에 위에서 정한 User라는 interface를 적용하면 다음처럼 number, string, object를 함수내부의 인자로 전달하면 에러가 발생한다.
함수호출시에 올바른 데이터를 넘겨주게 되면 에러 없이 정상적으로 작동한다.
3. 함수의 구조를 정의하는 인터페이스
인터페이스가 빛을 발하는 구간은 API를 호출해서 그 API스펙이 어떠한지 인터페이스로 정의한 다음 활용하는 부분이다.
함수의 스펙에 인터페이스를 활용하는 방법은 다음과 같다.
먼저 interface로 함수의 타입을 지정하는 예약어를 먼저 선언하고 함수의 타입을 다음과 같이 지정한다.
함수의 interface기본값은 다음과 같다.
interface FunctionBasic {
// (인자:인자의 타입): 반환되는 값의 타입
(a:string, b:string): string
}그다음 해당 인터페이스를 함수의 타입으로 지정하면 되는데 예시는 다음과 같다.
두개의 숫자를 받아서 마지막에 숫자를 반환하는 타입을 sumFunction이라는 interface로 정의했고 함수 sum은 sumFunction형식을 지녀야하기에 위와 같은 에러가 발생한다.
수정하면 다음과 같이 나온다.
함수 호출시에 마지막 sum 호출처럼 올바르지 않은 값을 넘겨주면 에러가 발생한다.
4. 인덱싱 인자를 정의하는 인터페이스
타입스크립트의 interface에서는 인덱싱 방식을 활용하여 객체 속성에 접근하는 방법을 정의할 수 있다.
이를 통해 다양한 속성에 대한 타입 정보를 제공할 수 있으며 객체의 속성에 접근할 때 사용되는 키의 타입과 값의 타입을 정의하는 데 사용된다.
배열의 어떤 인덱싱 방식에 대해서 인터페이스를 정의할 수 있다 까지가 핵심이며 enum으로 연결된다.
5. 인터페이스 딕셔너리 패턴
TS는 interface를 사용하여 딕셔너리 패턴을 정의할 수 있다. 딕셔너리 패턴은 객체가 {key: value} 쌍의 형태를 갖는 경우에 사용되고 이를 통해 동적으로 키를 사용하여 값을 저장하고 접근할 수 있다.
장점은 Object를 가지고 조작을 할 때마다 TS가 자동적으로 뭔가를 추론해서 이렇게 타입까지 정의를 미리 해준다. 이것이 바로 TS의 추론이다.
6. 인터페이스 확장(상속)
인터페이스는 특정 인터페이스를 상속 받아서 자신이 가진 속성을 확장시킬 수 있다.
예를들어 다음은 확장을 하지 않을 경우에는 내부 타입을 다음과 같이 지정해줬다면
확장을 사용하면 다음과 같이 코드의 중복을 피하면서 필요한 속성을 상속받을 수 있다.
확장한 interface로 변수에 타입 지정시 다음과 같이 상속받은 속성들도 필수 속성이 된다.
다음처럼 상속 받은 속성을 모두 입력해주면 에러가 사라진다.
