타입스크립트/타입스크립트 고급

인터페이스

webmaster 2022. 10. 7. 17:10
728x90

변수를 정의하는 인터페이스

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

//변수에 인터페이스를 적용하는 방법
var seho: User ={ //반복되는 타입에 대해서 하나의 인터페이스를 정의해서 동작시킬 수 있다.
    age: 33,
    name: '세호'
}
  • 인터페이스를 정의해, 공통적으로 동작해야 하는 클래스의 정의를 할 수 있다.
  • 변수에 인터페이스를 정의하면, eslint에서 해당 인터페이스의 필드 값을 구현하라고 알려준다.

함수의 인자를 정의하는 인터페이스

//함수에 인터페이스 활용
function getUser(user:User){ //이 함수는 특정 형식을 중시하는 데이터만 받겠다
    console.log(user)
}
const usr = {
    name: '캡틴',
    age: 100
}
getUser(usr); //usr 같은 경우 정의했던 User 타입이어야 오류가 나지 않는다
  • getUser를 호출하는 파라미터의 타입은 반드시 User 타입이어야 한다.

함수 구조를 정의하는 인터페이스

//함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction{
    //함수의 전체 모습까지 인터페이스로 정의해서 제한을 할 수 있다.
    (a: number, b: number): number; //숫자 2개를 받아 숫자를 리턴한다
}

var sum: SumFunction;
sum = function (a: number, b: number){
    return a + b;
}
  • 함수의 전체 모습의 인터페이스로 정의하여 제한을 할 수 있다.
    • 숫자 두 개를 파라미터로 받아 숫자를 반환한다.

인덱싱 방식을 정의하는 인터페이스

//인덱싱
interface StringArray {
    [index: number]: string //index는 숫자, 반환음 숫자
}

var arr: StringArray = ['a', 'b', 'c']
//arr[0] = 10 //특정 인덱스로 접근해서 작업을 할 때, 타입이 string 이므로 오류가 발생한다.
  • 배열과 같이, 인덱싱에 대한 정의를 제한할 수 있다.
  • 반환 값은 string, 내부 index는 int로 제약을 걸어 arr[0] = 10과 같이 숫자 값을 대입하려고 하면 오류가 발생한다.

딕셔너리 패턴

//인터페이스 딕션너리 패턴
interface StringRegexDictionary {
    [key: string]: RegExp //key=string, value=RegExp
}

var obj: StringRegexDictionary = {
    //sth: /abc/
    cssFile: /\.css$/,
    jsFile: /\.js$/,
}
//obj['cssFile'] = 'a' //오류가 발생, value에 정규식이 오지 않았기 떄문
Object.keys(obj).forEach(
    function (value){ //타입 추론 기능 또한 사용할 수 있다.

    }
)
  • 딕셔너리 패턴을 활용하여, json 내부에 사용되는 프로퍼티의 타입을 제약할 수 있다.
  • 타입 추론 기능 또한 사용 가능하므로 편리하다.

인터페이스 확장(상속)

//인터페이스 확장
interface Person {
    name: string;
    age: number;
}

interface Developer extends Person { //중복되는 프로퍼티를 상속 받을 수 있다
    language: string;
}

var capt: Developer = {
    language: 'hi', //name, age까지 구현해야 오류가 안난다.
    age: 100,
    name: '캡틴'
}
  • 중복되는 프로퍼티 값은 상속을 사용할 수 있다.
  • 상속을 통해 구현된 인터페이스를 사용하는 곳에서는 부모의 것 또한 구현해주어야 에러가 발생하지 않는다.
    • Developer 같은 경우 language 프로퍼티밖에 없지만, Person을 상속받았기에 age, name 또한 구현해야 한다 
728x90

'타입스크립트 > 타입스크립트 고급' 카테고리의 다른 글

제네릭  (0) 2022.10.11
클래스  (1) 2022.10.11
이넘  (0) 2022.10.10
연산자를 이용한 타입 정의  (0) 2022.10.10
타입 별칭  (0) 2022.10.10