interface | 타입스크립트, 코딩앙마
https://youtu.be/OIMPLNICzoc
프로퍼티의 타입을 정의해서 객체(object)를 표현하려면?
interface
를 쓴다
interface User {
name : string;
age : number;
}
// 변수 user를 위에서 선언한 User타입으로 명시하고 프로퍼티 값을 할당
let user: User = {
name : "홍길동",
age : 30
}
user.age = 10; // 프로퍼티의 값을 변경할 수 있음
user.gender = "male" // Error! gender는 User타입에 명시되지 않음
?
를 쓰면 있어도 되고 없어도 되는 optional한 property로 설정해 줄 수 있다
interface User {
name : string;
age : number;
gender? : string;
}
readonly
를 쓰면 최초 할당만 가능하고 이후에는 수정할 수 없다
interface User {
readonly birthYear : number;
}
let user: User = {
birthYear : 1810
}
user.birthYear = 1990; // Error!
여러 프로퍼티를 optional하게 설정해야 할 때 ?
를 사용할 수도 있지만
아래와 같이 간단하게 써줄 수 있다.
interface User {
// 1? : string;
// 2? : string;
// 3? : string;
[학년: number] : string;
}
let user: User = {
1 : "수",
2 : "우"
// 3은 작성하지 않음
}
프로퍼티의 타입 범위를 선언해줄 수도 있다
기존의 string
은 문자열타입은 무엇이든지 할당할 수 있었지만 이제 type Score에 해당하는 값만 넣어줄 수 있다
type Score = "수" | "우" | "미" | "양" | "가";
interface User {
[학년: number] : Score;
}
let user: User = {
1 : "수",
2 : "우",
3 : "A" // Error!
}
Add타입의 첫번째 인자, 두번째 인자의 타입을 number로 정의하고, 반환되는 값도 number로 정의한다.(참고: 반환값이 없으면 void)
interface Add {
(num1: number, num2: number): number;
}
const add : Add = function (x, y){
return x + y;
}
console.log(add(10,20)) // 30
성인이면 true를 반환하는 함수를 만들어보자( + 화살표 함수)
interface isAdult {
(age:number) : boolean;
}
const a:isAdult = (age) => {
return age > 19;
}
console.log(a(20)); // true
implements
를 사용해 클래스도 타입을 정의할 수 있다
interface Car {
color : string;
wheels : number;
start() : void; // 함수의 반환값이 없으므로 void로 설정
}
class Bmw implements Car {
color;
wheels = 4;
constructor(c:string){
this.color = c;
}
start(){
console.log("go...")
}
}
const b = new Bmw("green");
console.log(b)
b.start();
class, constructor 👉 JS레플릿 25.Class 링크 참조
extends
를 사용해 클래스를 확장해줄 수 있다
interface Car {
color : string;
wheels : number;
start() : void;
}
interface Benz extends Car {
door: number;
stop(): void;
}
const benz : Benz = {
color : "red",
wheels : 4,
start(){
console.log('Go~~~!')
},
door : 4,
stop(){
console.log('stop!!!')
}
}
console.log(benz)
benz.start();
benz.stop();
클래스는 여러개를 확장시킬 수도 있다
interface Toy {
name: string;
}
interface Car {
color: string;
wheels: number;
start(): void;
}
interface ToyCar extends Toy, Car {
price: number;
}
class Tobot implements ToyCar {
name;
color;
wheels;
price;
constructor(n:string, c:string, w:number, p:number){
this.name = n;
this.color = c;
this.wheels = w;
this.price = p;
}
start(){
console.log("가보자고~~")
}
}
const t = new Tobot("또봇 X", "orange", 4, 39800);
console.log(t)
t.start();