[TypeScript] 인터페이스

🌈 코딩앙마의 TypeScript 강좌 수강 후, 이해한 내용을 정리한 글입니다.

interface

Object Types에 이름을 지정할 때 사용한다.

// 📍 interface 사용 전
{ name: string, age: number }


// 📍 interface 사용 후
interface User {
	name: string;
  	age: number;
}

interface를 활용하여 object/function/class의 타입을 정의할 수 있다.

1.object

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

let user:User = {
	name: 'James',
  	age: 30
}

2.function

// 함수 표현식
interface Add {
	(num1:number, num2:<number): number;
}

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

// 화살표 함수
interface IsAdult {
	(age:number):boolean;
}

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

3.class
implements를 사용한다.

interface Car {
	color: string;
  	wheels: number;
  	start(): 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) // Bmw: {"wheels": 4, "color": "green"}
b.start() // "go..."

각 프로퍼티에 Property Modifiers를 사용할 수 있다.

1.optional
?을 사용한다.

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

2.readonly
readonly를 사용한다.

interface User {
	name: string;
  	age: number;
	readonly birthYear: number; // ✅
}

3.Index Signatures
TypeScript 공식 문서의 Index Signatures 설명이다.

유형 속성의 모든 이름을 미리 알지 못하는 경우가 있지만 값의 형태는 알고 있습니다. 이러한 경우 index signature을 사용하여 가능한 값의 유형을 설명할 수 있습니다.
🔗https://www.typescriptlang.org/docs/handbook/2/objects.html#index-signatures

Index Signatures는 아래와 같이 사용한다.

// 📍 Index Signatures 사용 전
interface User {
	name: string;
  	age: number;
  	1?: string;
  	2?: string;
  	3?: string;
  	4?: string;
}

let user = {
	name: 'James',
  	age: 30,
  	1: 'A'
}

// 📍 Index Signatures 사용 후
interface User {
	name: string;
  	age: number;
  	[grade:number]: string; // ✅
}

let user = {
	name: 'James',
  	age: 30,
  	birthYear: 2000,
  	1: 'A'
}

위의 코드는 Type Aliases를 사용하여 아래처럼 작성할 수도 있다.

// 📍 Type Aliases 사용
type Score = 'A' | 'B' | 'C' | 'F'; // ✅

interface User {
	name: string;
  	age: number;
  	[grade:number]: Score; // ✅
}

let user = {
	name: 'James',
  	age: 30,
  	birthYear: 2000,
  	1: 'A'
}

extends로 interface를 확장할 수 있다.

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

interface Toy {
	name: string;
}

interface ToyCar extends Car, Toy {
	door: number;
  	stop(): void;
}

const benz:ToyCar = {
	door: 5,
  	stop() {
    	console.log('stop');
    },
  	color: 'black',
  	wheels: 4,
  	start() {
    	console.log('go...')
    },
  	name: 'toycar'
}