Typescript Day 03 - 인터페이스

인터페이스

object 타입은 인터페이스와 클래스의 상위 타입이다.

타입스크립트는 객체의 타입을 정의할 수 있게 하는 interface 키워드를 제공한다.

interface 인터페이스명 {속성이름: 속성타입}

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

, 콤마 대신 ; 세미콜론으로 줄바꿈을 한다. 그냥 안쓰고 줄바꿈만 해도 된다.

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

let data: IPerson = { name: 'jack', age: 32 }

let data2: IPerson = { age: 32 } // 어느 하나의 속성이라도 없으면 오류
let data3: IPerson = { name: 'jack', age: 32, etc: true } // 많아도 오류

선택적 프로퍼티 (Optional Property)

인터페이스의 속성 뒤에 ? 물음표를 붙여서 무조건적으로 있어야하는 속성이 아닌 선텍 속성으로 만들 수 있다.

interface IPerson {
    name: string;
    age: number;
    etc?: boolean
}

let data: IPerson = { name: 'jack', age: 32 }
let data: IPerson = { name: 'jack', age: 32, etc: true }

익명 인터페이스 (Anonymous Interface)

interface 키워드 없이 익명의 인터페이스를 만들 수 있다.

let a: {
    name: string
    age: number
    etc?: boolean
} = { name: 'jack', age: 32, etc: true }

익명 인터페이스는 함수의 파라미터에서 주로 쓰인다.

function print(data: { name: string, age: number }) {
    console.log(data.name, data.age);
}

읽기전용 프로퍼티 (Read-only Property)

속성 이름 앞에 readonly 키워드를 붙여 변경이 불가능하게 할 수 있다.

interface IPerson {
    readonly name: string;
    readonly age: number;
}

let p1: IPerson = { name: 'jack', age: 32 };
p1.age = 22; // 오류

흡사 const 와 같지만 const는 변수에 사용하고 속성에는 readonly를 사용한다.

읽기전용 배열 (Read-only Array)

ReadonlyArray<T> 타입으로 읽기 전용 배열을 생성할 수 있다.

배열을 재할당하거나 수정할 수 없다.

let arr: ReadonlyArray<number> = [1,2,3];

arr.push(4); // 오류
arr[0] = 100; // 오류
arr = [10,20,30]; // 오류
arr.splice(0,1); // 오류

인터페이스 상속

extends 키워드를 사용하여 인터페이스를 상속받을 수 있다

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

interface IStudent extends IPerson {
    grade: number;
}

const student: IStudent = {
    name: 'jack',
    age: 20,
    grade: 1
}

복수의 인터페이스 상속도 가능하다.

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

interface IStudent {
    grade: number;
}

interface IHighStudent extends IPerson, IStudent {}

const highStudent: IHighStudent = {
    name: 'jack',
    age: '20',
    grade: 1
}

인터페이스는 인터페이스 뿐만 아니라 클래스도 상속받을 수 있다. 단, 멤버는 상속되지만 구현까지 상속하지 않는다.

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

interface IStudent extends Person {
    grade: number;
}

const student: IStudent = {
    name: 'jack',
    age: 20,
    grade: 1
}

참고 자료

Do it 타입스크립트 프로그래밍

Typescript-Handbook

Archive

Typescript Day 03 - 인터페이스