TypeScript - 인터페이스 & 타입 별칭

1. Interface

• 인터페이스는 커스텀 타입을 정의 및 상속을 통해 확장할 수 있고 재사용성이 높다.
• 인덱싱이나 딕셔너리 패턴과 같이 key 혹은 value에 타입을 지정해주고 그 값에도 타입을 지정할 수 있다.

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

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

// 함수에 인터페이스 활용
function getUser(user: User) {
  console.log(user)
}

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

getUser(capt)



//함수의 스펙(구조)에 인터페이스 사용
interface SumFunction {
  (a: number, b: number)
}

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

//인덱싱
interface StringArray {
  [index: number]: string;
}

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

//딕셔너리 패턴
interface StringRegexDictionary {
  [key: string]: RegExp; //정규표현식 생성자 RegexExpression
}

let obje: StringRegexDictionary = {
  // sth: /abc/,
  cssFile: /\.css$/,
  jsFile: /\.js$/,
}

// obje['cssFile'] = 'a' Regex가 들어와야하는데 문자열이라 에러가 뜸 

Object.keys(obj).forEach(function(val) {})


//인터페이스 확장

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

interface Developer extends Person {
  language: string;
}

let captain: Developer = {
  name: '캡틴',
  age: 100,
  language: '영어'
}

2. Union & Interface

• Union
  • 기본 타입 - 여러 종류의 타입을 선택할 수 있음.
  • 객체 형태의 함수 인자 - 표기한 객체들에 모두 해당되는 속성만 사용 가능함.
    • 그 이유는, 두 객체 중에 한 객체를 선택했을 때, 다른 객체의 인자에 참조하게되면 안전하지 않기 때문이다.
  • 호출하는 관점에서는, 한 객체에 해당하는 모든 속성을 인자로 넘겨줘야만 한다. 겹치지 않는 속성은 사용하지 않는데 왜 인자로 넘겨야하지? 라고 이상하게 느껴질 수 있지만, 내가 이 객체를 사용할 거야!라는 것을 함수에 알려주기 위해서이다.
• Intersection
  • 객체 형태의 함수 인자 - 표기한 객체들의 모든 속성을 사용할 수 있다.
  • 중요한 점은, 함수를 호출할 때, 무조건 함수 내에서 사용되는 모든 객체에 포함되는 속성을 인자로 넘겨줘야만 한다는 것이다.

let sihyun: string | number | boolean;
function logMessage(value: string | number) { //Union Type은 하나의 타입 이상을 쓸 수 있음
  if (typeof value === 'number') {
    value.toLocaleString();
  }
  if (typeof value === 'string') {
    value.toString();
  }
  throw new TypeError('value must be string or number')

}
logMessage('hello');

interface Developers {
  name: string;
  skill: string;
}

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

function askSomeone(someone: Developers | Person2) {
  someone.name //공통 속성만 접근가능
  // someone.age
  // someone.skill
}


//인터섹션

let unionA: string | number | boolean;
let interB: string & number & boolean;

function askSomeone2(someone: Developers & Person2) {
  someone.name //공통 속성만 접근가능
  someone.age
  someone.skill
}

askSomeone({name: 'developer', skill: 'web development'})
askSomeone({name: 'sehan', age: 100})

askSomeone2({name: 'developer', skill: 'web development', age: 100}) //세 인자가 다 들어와야만 intersectio 함수가 동작함
let sihyun: string | number | boolean;
function logMessage(value: string | number) { //Union Type은 하나의 타입 이상을 쓸 수 있음
  if (typeof value === 'number') {
    value.toLocaleString();
  }
  if (typeof value === 'string') {
    value.toString();
  }
  throw new TypeError('value must be string or number')

}
logMessage('hello');

interface Developers {
  name: string;
  skill: string;
}

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

function askSomeone(someone: Developers | Person2) {
  someone.name //공통 속성만 접근가능
  // someone.age
  // someone.skill
}


//인터섹션

let unionA: string | number | boolean;
let interB: string & number & boolean;

function askSomeone2(someone: Developers & Person2) {
  someone.name //공통 속성만 접근가능
  someone.age
  someone.skill
}

askSomeone({name: 'developer', skill: 'web development'})
askSomeone({name: 'sehan', age: 100})

askSomeone2({name: 'developer', skill: 'web development', age: 100}) //세 인자가 다 들어와야만 intersectio 함수가 동작함