개발을 하는 동안 Nest.js로 서버를 구축할 일이 생길 거 같아 우선 TypeScript를 공부해두려고 한다.
우선 TypeScript를 사용하는 이유부터 한 번 살펴보도록 하자.
JavaScript는 정말 자유로운 언어이다.
그렇기에 빌드가 되지 않는 에러가 존재하더라도, 개발자는 개발 과정에서 찾지 못하는 경우가 많다.
이런 문제를 해결하기 위해 TypeScript를 사용한다고 한다.
우선 json을 가져올 수 있는 해당 url을 먼저 살펴보자.
https://jsonplaceholder.typicode.com/todos/1
해당 url로 GET 요청을 보내면 다음과 같은 응답을 받을 수 있다.
굉장히 평범한 json format이다.
이런 json을 자바스크립트에서 처리하기가 굉장히 유리하다.
import axios from "axios";
const url = "https://jsonplaceholder.typicode.com/todos/1";
axios.get(url)
.then(response => {
const todo = response.data;
const userId = todo.UserId;
const id = todo.Id;
const title = todo.Title;
const completed = todo.Completed;
console.log(userId, id, title, completed);
})
그리고 다음과 같이 요청을 했다고 해보자.
그럼 다음과 같이 출력된다.
사실 코드만 봐도 알 수 있지만, 변수명의 시작을 대문자로 했기에 undefined가 출력되게 된 것이다.
그렇기에 우선 TypeScript에서는 타입들을 미리 선언하고 해당 타입을 바탕으로 값을 가져올 수 있도록 한다.
interface Todo{
userId: number;
id: number;
title: string;
completed: boolean;
}
이렇게 interface로 이름과 멤버의 타입들을 미리 선언하고
import axios from "axios";
interface Todo{
userId: number;
id: number;
title: string;
completed: boolean;
}
const url = "https://jsonplaceholder.typicode.com/todos/1";
axios.get(url)
.then(response => {
const todo = response.data as Todo;
const userId = todo.userId;
const id = todo.id;
const title = todo.title;
const completed = todo.completed;
logTodo(userId, id, title, completed)
})
그 타입들을 바탕으로 값을 가져온다.
이 때 없는 변수명으로 접근을 하게 된다면, IDE에서부터 바로 에러가 발생한다.
또한 함수를 호출 할 때, 타입에 대한 실수를 할 수도 있다.
const logTodo = (
userId: number,
id: number,
title: string,
completed: boolean) => {
console.log(`${userId}, ${id}, ${title}, ${completed}`);
}
그렇기에 이렇게 변수들의 타입을 함수에서 미리 지정하고, 해당 타입을 바탕으로 함수를 사용할 수 있도록 해준다.
사실 이렇게 타입을 지정하지 않고 개발하는 것이, 알고리즘에서는 굉장히 편리했다.
내가 처음에 파이썬으로 알고리즘을 시작했던 이유도 그 이유였으니...
하지만 개발을 하는 과정에는 타입을 맞추는게 굉장히 중요하다고 점점 생각이 되었고, 이후에는 파이썬으로 개발하더라도 타입을 꼭 지정해가며 개발을 했었다.
타입스크립트를 사용해 더욱 안전하게 서버를 개발 할 수 있도록 해보자.
'Node > TypeScript' 카테고리의 다른 글
TypeScript에서 인터페이스 (0) | 2025.06.29 |
---|---|
TypeScript에서 튜플 (0) | 2025.06.29 |
TypeScript에서 배열 (1) | 2025.06.29 |
TypeScript에서 any 타입 (0) | 2025.06.29 |
TypeScript의 타입 어노테이션 및 타입 추론 (0) | 2025.06.29 |