2023-12-13 본캠프 50일차 / 69일차 TIL

2023-12-13 본캠프 50일차 / 69일차 TIL

타입스크립트 개념 공부

우아한 타입스크립트 with 리액트

자바스크립트의 한계

1. 동적 타입언어

자바스크립트 특징 중 하나가 동적 타입 언어라는 점이다. 이 말은 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변수값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다는 것을 의미한다. 예를 들어 변수 a의 타입이 number인지 string인지는 실제 코드가 동작하는 런타임에 결정된다.

2. 동적 타이핑 시스템의 한계

const sumNumber = (a,b) =>{
    return a+b;
};

sumNumber(1, 2); // 3
sumNumber(100); // NaN
sumNumber("a","b") // ab

위 코드를 봤을 때 의도된 바와 같이 함수를 사용하는 경우가 있는 반면, 두번째, 세번째 함수 실행 경우와 같이 의도된 바와 다르게 함수가 동작하는 경우도 있다.

문제는 이러한 의도와 다른 문법에 오류를 발생시키지 않는 다는 점이다.

자바스크립트에서는 이런 문제점을 해결하기 위한 몇가지 시도를 하였다.

3. 한계 극복을 위한 해결방안

• JSDoc
  JSDoc은 모듈, 네임스페이스, 클래스, 메서드, 매개변수 등에 대한 API 문서 생성도구이다. 주석에 @ts- check를 추가하면 타입 및 에러 확인이 가능하며 자바스크립트 소스코드에 타입힌트를 제공하는 HTML 문서를 생성할 수 있다. 하지만 주석의 성격을 띄고 있기 때문에 강제성을 부여하지는 않는다.

• propTypes
  propTypes는 리액트에서 컴포넌트 props의 타입을 검사하기 위해 사용하는 속성이다. prop에 유효한 값이 전달되었는지 확인할 수 있지만, 전체 애플리케이션의 타입 검사를 하는데는 사용할 수 없다. 또한 리액트라는 특정 라이브러리에서만 사용할 수 있다는 점에서 한계가 있다.

• 다트
  다트는 구글이 자바스크립트를 대체하기 위해 제시한 새로운 언어로 타이핑이 가능하다는 점에서 앞서 소개한 propTypes나 JSDoc 같은 강제성이 없는 보조 수단보다 근본적인 해결책으로 생각이 되었다. 그러나 자바스크립트가 이미 자리매김 했기 때문에 새로운 언어의 등장으로 개발의 파편화를 불러올 수 있기 때문에 자리 매김할 수 없었다.

위와 같이 자바스크립트의 동적 타이핑 시스템 한계를 극복하기 위한 노력은 있었지만, 결국 근본적으로 문제를 해결하지는 못했다. 따라서 자바스크립트 스스로가 인터페이스를 기술할 수 있는 언어로 발전해야한다는 목소리가 커졌다.

4. 타입스크립트의 등장

시간이 지나 마이크로소프트는 자바스크립트의 슈퍼셋 언어인 타입스크립트를 공개하였다. 다트와 달리 자바스크립트코드를 그대로 사용할 수 있고, 아래와 같은 단점을 극복할 수 있기 때문에 많은 환영을 받았다.

• 안정성 보장
  타입스크립트는 정적타이핑을 제공한다. 컴파일 단계에서 검사를 해주기 때문에 자바스크립트를 사용했을 때 빈번하게 발생하는 타입에러를 줄일 수 있고, 런타임 에러를 사전에 방지할 수 있어 안정성이 크게 높아진다.
• 개발 생산성 향상
  VSCode 등의 IDE에서 타입 자동 완성 기능을 제공한다. 이 기능으로 변수와 함수 타입을 추론할 수 있고, 리액트를 사용할 때 어떤 prop을 넘겨야 하는지 매번 확인하지 않아도 사용부에서 바로 볼 수 있기 때문에 개발 생산성이 크게 향상된다.
• 협업에 유리
  타입스크립트를 사용하면 복잡한 애플리케이션 개발/협업에 유리하다. 타입스크립트는 인터페이스, 제네락 등을 지원하는데 인터페이스가 기술되면 코드를 더 쉽게 이해할 수 있게 도와준다. 또한 복잡한 애플리케이션일수록 협업하는 개발자 수도 증가하는데 자동 완성 기능이나 기술된 인터페이스로 코드를 쉽게 파악할 수 있다.

5. 자바스크립트에 점진적으로 적용 가능

타입스크립트는 자바스크립트의 슈퍼셋이기 때문에 일괄 전환이 아닌 점진적 도입이 가능하다. 전체 프로젝트가 아닌 일부 프로젝트, 그 중에서도 일부 기능부터 점진적으로 도입이 가능하다.

---

타입이란?

1. 자료형으로서의 타입

모든 프로그래밍 언어는 변수를 선언하는 것부터 시작한다. 프로그래밍 언어에서 변수란 값을 저장할 수 있는 공간이자 값을 가리키는 상징적인 이름이다. 개발자는 변수를 선언하고 그 변수에 특정한 값인 데이터를 할당한다.

