[TYPE SCRIPT] 타입 스크립트 Interface

Interface 란?

• 인터페이스는 일반적으로 상호 간에 정의한 약속 혹은 규칙을 말하는데, 우리가 사용하는 Object 객체에는 특정 속성값에 대한 정보가 없기 떄문에 인터페이스로 선언해서 사용할 수 있다.
• 인터페이스는 프로퍼티와 메서드를 가질 수 있다는 점에서 클래스와 유사하지만 직접 인스턴스를 생성할 수 없고, 모든 메서드는 추상 메서드로 선언되어 있다. 하지만, 추상 클래스의 추상 메서드와는 다르게 abstract 키워드를 사용하지 않는다.
• 인터페이스는 변수의 타입으로 사용될 수 있으며, 이때 선언된 변수는 인터페이스에 정의된 프로퍼티와 메서드 규칙을 준수해야 한다.
  이는 사용자가 새로운 타입을 만들어서 정의하는것으로도 볼 수 있다.

---

이제 Interface 에 대해 알아봤으니 어떠한 경우에 사용하는지 알아보도록 하겠다.

 

Interface를 사용하여 객체 정의

• Interface 를 정의할 때, 변수명 : 타입 으로 정의하는데 변수명 뒤에 ? 를 붙여주게 되면 optional 로 생성이된다.
• 이때, optional 이란 해당 인터페이스로 변수를 생성할 때, ? 붙은 속성은 필수적으로 구현하지 않아도 된다는 것을 의미한다.
• readonly : 제일 처음 생성할 때만 입력이 가능하고, 후에 따로 수정은 불가능하다.
• [변수명: 변수명 타입]: 변수 타입 : Index Signature 라고도 부르며 예를들어, [idx : number] : string 라고 되어있으면, name 으로 들어올 자리의 변수명 타입은 string 이 아닌 number 이고, 그 변수에 할당 될 값은 string 이여야한다는 것이다.
  즉, 1: "str1" 이런 식으로 값을 줘야한다.

type Score = "A" | "B" | "C" | "F";
interface User {
	name: string;
	age: number;
	gender?: string; // optional : 필수 속성이 아니다.
	readonly birthYear: number; 
	// readonly 를 붙여주면 생성할 때만 입력이 가능하고, 수정은 불가능하다.

	// [grade: number] : string
	// number 타입의 key 와 string 타입의 값을 가진 속성을 여러개 받을 수 있다.
	// string 은 성적을 받기에 범위가 너무 넓다. 이럴때 사용하는게 type 이다.
	[grade: number]: Score;
}

let user1: User = {
	name: "jin",
    age: 33,
    birthYear: 960217,
    1: "A",
    2: "B",
};

Interface 로 함수 정의

interface Add {
    (num1: number, num2: number): number;
    // number 타입의 인자를 2개 받아서 number 타입을 return.
}

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

Interface 로 클래스 정의

• 클래스를 만들 때, Interface 를 사용하여 만들고 싶다면 implements 키워드를 사용한다.

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

class BMW implements Car {
    // 클래스로 정의할 때.
    color;
    wheels = 4;

    constructor(c: string) {
    this.color = c;
}

    start(): void {
    console.log("go");
	}
}

Interface 의 확장

• 클래스와 마찬가지로 extends 를 사용하여 확장. (선언적 확장이 가능하다.)

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

// interface 는 확장이 가능하다. -> extends 사용
interface Benz extends Car {
	door: number;
	stop(): void;
}

const benz: Benz = {
	color: "black",
	wheels: 4,

	start() {
		console.log("go benz");
	},
	
	door: 5,
	
	stop() {
		console.log("stop");
	},
};

// interface 는 여러개의 확장도 가능하다.
interface Toy {
	name: string;
}

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

const toyCar: ToyCar = {
	// 두가지 interface 의 속성을 다 만족해야한다.	
	color: "black",	
	wheels: 4,
	
	start() {	
		console.log("go");
	},

	name: "toy",
	price: 100000,
};

// 선언적 확장이 가능하다
interface Jin {
	name: string
}

interface Jin {
	age: number
}

let profile: Jin = {
	name: 'jin',	
	age: 28
}