개요

TS에 대한 설명과 등장배경에 대해서 기술한 페이지

Typescript가 JS의 상위집합임을 표시하는 이미지1

Intro

TypeScript는 마이크로 소프트에서 개발하고 유지보수 하고 있는 프로그래밍 언어로 엄격한 타입 검증을 지원하는게 특징입니다.

TypeScript는 ES6+버전을 기반으로 만들어진 스크립트 언어이며 Javascript와는 형제나 다름 없습니다.

즉 같은 부모(ES6+)에게서 나온 자식들이기 때문에 TypeScript는 Javascript와 동일한 함수, 변수, 연산자를 사용할 수 있으며 Javascript에는 존재하지 않는 추가적인 기능을 제공하므로 TS는 javascript의 상위집합이라고 볼 수 있습니다.

설명만 들어보면 되게 복잡해 보일 수 있는데 쉽게 이해하자면 javascript의 변수나 메서드에 java처럼 자료형 개념을 추가한게 TypeScript라고 생각하면 되겠습니다.

등장배경과 사용이유

유연한 자바스크립트 코드 예시이미지 2

자바스크립트의 유연함은 이미 겪어 보셨을 겁니다. 자바스크립트는 동적 타입 언어이기 때문에 변수에는 타입(자료형)의 개념이 없고 변수에 값이 대입되는 순간 자료형이 결정되었습니다. 또한 함수에는 매개변수라는게 있는데 매개변수가 2개인 함수에 매개변수를 1개를 전달하던 ,2개를 전달하던 , 3개를 전달하던 아무 문제가 되지 않았죠. 이러한 유연함은 혼자 개발을 할때는 편리하게 느껴질 수 있지만 협업단계에서는 큰 골칫거리입니다.

협업시 다른사람의 코드를 사요할때 불편해 보이는 개발자이미지 3

모던 프로그래밍의 개발 방식은 대부분 협업으로 진행이 됩니다. 이때 내가 자바스크립트로 만든 코드를 다른 개발자가 사용해야 하는 경우나 반대의 상황이 온다면 어떻겠습니까? 함수의 매개변수로 적절한 매개인자가 무었인지? 반환되는 값은 무었이고 자료형은 무었인지 확인하기 위해서는 개발자가 남긴 주석을 확인하거나 직접 소스코드를 체크해보는 수 밖에 없을 겁니다.

만약 다른 개발자가 만든 함수에 제대로된 값을 넘기지 못하게 되는 경우에도 당장 코드상으로의 에러는 확인할 수 없을 것이며 잠재적인 에러요소로써 남아있을 것입니다.

// 개발자 KH수달이 개발한 코드
function makePerson(name, age){} 

// 개발자 KH짱구가 위 함수를 사용. 
// name = "짱구" , age = undefeind
makePerson("짱구"); // age에 값을 넣어주지 않았다. 즉 age에는 undefiend가 대입

// KH짱구는 에러가 발생하길래 두번째 매개인자로 값을 넣어 주었지만 순서를 반대로 넣었다.
// name = 31, age = ' mkm'
makePerson(31,"mkm");
/*
    위코드는 js입장에서 문제가 없음. js의 변수는 Dynamic typing을 지원하기 때문에 
    들어가는 "값"에 따라 자료형이 정해지기 때문이다. 즉 값을 제대로 전달하기 위해선 호출하는 함수
    의 매개인자에 어떤 값이 들어가야하는가 함수의 구현부분을 통해 유추하거나 , 주석등을 통해
    확인하는 수 밖에 없다.
*/

이러한 문제를 해결하기 위해 나온게 TypeScript입니다.

javascript에 강력한 타입체크기능을 추가하면서 개발자가 함수를 호출할 때 제대로 된 값을 전달하지 못한 경우 에디터(IDE)상에 컴파일 에러를 발생시켜서 런타임 에러를 사전에 방지시켜 주게 됩니다. 이를 정적 타입 체크라고 부릅니다.

타입스크립트를 사용하면 협업단계에서 코드의 안정성을 크게 늘릴 수 있으며 추후 유지보수성도 강력해지므로 대부분의 프론트 어플리케이션을 개발할 때 필수로 사용하는 언어로 자리매김하게 되었습니다.

