타입스크립트 'interface' 총정리

타입으로 사용되는 인터페이스.

함수에서 반환되는 타입을 명시할 때 객체의 타입을 모두 명시했을 때 코드가 복잡해 보인다.

function getStudentDetails(studentId: number):{
    studentId: number,
    studentName: string,
    age: number,
    createDate: Date
}  {
    return {
        studentId: 3,
        studentName: 'Moon',
        age: 19,
        createDate: new Date
    }
}

위 코드 보다 가독성 좋은 코드를 작성하기 위해서 인터페이스란 개념을 도입해서 사용할 수 있다.

인터페이스(interface)

타입 명시를 위해 사용되며, 변수, 함수, 클래스 등에 사용된다. 인터페이스는 코드의 재사용성을 높인다.

• 인터페이스는 영향력이 없기 때문에 Javascript 코드로 컴파일 되지 않는다.
• 인터페이스는 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 존재한다.

 

1. 인터페이스 네이밍 규칙

• 첫문자를 대문자로 표기
• 인터페이스 이름 앞에 i를 붙이지 않는 것

 

2. 인터페이스 문법

1) 기본

프로퍼티에 타입을 명시하여 Student란 인터페이스를 선언한다.

interface Student {
    studentId: number;
    studentName: string;
    age: number;
    createDate: Date;
}

명시한 인터페이스는 타입으로써 사용이 가능하다.
아래처럼 Student 인터페이스 구조를 리턴하는 함수를 선언하여 사용할 수 있다.

//반환 값의 타입으로 사용
function getStudentDetails(studentId: number): Student  {
    return {
        studentId: 3,
        studentName: 'Moon',
        age: 19,
        createDate: new Date
    }
}

//파라미터 타입으로 사용
function saveStudentDetails (student: Student):void {

}

2) 선택적 프로퍼티

원래 인터페이스에 명시한 프로퍼티들은 인터페이스가 타입으로 사용될 경우 필수적으로 들어가야한다.
하지만 ?으로 선택적 프로퍼티를 지정해줌으로써 선택적으로 프로퍼티 값을 넣을 수 있게 할 수 있다.

• key name + ?

age를 선택적 프로퍼티로 설정해주고 함수에서 return값으로 age 프로퍼티 값을 넣어주지 않아도 에러로 처리되지 않는다.

interface Student {
    studentId: number;
    studentName: string;
    age?: number;
    createDate: Date;
}

function getStudentDetails(studentId: number): Student  {
    return {
        studentId: 3,
        studentName: 'Moon',
        createDate: new Date
    }
}

3) 인터페이스와 메소드

메소드를 인터페이스 내에서 정의할 수 있다.

리터럴 함수나 화살표 함수를 사용해서 정의한다.

interface Student1 {
    studentId: number;
    studentName: string;
    age?: number;
    createDate: Date;
    addComment1 (comment: string) : string;
    //화살표 함수 + 옵셔널(?)
    addComment2? : (comment: string) => string;
}

4) readonly 속성

• 키 앞에 readonly를 붙여 사용한다.
• read only 프로퍼티는 읽기 전용 프로퍼티로 객체 생성시 할당된 프로퍼티 값을 바꿀 수 없다.

interface Student2 {
    readonly studentId: number;
    studentName: string;
    age?: number;
    createDate: Date;
}

studentId가 readonly 속성이라 값을 재할당 할 경우에 에러가 발생한다.

 

3. 인터페이스 활용

• 변수에 타입으로 활용
• 함수 파라미터나 리턴 타입에 활용
• 함수의 구조에 활용
• 배열 인덱싱으로도 활용

interface Student {
	id: number;
	name: string;
	date: Date;
}

//변수에 활용
let bin: Student {
	id: 3,
	name: 'bin',
	date: new Date()
}

//함수 파라미터나 리턴 타입에 활용
function getInfo(id: number) : Student {
	return {
		id: id,
		name: 'song',
		date: new Date()
	}
}

//함수의 구조에 활용
interface SumFunc {
	(a:number, b:number): number
}
const sum: SumFunc = (a:number, b:number): number => {
	return a + b
}

//배열 인덱싱
interface StringArray {
	[index: number]: string
}
let arr: StringArray = ['a', 'b', 'c']

4. 인터페이스의 확장

extends 키워드를 사용하여 interface를 확장하여 쓸 수 있다.

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

interface Developer extends Person{
	language: string
}

let subin: Developer = {
	name: 'subin',
	age: 20,
	language: 'ts'
}

5. 인터페이스의 상속

implements 키워드로 class에 상속할 수 있다.

인터페이스에서 정의한 프로퍼티와 메서드들을 반드시 상속받는 class에서 구현해야한다.

interface Person {
    name: string;
    age: number;
    say() : void
}

class Mimi implements Person {
    constructor(public name: string, public age:number) {}

    say() {
        console.log('hello')
    }
}