var name = 'zig';
var year = 2022;

2. 집합으로서의 타입

프로그래밍에서 타입은 수학의 집합과 유사하다. 타입은 값이 가질 수 있는 유효한 범위의 집합을 말한다.

const num:number = 123;
const str:string = "abc";

function func(n:number) {
    // ...
}

func(num);
func(str); //error

어떤 값이 T 타입이라면 컴파일러 (또는 개발자)는 이 값으로 어떤 일을 할 수 있고, 어떤 일을 할 수 있는지 없는지를 사전에 알 수 있다. 타입 시스템은 코드에서 사용되는 유효한 값의 범위를 제한해서 런타임에서 런타임에서 발생할 수 있는 유효하지 않은 값에 대한 에러를 방지해 준다.

function double(n) {
    return n * 2;
}

double(2); // 4
double("z"); // NaN

일반 자바스크립트의 경우에는 의도한 바와 다른 값이 들어왔을 때 다음과 같이 오류를 발생시키지 않는다.

3. 정적 타입과 동적 타입

자바스크립트는 런타임 중 할당을 통해 타입이 결정되는 동적타입 언어인 반면, 타입스크립트는 컴파일 타임에 모든 변수의 타입이 결정되는 정적언어라고 볼 수 있다. 이러한 정적타입 언어는 타입스크립트 외에 C, 자바 등이 있다. 대표적인 동적타입 언어에는 자바스크립트를 제외하고 파이썬이 있다.

동적 타입 시스템은 코드가 정상적으로 실행되고 실행된 다음에 오류가 검출된다. 따라서 코드를 에러없이 작성을 할 수 있지만, 어느부분에서 오류가 발생하는 지 예측하기 어렵다.

이에 반면 정적 타입 시스템은 컴파일타임에 에러가 검출되기 때문에 프로그램의 안정성을 보장할 수 있다.

4. 강타입과 약타입

타입이 결정되는 시점은 다르지만 모든 프로그래밍 언어에는 값의 타입이 존재한다. 자바스크립트는 개발자가 반드시 타입을 명시해 줄 필요가 없는 언어이다. 개발자가 의도적으로 타입을 명시하거나 바꾸지 않았는데도 컴파일러 또는 엔진 등에 의해서 런타임에 타입이 자동으로 변경되는 것을 암묵적 타입 변환이라고 한다.

암묵적 타입 변환 가능 여부에 따라 시스템을 강타입, 약타입으로 분류할 수 있다. 강타입 특징을 가진 언어에서는 서로 다른 타입을 갖는 값끼리 연산을 시도하면 컴파일러 또는 인터프리터에서 에러가 발생한다. 이에 반해 약타입 특징을 갖는 언어에서 서로 다른 타입을 갖는 값끼지 연산할 때 컴파일러 또는 인터프리터가 내부적으로 타입으로 판단하여 연산을 수행하고 값을 반환한다.

자바스크립트는 약타입 언어로 암묵적 타입변환이 가능하지만, 타입스크립트는 강타입 언어로 암묵적 타입변환이 불가하다.

약타입 언어는 연산 결과를 예측하기 힘들다는 단점이 있다. 따라서 오히려 강타입 언어와 같이 에러를 발생시키는 것이 안전한 코딩을 할 수 있다.

강타입 언어들에 타입을 할당하는 데 타입 시스템이 적용된다.
타입 시스템은 크게 두가지로 구분된다. 어떤 타입을 사용하는지를 컴파일러에 명시적으로 알려줘야하는 타입 시스템이 있고, 자동으로 타입을 추론하는 타입 시스템도 있다. 타입스크립트는 이 두가지 타입 시스템의 영향을 모두 받았다.
결론적으로 개발자는 직접 타입을 명시하거나, 타입스크립트가 타입을 추론하도록 하는 방식 중에서 선택할 수 있다.

5. 컴파일 방식

컴파일의 일반적인 의미는 사람이 이해할 수 있는 방식의 코드를 컴퓨터가 이해할 수 있는 기계어로 바꾸어 주는 과정을 말한다. 즉 개발자가 자바, C# 등의 고수준 언어로 소스코드를 작성하면, 컴파일러는 컴퓨터가 해석할 수 있는 바이너리(2진법) 코드로 변환한다.
그러나 타입스크립트의 컴파일 결과물은 여전히 사람이 이해할 수 있는 자바스크립트 코드이다. 타입스크립트가 탄생한 이유는 사람이 이해하기 쉬운 방식으로 코드를 작성하기 위해서가 아닌 자바스크립트의 컴파일 타임에 런타임 에러를 사전에 잡아내기 위한 것이다.
타입스크립트를 컴파일 하면 타입이 모두 제거된 자바스크립트 소스코드만이 남게 된다.

이처럼 타입스크립트는 다른 컴파일 언어와는 다른특징을 가지고 있다.
따라서 타입스크립트를 자바스크립트에 타입이라는 레이어를 끼얹은 일종의 템플릿 언어 또는 확장 언어로 해석하는 의견도 있다.