[데브코스] 69일차 TIL (드디어 타입스크립트)
데브코스
공부
TIL
javascript
typescript
2022-06-30

들어가며

중간 프로젝트가 끝난 지 벌써 1주일이 다 돼간다. 프로젝트 기간 동안 고생했다는 핑계로 TIL 정리하는 걸 소홀히 했던 것 같다. 리액트 심화 내용을 배우고 있는데, 하나 하나 다 배우고 싶었던 것들이라 강의를 듣는 것도 신이 난다. 앞으로 최종 프로젝트까지 열심히 공부해서 프로젝트 동안 1인분 할 수 있었으면 좋겠다.

타입스크립트

타입스크립트란 이름에서 알 수 있는 것처럼 자바스크립트에 타입을 부여한 언어이다. 마이크로소프트가 개발했다고 한다. 자바스크립트는 타입이 없는 언어이다. 정확히 말하면 타입을 동적으로 설정한다.

1  let count = 1;
2  

3  count = "hello"; // 이상 없음

위와 같은 코드가 있을 때 자바스크립트는 count 라는 변수에 1이라는 값이 들어가는 것을 보고 숫자 타입이라고 결정한다. count 변수에 다른 타입의 값을 넣어도 문제가 없다. 그렇기 때문에 개인적으로 자바스크립트를 처음 공부할 때 타입을 신경쓰지 않아도 돼서 편했다.
타입이 동적으로 결정되는 것은 매우 편리하지만 편리한 만큼 단점이 존재한다. 자바스크립트를 사용한 프로젝트의 규모가 커지거나, 여러 사람이 함께 협업을 해야 하는 경우 자바스크립트의 동적 타이핑이 문제가 될 수 있다. 아래의 예시를 보자.

1  let id = 123;
2  

3  // 5000만줄의 코드
4  

5  id = "123";
6  

7  const obj = {
8    name: "jeongki",
9    age: 26,
10  };
11  

12  console.log(obj.hello()); // 에러 발생

엄청난 규모의 프로젝트를 진행한다고 생각해보자. 코드 초반부에 id 라는 변수를 선언하고 해당 변수에 123이라는 Number 타입의 값을 할당했다. 그 이후 5000만 줄의 코드를 작성하고 id 변수에 값을 할당하려고 하는데 id 값의 타입이 헷갈려서 다른 타입의 값을 할당할 수도 있다. 헷갈리는 상황에서 스크롤을 올려 id 변수에 들어간 값을 확인해야 하는데 매우 비효율적이다. 또, 자바스크립트 엔진에 의해 자동으로 타입이 변환 될 가능성도 있다. 예상하지 못한 부분에서 형변환이 일어나 에러가 발생한다면 이 또한 매우 비효율적이다. 객체 리터럴로 객체를 정의하고, 없는 메서드를 실행하려고 하면 오류가 발생한다. 실행하기 전에 이런 오류를 검출해주는 기능이 있으면 좋을 것 같다.

이 때 사용할 수 있는 것이 타입스크립트이다. 변수나 상수, 함수의 반환 값 등에 타입을 지정할 수 있는데 타입이 있을 때의 장점은 크게 두 가지가 있다.

  1. 안정성: 타입스크립트를 자바스크립트로 컴파일하는 단계에서 미리 오류를 감지할 수 있기 때문에, 위의 예시 코드에서 객체 내부에 없는 메서드를 호출하는 경우에 실행 전에 오류를 수정할 수 있다.
  2. 가독성: 정의된 타입을 보고 해당 변수가 어떤 타입을 받아야 하는지, 어떤 역할을 하는지 미리 알 수 있다.

타입이 있다는 장점으로 많은 사람들이 사용하고 있지만, 장점이 있는 만큼 단점 또한 존재한다.

  1. 초기 설정이 필요하다. 타입스크립트는 자바스크립트 코드로 변환하는 과정이 필요하기 때문에 컴파일 설정이 필요하다.
  2. 스크립트 언어의 유연성이 낮아진다.
  3. 컴파일 시간이 길어질 수 있다. 타입스크립트에서 자바스크립트로 변환하는 과정에서 시간이 오래 걸릴 수 있다.

그러나 이런 단점을 무시할 만큼 타입스크립트가 좋기 때문에 많은 사람들이 사용하고 있다.

