백엔드 스키마 interface를 만드는 것을 연습해보자.
프론트엔드 개발에 빼놓을 수 없는 백엔드 API 연동 시에 TypeScript는 빛을 발합니다. Network를 통해서 스키마를 확인하고 어떤 필드에 어떤 내용들이 담겨 있었는지 매번 값을 보고 확인해야 했지만 TypeScript로 interface를 만들어둔다면 강력한 자동완성과 함께 훨씬 스키마를 이해하기 편해집니다.
intercae User {
id:string
name:string
age:number
email:string
}
const getUser(id:string):Promise<User> {
...
}
TypeScript
복사
Plaintext
Axios나 React-Query 혹은 Fetch등과 함께 Response에 interface를 연결하는 작업을 한번 해보고 나면 타입을 외부에서 선언을 해주는 제네릭이라는 개념을 함께 알게 됩니다. 깊은 것은 아직 몰라도 됩니다. <Type> 표기를 통해서 적절히 Promise등에 타입을 명시할 수 있다는 개념을 이해하게 되면 Record 등을 통해서 조금 더 복잡한 구조의 타입도 정의하는 방법을 알게 됩니다.
유틸리티를 사용하는 법
TypeScript의 중급으로 넘어가는 관문은 복잡한 경우의 수에 대한 타입들입니다. 발생이 빈번하지 않지만 경우의 수가 한 가지만 있지 않는 상황들입니다. 대표적인 예가 바로 null와 object를 함께 쓰는 경우입니다.
interface User {
name:string
age:number
}
let selectedUser:User|null = null // 선택된 항목은 있을 수도 있고 없을 수도 있다.
TypeScript
복사
Plaintext
JavaScript는 동적 타입의 언어이며 TypeScript는 JavaScript의 체계를 거스르는 것은 아니라고 말했는데요. JavaScript의 동적 타입의 여러 가지 경우에 대응을 할 수 있도록 TypeScript는 여러 가지 문법적인 내용들을 추가했습니다.
대부분의 경우에 대해 TypeScript는 Type을 정의받을 수 있는 방법들을 제공하고 있습니다. 위와 같이 여러 가지 타입을 가지고 있는 경우에는 다시 원하는 하나의 Type로도 다시 변경하는 방법들이 존재합니다.
selectedUser.doSomthing() // null일수도 있기 때문에 TypeScript는 에러라고 표기한다!
// 이렇게 조건문을 걸어 주면 TypeScript가 null이 아니라고 판단을 스스로 해서 User로 취급해준다.
if (!selectedUser) {
selectedUser.doSomthing()
}
TypeScript
복사
이제는 Error를 Zero로 만들어 볼 시간!
에러가 나더라도 적당히 TypeScript를 통해서 Type을 붙여보면서 여기까지 왔다면 이제는 Error를 0으로 만들어 볼 도전을 하실 수 있습니다.
strict도 true로 세팅하고 어떤 식으로든 Type을 정리할 수 있을 거라는 마인드로 해결해나가 보시기 바랍니다. as나 any, 괜히 복잡해 보이는 형태로 코드가 만들어졌다면 잘못된 방식입니다. 원래 작성하려고 했던 JavaScript의 모양에서 이게 정말 최소한의 형태인가 생각하면서 에러를 잡아나가다 보면 TypeScript를 정말 편한 도구로 활용하시게 되고 이제 훨씬 더 Clean 한 코드를 작성하실 수 있게 될 겁니다.
