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

기존에 자바로 개발을 했기에, 이런 인터페이스라는 개념은 정말 많이 사용했었다.

다형성, 추상화의 필수 개념으로 각 클래스들에서 공통적인 부분을 뽑아 상위 클래스 혹은 인터페이스 타입으로 각각 다른 동작을 수행할 수 있도록 만드는 방법이다.

이런 개념이 타입스크립트에도 존재한다고 한다.

물론 이 인터페이스를 통해 얼마나 객체 지향적인 개발을 할 수 있을지는 모르겠지만, 그래도 개념을 최대한 사용할 수 있도록 해보자.

전에 잠깐 블로그에 사용해서 글을 작성한 적이 있기는 하다.

interface Person{
    name: string;
    age: number;
    email: string;
}

이런 방법으로 선언한다.

사람이라는 객체가 가지고 있는 공통적인 특징들을 추출해서 정의한 것이다.

그리고 이러한 인터페이스를 바탕으로 함수를 파라미터로 넘긴다.

function sendEmail(person: Person){
    console.log(`${person.email}에게 메일을 전송했습니다.`);
}

만약 이런 함수가 존재한다면, 해당 key와 타입을 멤버로 가지고 있는 객체 혹은 객체 리터럴만 파라미터로 사용이 가능한 것이다.

let seungkyu_student = {
    name: "seungkyu",
    age: 27,
    email: "trust1204@gmail.com"
}

이런 객체 리터럴이나

아니면 그냥 이렇게 타입으로 인터페이스를 지정해둔

let seungkyu_army: Person = {
    name: "seungkyu",
    age: 25,
    email: "trust1204@gmail.com"
}

이런 객체 리터럴만 사용이 가능한 것이다.

여기에서 seungkyu_student라는 친구에 study()라는 함수를 추가해보자.

let seungkyu_student = {
    name: "seungkyu",
    age: 27,
    email: "trust1204@gmail.com",
    study(){
        console.log("승규는 공부 중입니다.")
    }
}

이렇게 추가를 하더라도

name: string,

age: number,

email: string

이런 멤버들은 여전히 객체 리터럴 안에 존재한다.

그렇기에 sendEmail 함수에 위의 객체 리터럴을 사용하더라도 에러가 발생하지 않는다.

이게 자바의 인터페이스와 다른 부분인 것 같다.

자바에서 인터페이스는 안의 멤버가 같더라도 상속을 받은 객체가 아니면 해당 함수들을 사용할 수는 없었다.

인터페이스에는 멤버 변수 외에도 함수를 넣을 수도 있다.

interface Person{
    name: string;
    age: number;
    email: string;
    walk(): void
}

이렇게 ()로 함수를 지정하고 반환타입을 지정해주면 된다.

이렇게 수정하면 기존에 Person 타입으로 수정해둔 모든 객체 리터럴에도 함수의 생성이 강요된다.

그리고 seungkyu_student에도 walk() 함수가 구현되어 있지 않기 때문에, Person 타입으로 볼 수 없어 파라미터로 사용할 수 없다고도 나온다.

분명 인터페이스는 좋은 방법이지만, 기존의 자바보다 더욱 자유로운 개념을 가진 것 같다.

최대한 객체지향으로 맞추어 타입스크립트에서의 인터페이스를 사용해보자.

잘 사용은 하지 않는다고 하지만, 그래도 한 번 알아보도록 하자.

let seungkyu = [
    "seungkyu",
    "trust1204@gmail.com",
    24
]

이런 변수가 있다고 해보자.

아마 위에서부터 이름, 이메일, 나이가 될 것이다.

하지만 그냥 배열로 넣었기에 어떤 위치에 어떤 타입의 값이 오는 것을 강제할 수 없다.

let seungkyu2 = [
    "seungkyu",
    24,
    "trust1204@gmail.com"
]

그렇기에 이런 값으로도 올 수 있는 것이다.

이러한 이유로 타입의 위치를 강제하기 위해, []안에 타입의 위치를 지정해준다.

let seungkyu1: [string, string, number] = [
    "seungkyu",
    "trust1204@gmail.com",
    24
]

이런 식으로 만들면 number와 string의 위치를 바꿀 수 없게 된다.

그냥 만드는 거보다는 유용하긴 하지만, 사실 이렇게 만들어도 seungkyu가 이름이고 trust1204@gmail.com이 이메일이라는 정보는 충분히 주지 못한다.

그렇기에 차라리 객체 리터럴 방식을 많이 사용한다고는 한다.

그래도 일단 알아는 두자.

자바스크립트에서의 배열은 이렇게 선언했었다.

타입이 없기 때문에 그냥 아무 값이나 배열에 추가했었다.

타입스크립트에서는 배열에도 어떤 타입의 값들을 넣을지 지정해준다.

let lang: string[] = ["c", "c++"," java"]

이런식으로 타입[]을 사용해 해당 타입이 배열임을 알려준다.

그리고 당연히 다른 타입을 값을 넣으려고 하면, 이렇게 에러가 발생한다.

만약 한 배열에 string과 number를 같이 넣고 싶다면

let lang: (string | number)[] = ["c", "c++"," java", 1]

이렇게 | 를 사용해서 string 혹은 number가 있다는 것을 알려준다.

하지만 배열이라는게 같은 타입의 객체들을 모으기 위해 사용하는 친구이기에, 이런 식으로 다양한 타입의 배열을 피하도록 하자.

이렇게 배열에 타입을 사용하는 이유가 있을까?

이렇게 배열 안의 원소들에 대해 타입을 지정해놔야.

해당 배열의 원소들에 접근할 때, 해당 원소들의 메서드를 가져올 수 있다.

그리고 해당 map에서 리턴타입을 빼도

이렇게 만들어지는 배열에 대한 타입 추론을 알아서 할 수 있다.

타입스크립트를 사용하는만큼 최대한 타입을 지정해서 사용할 수 있도록 하자.

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

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}`);
}

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

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

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

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

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