본문 바로가기
프론트개발/TypeScript

[TypeScript] 인터페이스(Interface)

by YoungJu 2022. 7. 19.
반응형
SMALL

인터페이스란?

내부적으로는 숨겨져 있고, 겉으로만 드러나있는 호출 방식. 

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

function func1(human: Human1): void{
	console.log(`반가워요! ${human.name}.`);
}    

const h1: Human1 = {
	name: "Jack",
    age: 24,
},

func1(h1);

optional property

interface Human2 {
	name: string;
    age?: number;  // 있을 수도 있고 없을 수도 있는 것에 ?를 붙임.
}

function hello(human: Human2): void {
	console.log(`반가워요. ${human.name}.`);
}

hello({name: "Jack", age: 30});
hello({name: "Amy"});
interface Human2 {
	name: string;
    age?: number;
    [index: string]: any; 
}

function Human2(human: Human2): void {
	console.log(`반가워요. ${human.name}.`);
}

const h21: Human2 = {
	name: "Jack",
    age: 30,
};

const h22: Human2 = {
	name: "Amy",
    brother: ["Hong", "Choi"],
};

const h23: Human = {
	name: 'Dummy',
    father: h21;
    mother: h22,
};

hello(p23);

function in interface

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

const h1: Human = {
	name: "Jack",
    age: 30,
 	hello: function(): void{
    	console.log(`반가워요. ${this.name}.`);
    }
};

const h2: Human = {
	name: "Jack",
    age: 30,
 	hello(): void{
    	console.log(`반가워요. ${this.name}.`);
    }
};

h1.hello();
h2.hello();

class implements interface

interfae IHuman {
	name: string;
    age?: nmber;
    hello(): void;
}

class Human immplements IHuman {
	name: string;
    age?: nmber;
    constructor(name: string) {
    	this.name = name;
    }
    hello(): void;\ {
    	console.log(`반가워! ${this.name}.`);
    }
}

const human: IHuman = new Human("Jack");
human.hello();

interface extends interface

인터페이스를 가져와 인터페이스에 추가하는 것. (상속)

interface IHuman {
	name: string;
    age?: number;
}

interface IKor extends IHuman {
	city: string; 
}

const k: IKor = {
	name: '한',
    city: '울산',
};

Readonly Interface

interface Human {
	name: string;
    age?: number;
    readonly gender: string;
}

const h1: Human = {
	name: "James",
    gender: "male"
};

h1.gender = "female"; //error : Cannot assign to 'gender' because it is a read-only property.

Type aslis vs Interface

function

//type alias
type EatT = (food: string) => void;

// interface
interface IEat {
	(food: string): void;
}

array

type aList = string[];

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

intersection

interface ErrHandling {
	success: boolean;
    error?: {message: string};
}

interface HData {
	human: {name: string}[];
}

type HumanType = HData & ErrHandling;

interface IHuman extends HData, ErrHandling {}

let hum: HumanType;
let ihu: IHuman;

union types

interface Bird {
	fly(): void;
    layEggs(): void;
}

interface Fish {
	swim(): void;
    layEggs(): void;
}

type PType = Bird | Fish;

interface IPet extends PType {} //err
class Pet implements PType {}	//err

기본적으로 alias는 타입을 부르는 이름. 인터페이스는 새로운 타입을 만드는 것으로 이해하면 좋다. 

반응형

댓글