🦶 타입스크립트 인터페이스

 

📱 인터페이스

타입스크립트는 일단 값의 형태에 초점을 맞추고 있다.

이러한 것을 덕 타이핑이라고 한다. 인터페이스는 값의 형태에 대한 이름을 짓는 역할을 한다

 

💽  인터페이스 선언 및 사용

// 인터페이스 선언 값의 형태에 이름을 지음
// MusicInfo가 인터페이스이고 musicId,musidName,artist의 형태를 가지고 있다.
interface MusicInfo {
  musicId: string;
  musidName: string;
  artist: string;
}

//playMusic라는 함수는 param을 인자로 받고 param의 값 형태는 MusicInfo는 musicId,musidName,artist를 받을 수 있다
function playMusic(param: MusicInfo) {
  console.log(`save musicId ${param.musicId}`);

  console.log(`play music ${param.musidName} / ${param.artist}`);
}

 

인터페이스 선언 MusicInfo를 선언하고 musicId,musidName,artist를 string 타입으로 선언하고

playMusic함수의 인자의 타입은 MusicInfo으로 정의한다

MusicInfor의 타입에 맞이 않으면 typescript에서는 Error를 보여준다.

 

 

⌛️ 인터페이스 선택적 프로퍼티

// artist의 바로뒤에 ?를 붙임으로서 선택적 프로퍼티로 설정
interface MusicInfo2 {
  musicId: string;
  musidName: string;
  artist?: string;
  playtime: number;
}

// playMusic2인자의 타입을 MusicInfo2로 정의
function playMusic2(param: MusicInfo2): string {
  let str = "";
  str = `${param.musidName} ${param.artist}`;

  return str;
}
// artist를 넣지 않아도 정상적으로 동작한다
playMusic2({
  musicId: "music_000",
  musidName: "음원1",
  playtime: 10,
});

MusicInfo2를 인터페이스로 정의하고,  playMusic2의 인자의 타입을 MusicInfo2로 사용한다.

그리고 playMusic2에 artist를 넣지 않아도 필수프로퍼티가 아니기 때문에, 오류를 뱉지 않는다.

 

 

🪙 초과 프로퍼티 검사

초과프로퍼티는 타입에 정의하지 않는 경우에 발생한다.

 

// playTime을 선택적 프로퍼티 선언
interface MusicInfo3 {
  musicId: string;
  musicName: string;
  playTime?: number;
}

// param의 타입을 MusicInfo3으로 선언
function PlayAdMusic(param: MusicInfo3) {
  //로직 처리
}


// PlayAdMusic의 playsTime을 넣을 경우 오류를 뱉는다. playsTime은 MusicInfo3에 정의되어있지 않다.
PlayAdMusic({
  musicId: "music_0000",
  musicName: "음원",
  //Error : 초과 프로퍼티
  //playsTime:123
});

MusicInfo3에 "playsTime"으로  넣을 경우 에러를 뱉는다. playsTime은 MusicInfo3에 정의 되어있지 않다.

 

이 부분을 해결할려면 방법은 있다

타입단언으로 해결하면 할 수는 있으나 개인적으로는 좋은 방법 같지는 않다.

//타입 단언을 통해 처리
PlayAdMusic({
  musicId: "music_0000",
  musicName: "음원",
  playsTime: 123,
} as MusicInfo3);

 

 

🩹 함수 타입

함수에도 타입을 미리 정할 수 가 있다

// 인자에 src를 받고 boolean으로 리턴한다
interface PlayFunc {
  (src: string): boolean;
}

// javascript에서는 함수도 변수 취급할 수 있으므로, 변수처럼 쓸 수 있다.
let mySearch: PlayFunc;

//변수에 함수를 선언하여 사용할 수 있다
mySearch = function (src) {
  console.log("src : ", src);

  return true;
};

 

🧹 인덱서블 타입

배열의 키에 타입을 정할 수 있다. 인덱스 서명 타입은 number,string,symbol 만 제공

interface StringArray {
  //반환 타입도 필요
  [index: number]: string;
}
let myArray: StringArray;
//배열의 키는 숫자이고 리턴값은 문자열이다
myArray = ["Bob", "Tom"];

 

 

후기

현재까지는 기본적인 내용들만 다루었고, 인덱서블타입은 좀 더 개인적으로 더 공부가 필요해보인다