인터페이스 (Interface)

1. 인터페이스 생성

let user: object;

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

console.log(user.name) // 에러 발생 

• object에 특정 속성값에 대한 정보가 없으므로 에러 발생
• 프로퍼티를 정해서 객체를 표현하고자 할 때는 인터페이스를 사용함
  
  

interface Student {
	studentID: number;
	studentName: string;
	age: number;
	gender: string;
	subject: string;
	courseCompleted: boolean;
}

• 인터페이스 키워드 뒤에 인터페이스 이름 작성
• 인터페이스의 이름 뒤에 중괄호 넣어줌
• 인터페이스의 이름은 대문자로 시작
  
  

2. 타입으로 사용되는 인터페이스

function getStudentDetails(studentID: number): Student {
	return {
		studentID: 12345, 
		studentName: 'soo', 
		age: 20, 
		gender: 'female', 
		subject: 'typescript', 
		courseCompleted: false
	};
}

• 완성된 인터페이스는 타입으로써 사용 가능
• 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제됨
  
  

3. 선택적 프로퍼티

interface Student {
	studentID: number;
	studentName: string;
	age?: number;
	gender: string;
	subject: string;
	courseCompleted: boolean;
}

• ? : 옵셔널 기호
• age 프로퍼티는 있어도 되고, 없어도 되는 선택적 프로퍼티가 됨
  
  

4. 매개변수의 타입으로도 사용

let student1 = {
	studentID: 12345,
	studentName: 'soo',
	gender: 'female',
	subject: 'Typescript',
	courseCompleted: false,
};

function saveStudentDetails(student: Student): void {}

saveStudentDetails(student1);

• 인터페이스를 사용하면 코드의 재사용 가능
• 객체를 바깥에 생성하고 객체의 이름을 전달인자로 넣는 것도 가능
  
  

5. 인터페이스와 메소드

interface Student {
	studentID: number;
	studentName: string;
	age?: number;
	gender: string;
	subject: string;
	courseCompleted: boolean;
	addComment(comment: string): string; // 방법1
	addComment: (comment: string) => string; // 방법2
}

• 메소드도 인터페이스 내에서 정의할 수 있음
• 메소드 : 객체 내에서 정의된 함수
• 메소드를 인터페이스 내에서 정의하는 방법은 두 가지가 있음
  
  

6. Read Only 속성

interface Student {
	readonly studentID: number;
	studentName: string;
	age?: number;
	gender: string;
	subject: string;
	courseCompleted: boolean;
	// addComment(comment: string): string;
	addComment?: (comment: string) => string;
}

function saveStudentDetails(student: Student): void {
	student.studentID = 12222; // 에러
}

• Readonly가 붙은 인터페이스의 프로퍼티는 읽기 전용 프로퍼티
• 객체 생성시 할당된 프로퍼티의 값을 바꿀 수 없음
  
  

7. 인터페이스와 컴파일

• 인터페이스는 컴파일된 자바스크립트에서 보이지 않음
• 인터페이스는 코드가 렌더링될 때 아무런 영향력이 없음
• 타입스크립트 컴파일러가 자바스크립트로 컴파일 할 때 인터페이스를 지워버림
• 즉, 인터페이스는 작성 중인 코드에 대한 더 많은 정보를 타입스크립트에게 제공하기 위해 존재
• 타입스크립트에게 더 많은 정보를 제공할수록 더 많은 실수를 찾을 수 있음
  
  

8. 인덱스 시그니처와 함수 타입

type Score = 'A' | 'B' | 'C';

interface User {
	[grade: number]: Score;
}

let user: User = {
	1: 'A',
	2: 'B',
};

• 대괄호 안에 있는 타입을 키로 하고, 콜론 뒤의 타입을 value로 받는 프로퍼티를 여러개 받을 수 있음
• value의 범위가 너무 넓다면 리터럴 타입을 활용
  
  

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

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

add(10, 20);
add(10, 20, 30); // 에러 발생
add(10, '20'); // 에러 발생

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

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

a(33); // true

• 인터페이스로 함수 타입 정의 가능
• 인터페이스 내부 괄호안에 인자값 그리고 콜론 뒤에 리턴값의 타입을 작성
  
  

9. class 정의와 인터페이스 확장

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

class Bmw implements Car {
	color;
	constructor(c: string) {
		this.color = c;
	}
	start() {
		console.log('Go');
	}
}

const b = new Bmw('red');
console.log(b); // Bmw { color: 'red' }
b.start(); // Go

• implements 키워드를 사용하여 인터페이스로 class 정의 가능
• 인터페이스의 속성값을 모두 입력해야 함
  
  

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

interface Benz extends Car {
	door: number;
	stop(): void;
}

const benz: Benz = {
	color: 'black',
	door: 4,
	start() {
		console.log('Go');
	},
	stop() {
		console.log('Stop');
	},
};

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

interface Toy {
	name: string;
}

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

• extends 키워드를 사용하여 인터페이스 확장 가능
• 기존의 인터페이스가 가지고 있던 속성들을 그대로 받고, 속성을 추가로 정의할 수 있음
• 기존의 인터페이스 속성값도 모두 입력해주어야 함
• 확장은 여러 개도 가능함

참고 : 땅콩코딩, 코딩앙마