인터페이스는 객체의 구조를 정의하는 일종의 규약이다.

인터페이스 사용의 예시

interface Person {
	name: string;
	readonly age: 10; // 읽기전용 프로퍼티
	tall?: number; //선택적 프로퍼티
	sayHi(): void; // 호출시그니처
}

const person: Person = {
    name:'hi',
    age: 10,
    // tall 프로퍼티 생략가능
    sayHi: function(){
        console.log('hi')
    }
}

오버로드 시그니처 사용시 함수표현식을 사용하면 에러가 난다. 호출시그니쳐로 사용 할 수 있다.

interface Person {
		// 함수표현식 사용 시 에러가 난다
    **sayhi2?:()=>void;
    sayhi2?:(a:number,b:number) => void;**
    
    // 호출 시그니처로 사용가능
    sayhi3():void;
    sayhi3(a:number,b:number):void;
}

const person: Person = {
    sayhi3(a?: number, b?: number) {
        if (a !== undefined && b !== undefined) {
            console.log(`두 숫자의 합: ${a + b}`);
        } else {
            console.log("인자 없음");
        }
    }
}

// readonly 프로퍼티 수정불가
person.age = 10;

// 함수오버로딩 사용가능
person.sayhi3();
person.sayhi3(10,20)

인터페이스와 객체타입의 차이점

객체타입

// 유니온타입가능
type Type1 = number | string;
// 인터섹션타입가능
type Type2 = number & string;

인터페이스 인터페이스는 유니온타입이나 인터섹션 타입으로 만드는게 불가능하다.

// 프로퍼티를 유니온,인터섹션 타입으로 만들어서 사용해야함
**interface Type3 {test:number} | string;**
interface Type3_1 {test:number | string;}

**interface Type4 {test:number} & string;**
interface Type4_1 {test:number& string;} 

name 컨벤션

자바스크립트에서는 보통 스네이크, 카멜, 파스칼 이 3가지의 표기법을 주로 사용하는데 타입스크립트의 인터페이스 사용시 IPerson 같은 헝가리안 표기법을 사용하기도한다.

test_name // 스네이크
testName // 카멜
TestName // 파스칼

Iperson // 헝가리안표기법

인터페이스 확장(인터페이스 상속)

아래 기재한 인터페이스들은 서로간의 중복되는 프로퍼티들이 많아서 비효율적이고, 슈퍼타입인 Animal 타입의 특정 프로퍼티에 수정이 생기면 다른 타입또한 모두 수정해줘야하는 문제가있다.

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

interface Dog {
    name: string;
    age: number;
    isBark: boolean;
}

interface Cat {
    name: string;
    age: number;
    isScratch: boolean;
}

interface Chicken {
    name: string;
    age: number;
    isFly: boolean;
}

extends

extends는 상속을 의미하고, 아래와 같이 인터페이스를 만들어 주면 Animal의 프로퍼티들을 모두 가진 상태에서 프로퍼티가 추가되는 형태가된다.