[TypeScript] 타입스크립트 인터페이스

상호간에 정의한 약속 혹은 규칙의 의미한다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

---

인터페이스 사용

// 객체 표현

let user:object;

user = {
 	 name : "xx",
	 age: 30,
}

console.log(user.name); // 에러 : Property "name" does not exist on type "object".

// => object의 name type 이 지정되지 않았다.
// 단순히 객체 변수에 object 타입을 지정하면 객체 속성의 타입 지정이 안되어있기 때문에 에러가 발생한다.

------------------------------------------------------------------------------------------

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

let user : User = {
	name : "xx",
	age : 30, 
}

console.log(user.age)

옵션 속성

// optional

interface User {
	name : string;
	age : number;
	gender? : string;
}

let user : User = {
	name : "xx",
	age : 30, 
}

user.age = 10;
user.gender = "male" // interface에서 optional 속성으로 주었기 때문에 에러가 안뜸

console.log(user.age)

"?" 를 입력하면 property가 반드시 있어야 할 필요가 없다.

ReadOnly

// readonly

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

let user : User = {
	name : "xx",
	age : 30, 
	birthYear : 2000, // readonly 속성은 initial 초기 생성때만 값 지정 가능
}

user.age = 10;
user.gender = "male" 
user.birthYear = 1999; // readonly 속성이기 때문에 수정 불가

console.log(user.age)

인터페이스로 객체를 처음 생성할 때만 값을 할당하고, 그 이후에는 변경할 수 없는 속성을 의미.

let arr: ReadonlyArray<number> = [1,2,3];

arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error

ReadonlyArray 을 사용하면 읽기전용 배열을 생성 할 수 있다.

객체의 속성 추가

// 객체 속성추가 (리터럴 타입)

interface User {
	name : string;
	age : number;
	gender? : string;
	readonly birthYear : number;
	[grade : number] : string;
}

let user : User = {
	name : "xx",
	age : 30, 
	birthYear : 2000, 
	1: "A",
	2: "B",
	3: "C",
}

// 그러나 grade의 value로 받기에 string이라는 타입은 범위가 너무 넓다.

type Score = "A" | "B" | "C" | "D" | "F" ;

interface User {
	name : string;
	age : number;
	gender? : string;
	readonly birthYear : number;
	[grade : number] : Score; // 이제 "A", "B", "C", "D", "F" 값만 받을 수 있다.
}

let user : User {
	name : "xx",
	age : 30, 
	birthYear : 2000, 
	1: "A",
	2: "B",
	3: "C",
	4: "DD" // 에러
}

함수 타입

// 인터페이스로 함수 정의

interface Add {
	(num1:number, num2:number): number;
}

const add : Add = function(x, y){
	return x + y
}

add(10,20);
add("10",20); // 에러

interface IsAdult {
	(age:number): boolean;
}

const adult:IsAdult = (age) => {
	return age > 19;
}

adult(20) // true
adult(18) // false
adult("22") // 에러

클래스 타입

// 인터페이스로 class 정의

interface Car {
	color : string;
	wheels : number;
	start(): void;
}

class Bmw implements Car {
	color = "red";
	wheels = 4;
	start(){
		console.log("go");
	}
}

// 또는

class Bmw implements Car {
	color;
	wheels = 4;
	constructor(c:string){
		this.color = c;
	}
	start(){
		console.log("go");
	}
}

const bmwCar = new Bmw("red")

인터페이스 확장(상속)

// 인터페이스 상속

interface Car {
	color : string;
	wheels : number;
	start(): void;
}

interface Benz extends Car {    // Car의 속성을 상속받는다
	door : number;
	stop(): void;
}

const benz : Benz = {    // 상속받은 속성까지 명시
	door : 5,
	stop(){
		console.log("stop")
	},
	color : "black",
	wheels : 4,
	start(){
		console.log("go")
	}
}

// 상속은 여러개를 받을 수도 있다

interface Car {
	color : string;
	wheels : number;
	start(): void;
}

interface Toy {
	name : string;
}

interface ToyCar extends Car, Toy {
	price : number;
}