[TS] 타입스크립트의 인터페이스

인터페이스

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

예제)

  
  let 사람 = { name: "kim", age:25 };
  
  function logAge(obj: { age: number }){
  	console.log(obj.age); ///25
  
  }
  
  
  logAge(사람); 
  

logAge() 함수에서 받는 인자의 타입뿐만 아니라 객체의 속성 타입도 정의할 수 있다.

✔ 인터페이스를 적용하면?

interface 사람{
	age: number;
}

function logAge(obj: 사람){
	console.log(obj.age)   ///25

}

let person = { name: "kim", age:25 };

logAge(person);

✔ 옵션속성

인터페이스에 정의되어 있는 속성을 모두 사용하지 않아도 된다. 이것을 옵션 속성이라고 한다.

interface 인터페이스_이름 {
속성?: 타입;
}

✔ 옵션속성의 장점

옵션 속성의 장점은 인터페이스를 사용할 때 속성을 선택적으로 적용할 수 있고 인터페이스에 정의 되지 않은 속성에 대해서 인지시켜줄 수 있다는 점이다.

interface 정보{
	name: string,
  	hop?: number;  ///옵션 속성 지정 

}

let 주소 = {
	name: "서울시"
};

function 함수(a: 정보){
	console.log(a.name); ///"서울시" 
}

함수(주소);

✔ 읽기 전용 속성

읽기 전용 속성은 인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성을 의미한다.

예제)

interface 정보{
  readonly brand: string; ///readonly속성을 앞에 붙인다. 

}

let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};

myBeer.brand = 'Korean Carpenter'; // 에러

읽기 전용 배열

let arr: ReadonlyArray<number> = [1,2,3]; ////읽기 전용 설정

arr.push(4); ///에러
arr[0] = 2; ///에러 

위처럼 배열을 ReadonlyArray로 선언하면 배열의 내용을 변경할 수 없다.
선언하는 시점에만 값을 정의할 수 있다.

✔ 함수 타입

예제)

interface login{
	(username: string, password: string): boolean;
}

함수의 인자의 타입과 반환 값의 타입을 지정한다.

위의 인터페이스를 적용해보자.

let loginUser: login;

loginUser = function(id:string, pw: string){

}

✔ 인터페이스 확장

예제)

interface Person{
	name: string;
}

interface Developer extends Person{
	skill: string;
}

let foo = {} as Developer; 

foo.name = "kim"; //// object 내부에 name:"kim"