Typescript(2) - interface

강민혁·2023년 6월 2일

typescript

목록 보기

2/7

이번 포스팅에서는 typescript의 interface에 대해서 포스팅 해보겠습니다.

interface?🤔

TypeScript의 interface는 객체의 구조를 정의하는 역할을 합니다. 즉, 인터페이스는 객체의 속성과 메서드를 설명하고, 해당 객체가 어떤 형태를 가져야 하는지를 정의하는 일종의 계약이라고 할 수 있습니다.

interface를 사용하면 객체가 특정한 구조와 멤버를 갖도록 강제할 수 있으며, 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

interface의 사용으로 객체 구조안의 타입의 강제성을 부여

interface 예제

interface를 사용하지 않은 객체

let user:object;

user = {
	name: 'kang',
  	age: 22,
}

console.log(user.name) // 'kang'

user의 타입은 추론이 가능하지만 user안의 변수들에 대하여
타입의 추론이 어렵기 때문에
interface를 사용하여 객체안 타입에 강제성을 부여

interface를 사용한 객체

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

let user:User = {
	name: 'kang',
  	age: 22
}

이런식으로 선언이 가능합니다.
user:User 로써 저희가 만든 User라는 interface를,
user라는 변수에 지정해줍니다.

이로써 user 객체에 타입을 강제적으로 부여할 수 있습니다.

예를 들어, age에 string 타입이 들어가면 오류가 날 것 입니다.

readonly

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

let user:User = {
	name: 'kang',
  	age: 22,
  	birth: '2023-06-02',
}

user.birth = '2023-06-01' // error

readonly는 수정할 수 없는 변수를 의미합니다.
마지막줄에 user.birth = ~~ 처럼 수정시 에러를 발생합니다.

interface 예제 2

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

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

add(10,20) // 30

interface Add 로 두개를 더한 값을 return하는 함수를 생성

interface 예제 3

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

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

isAdult(33) // true

마찬가지로 age:number로 정수를 입력받고,
결과값은 boolean으로 나오도록 구성되어 있습니다.

interface 예제 4

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

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

const kang = new Benz('black');

implements로 class에 Car타입을 부여합니다.

interface 예제 5

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

interface Toy {
	name: string;
}

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