[ Typescript ] 타입스크립트 인터페이스 ( Interface )

Typescript

요즘 IT 기업들의 채용정보를 살펴보다 보면 상당수의 기업이 TypeScript를 원하거나 우대하는 것을 확인 할 수 있습니다. 면접준비를 하면서 Typescript 뭔지 왜 사용할지 정리해봤습니다.

 

 

 

타입스크립트 인터페이스 ( Interface )

 

Property를 정해서 객체를 표현하고자 할 때 interface를 사용합니다. 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미하며  TS에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스
  
  
  

장점: 단순히 인터페이스를 사용할 때 속성을 선택적으로 적용할 수 있고 인터페이스에 정의되어 있지 않은 속성에 대해서 인지시켜줄 수 있다는 장점이 있습니다.

 

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

let user1: User = {
    name : "Tom",
    age : 22,
    isStudent : false
}

console.log(user1.name) // Tom

 

 

옵션 속성 : 이름, 나리와 학생 정보는 필수라서 학교 정보를 선택으로 추가하고 싶다면 타입 앞에 " ? " 물음표를 추가하면 선택으로 설정 가능합니다. 인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 모두 다 꼭 사용하지 않아도 된니다. 

 

interface User {
    name: string;
    age : number;
    isStudent : false;
    school? : "Ele";
}

user.school = "London";
console.log(user.school);  // London

 

property 할당 : 학생마다 성적을 받고 싶을 경우 모든 성적을 하나씩 할당하는 것보다 성적 슷자와 성적 값을 할당 가능한 property 추가해봅니다. String으로 성적 아무거나 입력 가능해서 받을수있는 string 타입을 미리 정합니다.

 

type Score = 'A' | 'B' | 'C' | 'D';

interface Student {
    name : string;
    [grade:number] : Score; // 성적은 A,B,C,D 아닌 이상 오류 발생
}

let student:Student= {
    name : "Tom",
    1 : "A",
    2 : "B",
    3 : "C",
}

 

 

class : interface으로 class 클레스도 정할수 있습니다. 대신 클레스를 사용하는 경우 implements 크워드는 사용하야합니다. 

 

interface Car {
    color : string;
    wheels : number;
    start() : void
}

class Bmw implements Car {
    color;
    wheels  = 4;
    constructor(c:string){
        this.color = c;
    }
    start(){
        console.log("go");
    }
}

const car = new Bmw("green");
console.log(car)

 

 

함수 타입 : 인터페이스는 함수의 타입을 정의할 때에도 사용할 수 있습니다.

 

login interface으로 메개변수 username 과 비민번호 선안, return 값은 boolean 함수만 정의 가능합니다. 

interface login {
  (username: string, password: string): boolean;
}

let loginUser: login = function(id: string, pw: string) {
    console.log('로그인 했습니다.');
    return true;
}

let logoutUser: login = function(id: string, pw: string) {
    console.log('로그아웃 했습니다.');
    return true;
}

 

 

---