반응형
타입을 만들어 내는 방식
function hello1(person: { name: string; age: number }): void {
console.log(`하이 ${person.name} 입니다.`);
}
const p1: { name: string; age: number } = {
name: "Mark",
age: 39,
};
hello1(p1);
{ name: string; age: number }
얘를 조금 더 구조화 시킬 수 있지않을까?
아래처럼 사용하기!
interface Person1 {
name: string;
age: number;
}
function hello1(person: Person1): void {
console.log(`하이 ${person.name} 입니다.`);
}
const p1: Person1 = {
name: "Mark",
age: 39,
};
hello1(p1);
optional property
?
interface Person2 {
name: string;
age?: number;
}
? 는 있을수도 있고 없을 수 도 있다는 의미
[]
interface Person2 {
name: string;
age?: number;
[index: string]: any
}
a['index']
a['index']
어떤 값이던 들어갈 수 있다.
function interface
interface Person4 {
name: string;
age: number;
hello(): void;
}
const p41: Person4 = {
name: "John",
age: 42,
hello: function (): void {
console.log(`hi ${this.name} 입니다.`);
},
};
const p42: Person4 = {
name: "John",
age: 42,
hello(): void {
console.log(`hi ${this.name} 입니다.`);
},
};
class implements interface
interface IPerson {
name: string;
age?: number;
hello(): void;
}
class Person implements IPerson {
name: string;
age?: number | undefined;
constructor(name: string) {
this.name = name; //초기값 지정
}
hello(): void {
console.log(`하이 ${this.name} 입니다. `);
}
}
const person: IPerson = new Person("Mark");
interface extends interface
interface IPseron2 {
name: string;
age?: number;
}
interface IKorean extends IPseron2 {
city: string;
}
const k: IKorean = {
name: "jieun",
city: "서울",
};
function interface
interface HelloPerson {
(name: string, age?: number): void;
}
const helloPerson: HelloPerson = function (name: string, age?: number) {
console.log(`안녕 ${name} 입니다.`);
};
helloPerson("mark", 39);
/// or
interface HelloPerson {
(name: string, age?: number): void;
}
const helloPerson: HelloPerson = function (name: string) {
console.log(`안녕 ${name} 입니다.`);
};
helloPerson("mark", 39);
Readonly Interface
interface Person9 {
name: string;
age?: number;
readonly gender: string;
}
const p81: Person9 = {
name = "mark",
gender = "male",
};
p82.gender = "female";
//readonly이기 떄문에 오류가 난다.
Interface vs type alias
같은 이름의 인터페이스 사용가능 vs alias 는 불가능 하다.
extends 로 다중상속 vs &으로 가져오기
union type은 interface 로 표현 어려움 vs | 로 union type가능
반응형
'프로그래밍 언어 > TypeScript' 카테고리의 다른 글
basicType (0) | 2022.02.13 |
---|