타입스크립트 인터페이스 inferface _ 유튜브 코딩앙마

유튜브 코딩앙마, 타입스크립트 영상을 정리한 내용입니다.

아래처럼 코드를 작성하면 user라는 객체의 타입은 지정할 수 있지만 오브젝트안 특정 속성에 대한 정보는 없어서 에러나 나타납니다.

let user:object;

user = {
    name : 'xx',
    age : 30
}

console.log(user.name)

이렇게 프로퍼티를 정의해서 객체로 표현할 때는 interface 를 사용합니다.

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

let user : User = {
    name : 'xx',
    age : 30
}

console.log(user.age)

여기서 user. age 를 바꾸는 것은 괜찮지만 user.gender 라는 새로운 속성을 기입하는 것은 에러가 납니다.

user.age = 10;
user.gender = 'male' // 에러

interface 에 추가를 해도 user 객체에 없다면 에러가 납니다.

interface User {
    name : string;
    age : number;
    gender : string; // 여기 추가를 해도
}

let user : User = { // 여기 없다고 에러 남
    name : 'xx',
    age : 30
}

user.age = 10;
user.gender = 'male' 

이때는 gender 라는 프로퍼티를 옵셔널(?)로 처리할 수 있습니다. 있어도 되고 없어도 된다는 의미로 있다면 string 이어야 합니다.

interface User {
    name : string;
    age : number;
    gender? : string; // 옵셔널 처리
}

readonly 를 사용하면 읽기만 가능하고 수정은 안되게 설정할 수 있습니다. 최초 생성시에만 할당이 가능합니다.

interface User {
    ..
    readonly birthYear : number;
}

let user : User = {
    ..
    birthYear : 2000,
}

user.birthYear = 1990; // 에러, 수정 불가

객체에 여러가지 정보를 추가해야 하는 경우는 아래처럼 할 수 있습니다.

// 숫자별로 점수를 매칭한다면,

interface User {
    1? : string;
    2? : string;
    3? : string;
    4? : string;
}

let user : User = {
    1 : 'A' // ?를 했으므로 값이 하나여도 에러 안남
}

// 아래처럼 축약할 수 있습니다. 

interface User {
    [grade:number] : string; // grade 는 다른 단어로 교체 가능
}

let user : User = {
    1 : 'A' // ?를 했으므로 값이 하나여도 에러 안남
}

// string 이 점부를 받기에 범위가 너무 넓다면, 
// type 을 만들어서 지정 가능합니다. 

type Score = 'A' | 'B' | 'C' | 'F';

interface User {
    [grade:number] : Score; // Score 타입에 지정된 값만 입력 가능
}

함수도 정의할 수 있습니다.

interface Add {
    (num1:number, num2:number): number;
}

const add : Add = function(x, y){
    return x + y;
}

add(10, 20) // 30

// 다른 예시

interface IsAdult {
    (age:number): boolean;
}

const a:IsAdult = (age) => {
    return age > 19;
}

a(33) // true

인터페이스도 클래스를 정의할 수 있습니다.

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color = 'red';
    wheels = 4;
    start(){
        console.log('go..');
    }
}

인터페이스는 확장이 가능합니다.

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

interface Benz extends Car { // Car 의 속성값을 그대로 가져와서 확장
    door: number;
    stop(): void;
}

interface Toy {
    name: string;
}

interface ToyCar extends Car, Toy { // 이렇게 여러개 적을 수도 있음
    price : number;
}