인터페이스( interface )

인터페이스

처음듣는 단어입니다ㅎㅎ

인터페이스란?

상호간에 정의한 약속 혹은 규칙을 의미한다.

-객체의 속성과 속성의 타입(스펙)      

 - 함수의 파라미터                                

- 함수의 파라미터, 반환 타입 등(스펙)

- 배열과 객체를 접근하는 방식            

- 클래스                                                

type Person = {
  name : string;
  age : number;
  address : string;
};

// 위에와 동일한게 인터페이스입니다.
interface Person {
  name : string;
  age : number;
  address : string;
};

이렇게 보면 좀 생소하죠 ?

 

좀 더 쉽게 보자면 ~ 아래와 같습니다.

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

 

여러번 정의를 써놓는 것 보다,

하나로 지정해서 JeongSeo라는 속성과 속성의 타입을 다른 사람이 처음보더라도

쉽게 알아 볼 수 있게 합니다.

 

---

 

변수에 활용할 때 ✍

아래와 같이 정의할 수 있습니다.

한눈에 보기 쉽쥬?

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

const jeongseo : Person = {
  name : 'JeongSeo';
  age : 28;
  address : 'UijeongBu';
}

 

---

 

함수에 활용할 때 ✍

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

function getPerson(person: Person) {
  console.log(person);
}

const host = {
  name: '정서'
}

getPerson(cpat);  // => Person의 형식에 맞지 않기 때문에 오류가 납니다.

const host = {
  name: '정서'
  age : 28
  address : '의정부'
}

getPerson(host);  // => Person의 형식에 맞기때문에 오류가 나지 않습니다.

함수에 파라미터 인자에다가 인터페이스를 정의하고

호출할 때 인자가 파라미터에 정의한 인터페이스의 규칙을 잘 따르는지 확인해줍니다.

 

함수의 스펙에 인터페이스를 활용할 수 있습니다.

interface SumFunction {
  (a: number, b: number): number
}

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

 

 

---

 

인덱싱 방식을 정의할 수 있습니다. ✍

index를 활용하여 값을 추출해내는 것을 인덱싱이라고 하는데,

여기에서도 인터페이스를 활용할 수 있습니다.

interface StringArray {
  [index: number]:srting;
}

const arr: StringArray = ['a', 'b', 'c'];
arr[0]; // 'a'


// 배열에 접근했을 때 그 요소의 타입을 정의할 수 있다.

 

인터페이스 딕셔너리 패턴

// 딕셔너리 패턴
interface StringRegexDictionary {
    [key: string]: RegExp;
}
// key는 string, value는 정규표현식만 입력받는다.
 
var obj: StringRegexDictionary = {
    cssFile: /\.css$/,
    jsFile: /\.js$/,
}
 
Object.values(obj).forEach(function(value) {
    // value의 타입을 알려준다
})

딕셔너리의 key와 value의 타입을 명시할 수 있다.
생성된 인터페이스를 사용해 만든 객체는 정해진 타입의 key와 value만 입력받고,

규칙에 맞지 않으면 에러를 생성한다.
이렇게 생성된 객체를 사용할 경우 미리 타입을 알 수 있습니다.

 

 

 

---

인터페이스 확장

인터페이스를 상속받아서 기존 있었던 것보다 더 확장해서 사용할 수 있게끔 한다.

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

interface Developer {
  name : string;
  age : number;
  language: string;
}

// 위에것과 동일하게 표현한게 아랫쪽입니다.
interface Developer extends Person{
  language: string;
}

interface 에서 extends (인터페이스명) 이렇게해서 확장이 가능합니다.

 

 

 

 

 

 

 

 

// 타입스크립트 핸드북을 참고하여 작성하고 공부한 것입니다 //

https://joshua1988.github.io/ts/

간단하게 제가 보기 편하게 작성했습니다.