반응형
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는 타입을 부르는 이름. 인터페이스는 새로운 타입을 만드는 것으로 이해하면 좋다.
반응형
'프론트개발 > TypeScript' 카테고리의 다른 글
[TypeScript] 클래스 (0) | 2022.07.20 |
---|---|
[TypeScript] 타입 호환성과 별칭 (0) | 2022.07.18 |
[TypeScript] 타입 시스템 (0) | 2022.07.18 |
[TypeScript] 타입 스크립트의 타입(2) (0) | 2022.07.16 |
[TypeScript] 타입 스크립트의 타입(1) (0) | 2022.07.16 |
댓글