[Typescript] Interface (인터페이스)

기본적인 사용법

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

const person: Person = {
    name: 'Mark',
    age: 35
};

function hello(p: Person): void {
	console.log(`안녕하세요 ${p.name}`);
}

 

 

optinal property 1

// 이렇게 하면 age는 있어도 되고 없어도 된다.
interface Person {
    name: string;
    age?: number;
}

function hello(person: Person): void {
    console.log(`안녕하세요! ${person.name}입니다.`);
}

const p1: Person = {
    name: 'Mark',
    age: 35
};

const p2: Person = {
    name: 'Anna'
};

hello(p1);	// 안녕하세요! Mark입니다.
hello(p2);	// 안녕하세요! Anna입니다.

 

optinal property 2

// indexable type. string이나 number만 된다. Array또는 Dictionary의 형태를 가진다.
interface Person {
    name: string;
    age?: number;
    [props: string]: any;
}

function hello(person: Person): void {
    console.log(`안녕하세요! ${person.name}입니다.`);
}

const p1: Person = {
    name: 'Mark',
    age: 35
};

const p2: Person = {
    name: 'Anna',
    sisters: [
        'Sung',
        'Chan'
    ]
};

const p3: Person = {
    name: 'Bokdaengi',
    father: p1,
    mother: p2
};

hello(p1);	// 안녕하세요! Mark입니다.
hello(p2);	// 안녕하세요! Anna입니다.
hello(p3);	// 안녕하세요! Bokdaengi입니다.

 

function in interface

interface에 function을 넣어보자

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

const p1: Person = {
    name: 'Mark',
    age: 35,
    hello: function(): void {
        console.log(this);
        console.log(`안녕하세요! ${this.name}입니다.`);
    }
};

const p2: Person = {
    name: 'Anna',
    ageL 35,
    hello(): void {
        console.log(this);
        console.log(`안녕하세요! ${this.name}입니다.`);
    }
};

const p3: Person = {
    name: 'Bokdaengi',
    age: 35,
    hello: (): void => {
        console.log(this);
        console.log(`안녕하세요! ${this.name}입니다.`);
    }
};

p1.hello();	// 안녕하세요! Mark입니다.
p2.hello();	// 안녕하세요! Anna입니다.
p3.hello();	// 안녕하세요! Bokdaengi입니다.

 

class implements interface

인터페이스를 구현해서 클래스를 사용하는 법

interface IPerson {
    name: string;
    age?: number;
    hello(): void;
}

class Person implements iPerson {
	name: string;
    
    constructor(name: string) {
        this.name = name;
    }
    
    hello(): void {
        console.log(`안녕하세요! ${this.name}입니다.`);
    }
}

const person = new Person('Mark');
person.hello();	//안녕하세요! Mark입니다.

 

interface extends interface

interface를 다른 interface에게 상속할 수 있다.

interface Person {
    name: string;
    age?: numebr;
}

interface Korean extends Person {
    city: string;
}

const k: Korean = {
    name: '이웅재',
    city: '서울'
}

 

function interface

많이 사용하진 않는다.

interface HelloPerson {
    (name: string, age?: number): void;
}

let helloPerson: HelloPerson = function(name: string) {
    console.log(`안녕하세요! ${name}입니다.`);
}

helloPerson('Mark');	// 안녕하세요! Mark입니다.

 

Indexable Type

string이거나 number만 된다.

interface StringArray {
    [index: number]: string;
}

const sa: StringArray = {};	// 옵셔널하다.
sa[100] = '백';

interface StringDictionary {
    [index: string]: string;
}

const sd: StringDictionary = {};
sd.hundred = '백';

interface StringArrayDictionary = {
    [index: number]: string;
    [index: string]: string;
}

const sad: StringArrayDictionary = {};
sad[100] = '백';
sad.hundred = '백';

 

string index = optional property

interface StringDictionary {
    [index: string]: string;
    name: string;
}

const sd: StringDictionary = {
    name: '이름'	// 필수
};
sd.hundred = 'any';	// 어떤 프로퍼티도 가능

//////////////////////////////////////////////

interface StringDictionaryNo {
    [index: string]: string;
    // name: number;  // (X) 인덱서블 타입이 string 값을 가지기 때문에 number를 필수로 끌어오면 에러
}

이 경우에 string 인덱스의 값이 string인데 name이라는 number 변수가 필수로 더 있으면 에러가 난다. 에러가 나지 않으려면 name도 number여야 한다.