Typescript 입문 - 인터페이스 / 타입 별칭

 

1. 인터페이스 - 변수 정의하기  

인터페이스는 상호간의 미리 정의한 약속 혹은 규칙을 의미하는데

 

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

const onyou: User = {

}

 

 

 

User 내용을 정의하지 않으면 위와같은 에러를 표시해준다

 

 

2. 인터페이스 - 함수 정의하기

인터페이스를 활용해서 함수에도 정의가 가능하다.

 

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

// 함수에 인터페이스 활용 
function getUser(user :User){
    console.log(user);
}
const lee = {
    name : "lee"
}

getUser(lee);

  age가 비어있는 상태의 lee를 getUser에 파라미터로 넣게 되면 

 

 

 

위와같은 에러가 발생한다.

 

타입을 지켜서 넣어줘야 아래와 같이 에러가 발생하지 않는다. 

 

함수의 구조에 따른 인터페이스 활용 

인자및 반환 타입을 미리 선언해서 변수에 할당한뒤 함수를 만들어주는 방식으로도 진행이 가능하다.

 

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

//함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction{
    //인자                  반환 타입
    (a: number, b: number): number
}

let sum: SumFunction;

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

//화살표 함수 버전 
let sumArrow: SumFunction = (a, b) => {return a + b};

3. 인덱싱 방식 

 

arr[0]에 접근하듯이 인터페이스에서 배열요소를 접근할때 사용 가능하다.

인덱스의 타입은 숫자이고 해당 인덱스로 특정요소를 접근할때의 타입을 명시한다

 

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

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

 

 

4. 딕셔너리 패턴 

 

 key값과 value값에 대해 타입을 지정해줄수있는 패턴이다.

 

RegExp 는 타입스크립트단에서 미리 정의되어있는 타입이다. 

//딕셔너리 패턴 
interface StringRegexDictionary {
    [key: string]: RegExp;
}

const obj:StringRegexDictionary = {
    // sth: /abc/,
    cssFile: /\.css$/,
    jsFile: /\.js$/
}
obj['cssFile'] = 'a'

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

})

 

 

 

5. 인터페이스 확장(상속)

 

인터페이스에서는 중복된 조건의 인터페이스를 상속받아서 사용할 수 있다. 

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

interface Developer extends Person{
    language: string;
}

const leee: Developer = {
    language: 'ts',
    age: 33,
    name : 'lee'
}

extedns 키워드를 사용해서 Person의 타입들도 모두 상속받는다.

 

 

 

 

 

1. 타입 별칭 

 

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.

 

 

type MyName = string;

const NameForTest: MyName = 'lee';

 

 

 

interface 레벨의 복잡한 타입에도 별칭을 부여할 수 있다. 

// 타입 

type p = {
    name: string;
    age: number;
}

const pp: p ={
    name:"hello",
    age: 30
} 

 

 

 인터페이스 / 타입 비교 

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

type Person2 = {
  name: string;
  age: number;
};

const lee: Person1 = {

}

 

인터페이스일때

 

 

type 일때 

 

type으로 정의한 경우에는 바로 타입에 대한 정보 조회가 가능하다. 

 

타입별칭은 확장(상속)이 되지 않는다. 따라서 interface를 추천한다!

 

 

 

www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8

해당 강의를 듣고 정리하는 내용입니다.