티스토리 뷰

웹 개발/Typescript

interface 기본

투자유v 2022. 1. 4. 11:11
728x90
// 1. 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: IPerson = new Person('Hyun');
person.hello();


// 2. interface extends interface
interface IKorean extends IPerson {
    city: string;
}

const h: IKorean = {
    name: 'Hyun',
    city: 'Seoul',
    hello(): void {
        console.log(`Hi, my name is ${this.name} and I live in ${this.city}.`);
    }
}
h.hello();


// 3. function interface
interface HelloPerson {
    (name: string, age?: number): void;
}

const helloPerson: HelloPerson = (name: string) => {
    console.log(`Hi, my name is ${name}`);
}

helloPerson('Hyun');
helloPerson('Kim', 32);



// 4. readonly interface property
interface IPerson4 {
    name: string;
    age?: number;
    readonly gender: string;
}

const k: IPerson4 = {
    name: "Kim",
    gender: "Male"
}

'웹 개발 > Typescript' 카테고리의 다른 글

class 기본 (초기화, getter, setter)  (0) 2022.01.04
type vs. interface  (0) 2022.01.04
function in interface  (0) 2022.01.04
optional property in interface  (0) 2022.01.04
never와 void  (0) 2022.01.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함