React TypeScript - Interface

평소에 객체 만들때처럼 만들면 Typescript가 type을 줄수 없다.

const obj = {
	name: "aa",
    age: 0,
}

그래서 Interface라는 친구를 사용해서 type을 준다.

 

타입스크립트 Interface

• 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다.
• 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.
• 직접 인스턴스를 생성할 수 없고 모든 메서드가 추상 메서드이다.
• -> 이게 무슨말이냐면, interface를 내가 데이터처럼 누구 보여주려고 못쓴다.
• -> 이 인터페이스는 그냥 겉옷같은녀석이라, 다른 객체한테입혀서 보내줘야한다
• 추상 클래스의 추상 메서드와 달리 abstract 키워드는 사용할 수 없다.
• TS에서만 interface를 지원한다.

 

interface 사용 이유

• 타입의 이름을 짓고 코드 안의 계약을 정의
• 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다. 
  • 객체의 스펙(속성과 속성의 타입)
  • 함수의 파라미터
  • 함수의 스펙(파라미터, 반환 타입 등)
  • 배열과 객체에 접근하는 방식
  • 클래스

아까 위의 예제에 타입을 주려한다.

// 인터페이스
interface ObjInterface {
  name: string;
  age: number;
}


const obj:ObjInterface = {
	name: "aa",
    age: 0,
}

 

 

인터페이스  확장기능

// 두개의 인터페이스를
interface Person {
  name: string;
  age?: number;
}
 
interface Developer {
  skills: string[];
}
 
 
 // 하나의 인터페이스로 합쳐준 후에
interface WebDeveloper extends Person, Developer {}
 
 // 가져다 쓰게한다
const webDeveloper: WebDeveloper =  {
  name: '곤감',
  age: 20,
  skills: ['HTML', 'CSS', 'JavaScript', 'React']
}