100년 뒤 개발자 한승규입니다.

이러한 객체 리터럴이 존재한다고 해보자.

let seungkyu: {name: string, age: number} = {
    name: "seungkyu",
    age: 27
}

이거를 보내는 쪽에서는 어떤 타입들인지 알고 있겠지만, 만약 이거를 json으로 받는 상황이라고 해보면

그냥 이렇게 올것이고 이거를 JSON.parse로 파싱을 해도 안에 value들의 타입을 알 수 없다.

그렇기에 타입스크립트는 해당 타입을 그냥 any로 추론한다.

이렇게 any는 진짜 모든것이다.

여기에는 어떤 타입도 들어갈 수 있다.

let a: any = 1;

a = "seungkyu"

애초에 타입을 any로 선언하면 number를 넣었다가, string을 넣는 이런 방법도 가능해진다.

또한 이런 원시타입 말고도

객체도 any로 지정이 가능하다.

let seungkyu_info: {name: string, age: number, lived: any} = {
    name: "seungkyu",
    age: 27,
    lived: {
        country: "korea"
    }
}

이렇게 any 타입은 편리해보이지만, 역시 사용을 자제하는 것이 좋다.

사실 json을 response로 받더라도, 안의 형식은 이미 공식문서로 알고 있는 경우가 많다.

let seungkyu_info: {name: string, age: number, lived: any} = {
    name: "seungkyu",
    age: 27,
    lived: {
        country: "korea"
    }
}

어쩔 수 없는 경우에만 any 타입을 사용하고, 최대한 타입을 지정해서 사용하도록 하자.

이렇게 TypeScript가 JavaScript에 타입을 입히는 언어라고 알게 되었는데, 어떠한 방식으로 타입을 부여하는지 알아보자.

크게 타입 어노테이션과 타입 추론 방법이 있다.

타입 어노테이션

개발자가 해당 변수의 타입을 같이 작성해주는 것이다.

let number_variable: number = 1
let string_variable: string = "seungkyu";
let boolean_variable: boolean = true;

이렇게 변수 옆에 :를 사용해서 객체의 타입을 지정해주는 방식이다.

배열은 다음과 같이 선언한다.

let boolean_variables: boolean[] = [true, true, false];

당연히 객체의 타입으로 타입을 지정 할 수도 있다.

class Person{
    private readonly _name: string;
    constructor(name: string){
        this._name = name;
    }

    sayName(){
        return `${this._name} - hello`;
    }
}

let seungkyu: Person = new Person("seungkyu")

이렇게 타입을 지정해주면, IDE에서 해당 객체들의 메서드를 찾아서 보여줄 수 있다.

리터럴 객체는 키-밸류 사이에 지정할 수 없으니, 변수명 옆에서 지정한다.

let seungkyu1: {age: number, name: string} = {
    age: 24,
    name: "sk"
}

마지막으로 함수의 타입 어노테이션이다.

function a(name: string): string {
    return `${this._name} - hello`;
}

다음과 같이 파라미터의 타입은 파라미터의 변수명 옆, 리턴 타입은 파라미터 선언 후에 명시한다.

타입 추론

타입 추론은 말 그대로 추론하는 방식이다.

변수의 타입을 어노테이션으로 지정해주지 않아도, 타입스크립트가 알아서 타입을 찾아가도록 한다.

let a = 1;

이렇게 선언을 하면 a의 타입은 누가봐도 number이다.

그렇기에 IDE에서도 타입을 바로 찾아준다.

let a = 1;

a = "hello";

그렇기에 이렇게 number에다가 string을 대입하는 위의 코드는 에러가 발생한다고 한다.

타입추론도 정말 편리한 기능이다.

하지만 모두 타입추론으로 만들어버린다면, TypeScript를 사용하는 의미가 없어진다고 생각한다.

바로 값을 초기화하는 거 아니면 최대한 타입 어노테이션을 통해 타입을 명시적으로 알려주면서 개발하도록 해야겠다.

개발을 하는 동안 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}`);
}

그렇기에 이렇게 변수들의 타입을 함수에서 미리 지정하고, 해당 타입을 바탕으로 함수를 사용할 수 있도록 해준다.

사실 이렇게 타입을 지정하지 않고 개발하는 것이, 알고리즘에서는 굉장히 편리했다.

내가 처음에 파이썬으로 알고리즘을 시작했던 이유도 그 이유였으니...

하지만 개발을 하는 과정에는 타입을 맞추는게 굉장히 중요하다고 점점 생각이 되었고, 이후에는 파이썬으로 개발하더라도 타입을 꼭 지정해가며 개발을 했었다.

타입스크립트를 사용해 더욱 안전하게 서버를 개발 할 수 있도록 해보자.