타입스크립트 문법

  1. 타입 주석 / 타입 추론

    1  let count: number = 3;
    2  let name: string = "jeongki";
    3  let isLoading: boolean = false;
    4  let obj: { name: string; age: number } = {
    5    name: "jeongki",
    6    age: 26,
    7  };
    8  let arr: number[] = [1, 2, 3];
    9  let test: any = "hello";
    10  let test2: void = undefined;

    변수명 옆에 : 와 함께 해당 변수의 타입을 선언할 수 있다. 이를 타입 주석이라고 한다. 타입의 종류도 많고 사용하는 방법도 다양한데 자세한 정보는 공식 문서를 참고하면 좋을 것 같다.
    만약 타입을 지정하지 않으면 코드가 제대로 동작하지 않을까? 그렇지 않다. 타입 주석 없이 작성하게 되면 할당된 값의 타입을 확인해 해당 타입으로 지정해준다. 이를 타입 추론이라고 한다.

  2. 인터페이스 객체의 타입을 정의하기 위한 방법이다. interface 라는 키워드를 사용해 정의할 수 있다.

    1  interface Person {
    2    name: string;
    3    age: number;
    4    gender: string;
    5  }

    위와 같이 작성하면 객체 내부에 name, age, gender 라는 이름의 속성을 포함해야 하고, 각각의 속성의 타입 또한 지정한 대로 만족해야 한다.

    1  const jeongki: Person = {
    2    name: "jeongki",
    3    age: 26,
    4    gender: "male",
    5  };

    이렇게 정의하게 되면 인터페이스에서 정의한 속성 값을 객체가 모두 가지고 있어야 한다. 해당 속성이 객체에 정의되어 있지 않으면 에러가 발생한다. 만약 있어도 되고 없어도 되는 선택 속성이라면 ? 를 사용할 수 있다.

    1  interface Person {
    2    name: string;
    3    age: number;
    4    gender?: string; // 선택 속성임.
    5  }
    6  

    7  const jeongki: Person = {
    8    name: "jeongki",
    9    age: 26,
    10  };

  3. 대수 타입 여러 타입의 값을 가질 수 있게 하는 방법이다. 합집합 타입과 교집합 타입으로 나뉜다.

    • 합집합 타입:
      1  let numOrStr: number | string = 1; // number 또는 string 타입
    • 교집합 타입: 교집합 타입은 아래의 코드를 보면 확인할 수 있는데, 원시 타입에는 사용이 불가능하다. 보통 인터페이스에서 사용된다고 한다.
      1  let numAndStr: number & string = 1; // 불가능

  4. 제네릭 하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법이다.

    1  interface Value<T> {
    2    value: T;
    3  }
    4  

    5  let age: Value<number> = 12;
    6  let name: Value<string> = "jeongki";

  5. 인터페이스 재활용 만들어진 인터페이스를 재활용 하는 방법이 있다. Partial, Required, Pick, Omit 등의 유틸리티 타입(또는 제네릭 타입)을 사용해 재활용 할 수 있다.

    • Partial: 기존에 정의된 인터페이스의 속성을 모두 선택 속성으로 바꾼다.

      1  interface Test {
      2      name: string;
      3      age: number;
      4  }
      5  

      6  const value: Partial<Test> {
      7      // 모든 속성이 optional 로 변경되었기 때문에 에러가 발생하지 않음
      8  }

    • Required: 기존에 정의된 인터페이스의 속성을 모두 필수 속성으로 바꾼다.

      1  interface Test {
      2      name?: string;
      3      age?: number;
      4  }
      5  

      6  const value: Required<Test> {
      7      // 모든 속성이 required 로 변경되었기 때문에 에러가 발생함
      8  }

    • Pick: 기존에 정의된 인터페이스에서 특정 속성만 뽑아 사용한다.

      1  interface Test {
      2      name: string;
      3      age: number;
      4  }
      5  

      6  const value: Pick<Test, 'name'> {
      7      name: 'jeongki'
      8  }

    • Omit: 기존에 정의된 인터페이스에서 특정 속성만 제외하고 사용한다.

      1  interface Test {
      2      name: string;
      3      age: number;
      4      gender: string;
      5  }
      6  

      7  const value: Omit<Test, 'gender'> {
      8      name: 'jeongki',
      9      age: 26
      10  }

    이 외에도 많은 유틸리티 타입이 있다. 자세한 내용은 공식 문서에서 확인할 수 있다.

  6. 인터페이스 상속 인터페이스 상속을 위해 extends 키워드를 사용한다.

    1  interface Person {
    2    name: string;
    3    age: number;
    4  }
    5  

    6  interface ForeignPerson extends Person {
    7    nationality: string;
    8  }

정리

간단하게 배운 내용을 정리해보았다. 이 외에도 공부해야 할 것들이 많은 것 같다. 혼자 CRA로 타입스크립트 연습해 보려고 했는데, 어디에 어떻게 타입을 지정해야 할 지 아직은 막막한 것 같다. 예전에 사둔 타입스크립트 책이랑 공식 문서, 노마드 코더에 있는 타입스크립트 강의를 중심으로 빠르게 공부해야겠다.

참고자료

프로그래머스 데브코스
https://www.typescriptlang.org/docs/handbook/

Loading script...
copyright 2021-2022. Jeongki.dev