[typescript 기본] interface란?

interface란, 변수나 함수의 형태를 미리 선언해놓고 가져다 쓰기 위한 것으로, 데이터타입을 변수로 선언해놓은것이라고 생각하면 이해가 빠를듯하다.

기본선언

// 인터페이스 선언
interface User {
  age: number;
  name: string;
}​

interface 라고 쓰고 파스칼표기법으로 사용한다. 안에는 세미콜론으로 구분한다.
interface안에 선언한 값들은 무조건 있어야한다. 안그러면 에러가 남.

 

1. 변수에 인터페이스 활용하기

// 인터페이스 선언
interface User {
  age: number;
  name: string;
}

// 변수에 인터페이스 활용
var seho: User = {
  age: 33,
  name: '세호'
};

 

2. 함수에 인터페이스 활용하기 - 매개변수

// 인터페이스 선언
interface User {
  age: number;
  name: string;
}

// 함수에 인터페이스 활용 (함수 인자를 User로 정의)
function getUser(user: User) {
  console.log(user);
}

const capt = {
  name: '캡틴',
  age: 100
}

getUser(capt); // capt가 User 인터페이스에 적합함

 

3. 함수에 인터페이스 활용하기 - 구조

//함수 구조를 정의하는 인터페이스
interface SumFunction {
  (a: number, b: number): number;
}


let sum: SumFunction;
sum = function (a, b) {
  return a + b;
}

만약 interface를 사용하지 않았다면 아래처럼 선언하여 써야함

let sum = function (a: number, b:number):number {
  return a + b;
}

 

4. 인덱싱

interface StringArray {
  [index: number]: string; //index는 number, [index] 즉 값(value)은 string이라는 뜻
}

var arrIndexing: StringArray = ['a', 'b', 'c'];
arrIndexing[0] = '10';

arr = ["첫번째", "두번째", "세번째"]
arr[0] = "첫번째"​

여기서 key인 index는 0으로 number, value는 string이다.
따라서 [index: number]: string 이라고 표현하고 이걸 interface로 선언하여 쓰는 방법이 인덱싱이다.

 

5. 딕셔너리 패턴 (정규식)

interface StringRegexDictionary {
  [key: string]: RegExp  //sth가 key고 string임. 값은 정규식이므로 RegExp
}

var objDict: StringRegexDictionary = {
  cssFile: /\.css$/,
  jsFile: /\.js$/,
}

objDict['cssFile'] = / /;

Object.keys(objDict).forEach(function (value) {

})

var objDict = {
   sth: /abc/,  >> 이걸 딕셔너리 패턴으로 !
}

여기서 key는 sth로 string, value는 정규식이다.
이러한 건 [key: string]: RegExp로 표현할 수 있다.

 

6. 인터페이스 확장

// 1번 인터페이스
interface Person {
  name: string;
  age: number;
}


// 2번 인터페이스
interface Developer {
  name: string;
  age: number;
  language: string;
}

1번 인터페이스 내용이 2번 인터페이스 내용과 겹칠때 쓸 수 있는것이 extends 이다. (아래예시 참고)

extends를 사용한 경우

interface Developer extends Person{
  //아래 두줄은 extends 했기 때문에 필요없어짐 
  // name: string;
  // age: number;
  language: string;
}

 

extends를 사용하여 Developer 에는 language밖에 없지만 사실은 Person에 있는것도 들어왔다고 봐야한다. 따라서 name, age, language 중 하나라도 없을때에는 에러가 난다.