Skip to content

5. 인터페이스와 타입 별칭

Woo-Dong93 edited this page Nov 19, 2020 · 1 revision

1. 인터페이스란 ?

  • 상호간의 약속
  • 타입을 interface를 통해 미리 정의 및 활용
  • 중복 제거 및 생산성 증가

2. 인터페이스 활용해보기

  • 변수에 인터페이스 활용
interface User {
  age: number;
  name: string;
}

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

// 함수에 인터페이스 활용
function getUser(user: User) {
  console.log(user);
}
const capt = {
  name: '캡틴',
  age: 100
}
getUser(capt);

// 함수의 스펙(구조)에 인터페이스를 활용
// 라이브러리 만들 때 유용합니다.
interface SumFunction {
  (a: number, b:number): number;
}

var sum: SumFunction;
sum = function(a: number, b:number): number {
  return a + b;
}
  • 배열 및 인덱싱 활용
interface StringArray {
  [index: number]: string;
}

var arr: StringArray = ['a', 'b', 'c'];
//arr[0] = 10; //에러 발생
  • 딕셔너리 패턴
// 딕셔너리 패턴
interface StringRegexDictionary {
  [key: string]: RegExp;
}

var obj: StringRegexDictionary = {
  // sth: /abc/,
  cssFile: /\.css$/,

  jsFille: /\.js$/
}

obj['cssFile'] = 'a'; //에러 발생( 일반 문자열이 들어갔기 때문이다. )

// key값들을 가져와 forEach 돌릴 때에 value값이 추론되어집니다. ( 마우스 오버시 string)
Object.keys(obj).forEach(function(value) {})
  • 인터페이스 확장
interface Person {
  name: string;
  age: number;
}

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

// 위와 같이 중복된 인터페이스 정의가 있다면 상속을 통해 중복을 제거합니다.
interface Devaloper extends Person {
  language: string;
}

// language만 입력시 에러 발생 : 상속받은 프로퍼티도 정의를 해줘야 하기 때문이다.
var captain: Devaloper = {
  language: 'hi',
  age: 100,
  name: '우동'
}

3. 비슷한 타입 별칭은 무엇일까?

  • 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다.
  • 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것을 의미합니다.
  • VSCode 상의 프리뷰 상태로 다른 타입과 어떤 차이점이 있는지 확인할 수 있습니다.
type MyName = string;
const name: MyName = 'capt';
  • 인터페이스와 비슷한 구조로도 정의할 수 있습니다.
type Developer = {
	name: string;
	skill: string;
}
  • 프리뷰의 차이점

    • 인터페이스 ( Ctrl을 누르고 Persons 타입을 누르게 되면 상세히 볼 수 있으며 그 타입으로 이동가능합니다. )

    image

    • 타입 별칭

    image

4. 인터페이스와 타입 별칭의 차이점은 무엇일까?

  • 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다.
  • 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다.
  • 결국 확장이 용이한 인터페이스로 선언하는 것이 가장 좋습니다.

💒 Home

Home

📆 Planning

📋 요구 사항

📑 프로젝트 설계

📓 Api 명세서

📖 제품 백로그

📺 화면 기획서

📽️ Project

📖 도움말

📷 실행 화면

⚒️ 기술 스택

⚙️ 기술 특장점

✔️ Team Rule

그라운드 룰

☑️ 깃허브 사용 규칙

코딩 컨벤션 규칙

📝 Progress

🌿 1주차 Progress
☘️ 2주차 Progress
🍀 3주차 Progress
🍁 4주차 Progress
🌲 5주차 Progress

📚 학습 정리 공유

🛠️ 기술 관련 공유

Clone this wiki locally