728x90

개발을 하는 동안 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

+ Recent posts