TypeScript의 interface는 설계도다!

안녕하세요 웹파트 OB 손지유입니다.

TypeScript를 통해 과제를 하다 interface 때문에 오류가 종종 뜨는 것을 보고...

"내가 interface 개념에 대해 완전히 이해하지 못했구나!" 싶어서 쓰게 된 아티클 :)

오늘 이 아티클을 통해 interface의 기본 개념을 뿌셔봅시다!

1. TypeScript Interface란?

TypeScript의 interface는 객체의 모양, 즉 객체가 가져야 할 속성과 그 타입을 미리 정해두는 설계도라고 할 수 있습니다.

따라서 interface를 따라 객체를 만들면 실수로 속성을 빼먹거나 잘못된 타입의 값을 넣지 않도록 해주는 것이죠.

 

JavaScript에서는 이런 구조를 강제하지 않아서,

코드 작성 도중 실수를 하더라도 오류가 발생하지 않고 그대로 실행되는 경우가 많은데,

특히 저같은 초보 개발자는 이런 부분을 잡아내지 못하고 넘어가는 경우가 있어서,

오히려 꼼꼼하게 오류를 잡아주는 TypeScript에게 고맙기도 합니다.(●'◡'●)

 

예시 코드를 한 번 볼까요?

const person = {
  name: "Myam",
  age: 23,
};

보통 JavaScript에서는 위와 같은 객체를 만들죠!

여기서 person 객체는 이름과 나이를 포함하고 있지만, js에서는 이 정보가 빠져도 에러가 발생하지 않습니다.

 

그러나 우리가 세미나에서 배운 것 처럼, 실제 개발에서는 데이터의 일관성이 중요하기 때문에,

모든 person 객체가 이름과 나이 속성을 확실히 갖도록 보장하도록 TypeScript의 interface를 사용하는겁니다.

---

 

2. Interface로 객체 구조 정하기

interface를 활용해서 person 객체가 반드시 이름(name)과 나이(age)를 포함하게 만드는 예시를 보여드리겠습니다.

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

위 코드는 객체가 반드시 name과 age라는 속성을 가져야 하며,

name은 문자열(string), age는 숫자(number) 타입이어야 한다는 것을 의미합니다.

 

이를 기반으로 person 객체를 정의해보면!

const person: Person = {
  name: "Myam",
  age: 23,
};

위와 같이 정의할 수 있습니다!

하지만, 얼핏 보면 js와 비슷해보이지만, ts는여기서 Person interface에 맞지 않는 속성이 들어가거나,

정의된 속성이 빠지면 오류를 발생시킵니다!

const person: Person = {
  name: "Myam",
  // age가 빠져 있어서 오류 발생
};

const person: Person = {
  name: "Myam",
  age: "스물셋",  // age는 숫자 타입이어야 하는데, 문자열 타입이라 오류 발생
};

이렇듯 TypeScript의 interface를 사용하면 객체의 구조와 속성 타입을 정확하게 정의할 수 있어서,

객체 생성 시 실수로 속성이 누락되거나 잘못된 타입이 들어가는 것을 방지할 수 있다는 장점이 있습니다.

---

3. 선택적 속성 사용하기

이 개념을 응용하다보면, 종종 하나의 객체에 필수가 아닌 속성을 넣고 싶을 때도 있는데요.

예를 들어, number 속성은 필수가 아닌 선택사항으로 만들고 싶다면 선택적 속성을 사용할 수 있습니다.

바로 '?'를 사용해서 말이죠 (*/ω＼*)

interface Person {
  name: string;
  age: number;
  number?: number; 
}

const person1: Person = {
  name: "Myam",
  age: 23,
};

const person2: Person = {
  name: "Chaeneey",
  age: 24,
  number: "01012345678",
};
};

이렇게 하면 number속성이 있어도 되고 없어도 되는 구조가 됩니다.

이처럼, 선택적 속성을 통해 다양한 형태의 객체를 하나의 interface로 처리할 수 있다는 건 정말 편리한 것 같습니다!

---

4. Interface를 활용한 코드의 안전성

TypeScript의 interface는 단순히 객체의 구조를 정해줄 뿐만 아니라, 코드의 안정성과 유지보수성을 크게 향상시켜줍니다.

객체의 구조를 미리 정의해두면, 이후에 객체를 사용할 때 잘못된 속성으로 인한 오류를 쉽게 방지할 수 있죠.

예를 들어, 아래와 같은 상황이 있다고 했을 때!

function greet(person: Person) {
  console.log(`안녕하세요, ${person.name}님!`);
}

const person = {
  name: "Myam",
  age: 23,
};

greet(person);

 

여기서 greet 함수는 Person interface에 맞는 객체를 받아야 합니다.

만약 person 객체에 name 속성이 없다면 TypeScript가 오류를 표시하겠죠.

이러한 구조 덕분에 코드를 작성할 때 실수를 줄이고, 이후 유지보수할 때에도 코드의 안전성을 보장할 수 있다고 합니다!

---

 

interface는 TypeScript에서 객체의 구조를 미리 정해두는 강력한 도구입니다.

따라서, interface를 통해 객체가 가져야 할 속성과 타입을 정확하게 정의해두면,

실수로 중요한 정보가 빠지거나 잘못된 데이터가 들어가는 문제를 쉽게 방지할 수 있습니다.╰(*°▽°*)╯