티스토리 뷰

반응형

이번 글에서는 TypeScript 모델을 만들어보려고 합니다.

보통 모델은 다른 파일에 저장하는 경우가 많죠.

 

TypeScript는 이를 인터페이스(interface)라고 칭합니다.

직접 소스를 보시면 이해가 빠를거 같습니다. 

interface Abbo {
    group: string;
    nowYear: number;
    groupMessage: String;
}

위의 소스를 index.ts 파일 내에 상단에 입력합니다. 

 

그리고 이번에는 기존에 각각 떨어져 있던 const를 합쳐줍니다.

const niyoung = {
    group: "ABBO",
    nowYear: 2020,
    groupMessage: "Happy new Year!!"
}

 

자 이렇게 하나의 객체가 만들어졌습니다.

그럼 이번에는 기존의 helloWorld 함수에 파라미터를 각각 받는 것이 아닌 object를 받을 수 있도록 해야겠습니다.

원리는 기존과 같게 콜론(:) 뒤를 변경해주면 됩니다.

 

영상에서 나오다시피 team이라는 객체 내의 키값을 자동완성시켜주고 있어,

편리하게 코드를 작성할 수 있습니다.

 

이로써 인터페이스와 객체의 생성 및 적용 방법을 알게 되었습니다.

(추가적으로, 컴파일된 index.js를 보면 index.ts의 소스와 차이가 있을 것이니 한 번 확인해보세요 :))

반응형
댓글
공지사항