// 타입스크립트 예시(이미지로 대체)
// 각 매개변수에 필요한 값들의 자료형이 무엇인지 바로 파악가능.
function makePerson(name :string, age : number){} 

//잘못 전달된다고 하더라도 코드를 실행시키기전 컴파일 시점에서 에러를 캐치해냄.(정적 타입 검사)
makePerson(1, 'mkm'); // name에 잘못된 자료형이 들어갔다는 에러발생

• 모던 프로그래밍에서 javascript(vue, react,angular)가 활용되는 어플리케이션을 개발할 때는 javascript대신 typescript를 사용 하는게 선택이 아닌 필수

동작원리

정통방식 컴파일 언어의 컴파일 방식 이미지5

타입스크립트는 문법에러가 발생하면 컴파일 에러를 발생시킨다고 했습니다.

추론해보자면 컴파일에러를 발생시키는 언어는 곧 컴파일 언어일 것이고 그렇다면 타입스크립트는 컴파일 언어라고 할 수 있습니다.

이는 맞는 말이지만 정통적인 방식의 컴파일 언어들과는 컴파일방식이 다릅니다.

자바를 예로 들면 자바는 Java Compiler에 의해 java코드가 바이너리 파일(class)로 변환된 뒤 실행됩니다. 이는 모든 컴파일언어가 가진 특징인데 각 언어의 Compiler에 의해 바이너리 파일로 변환되고 변환된 기계어가 플랫폼에서 실행되는거죠.

하지만 타입스크립트는 정통 컴파일 언어와는 다르게 타입스크립트 코드를 변환하면 바이너리 파일이 아닌 javascript파일이 똑 튀어나옵니다.

왜 그럴까?

트랜스파일러의 번역이미지지6

그 이유는 타입스크립트의 탄생 배경이 애초에 자바스크립트를 대체하기 위하여 나온 언어이기 때문입니다. javascript는 몇 십년 동안 꾸준히 사용되고 유지보수 되고 있는 언어로 자바스크립트로 개발된 애플리케이션은 무수히 많습니다.

이를 한번에 Typescript로 대체하기란 불가능한 일이기 때문에 Typescript는 javascript와의 호환성 유지를 위해 Typescript코드를 컴파일한 후 javascript 코드로 변환해준 후 애플리케이션에게 javascript코드를 실행하게 합니다.

Typescript에는 사실 Compiler가 없다

컴파일러는 원본 소스코드를 바이너리파일로 변환해주는 도구들을 의미하는 단어입니다.

Typescript는 소스코드를 바이너리 파일이 아닌 javascript파일로 변환합니다.

이렇게 소스코드를 바이너리 파일이 아닌 다른 언어의 소스코드로 변환해주는 도구는 컴파일러가 아닌 트랜스파일러(Transpiler)라고 부릅니다.

즉 Typescript는 소스코드를 컴파일하는게 아니라 번역처리를 한다고 표현합니다.

다만 컴파일러나 트랜스파일러나 기능은 유사한데 대중적으로 많이 사용되는 단어는 컴파일러 이므로 통틀어서 그냥 컴파일러라고 부릅니다.

실제로 Typescript에서 개발한 자체 트랜스파일러의 이름을 Type Script Compiler라고 작명했습니다. 당연히 훨씬 많이 사용하는 단어가 컴파일러이기 때문이죠

타입스크립트 컴파일 과정

타입스크립트는 총 2번의 과정을 거쳐서 TypeScript의 코드를 javascript의 코드로 변환합니다.

1차적 으로 Typescript로 작성된 소스코드를 자체 트랜스파일러인 TSC(Type Script Compiler)를 이용하여 최신 버전(ES6+)의 자바스크립트 코드로 변환합니다.

그 후 Babel이라는 트랜스파일러를 통해 ES6+버전의 자바스크립트 코드를 원하는 버전(ES?? )의 자바스크립트 코드로 다시 변환합니다.

변환 흐름을 요약하면 아래와 같습니다.

Typescript File -> TSC -> Javascript File ES2024(ES6+) -> Babel -> Javascript File ESXXXX

출처: https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/

이렇게 변환된 코드는 각 브라우저의 Javascript엔진에 의해 실행됩니다.