개요

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

Intro

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

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

즉 같은 부모(ES6+)에게서 나온 자식들이기 때문에 TypeScript는 JavaScript와 동일한 함수, 변수, 연산자를 사용할 수 있으며 완벽한 호환성을 자랑합니다.

또한 , Javascript에는 존재하지 않는 추가적인 보안 기능을 제공하므로 TS는 JavaScript의 상위집합언어 라고 할 수 있습니다.

1. 등장배경과 사용이유

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

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

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

1. JS의 문제점

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

// 자바스크립트에서는 아래 코드도 에러가 발생하지 않음
makePerson("짱구"); 
makePerson(31,"mkm"); // 반대로 넣어도 문제없음(js는 Dynamic Typing을 지원하며, 들어가는 값에
                      // 따라 자료형이 정해짐)
// 함수의 매개인자로 전달해야하는 값은 "매개변수명", 혹은 함수의 "주석"으로 파악해야함.

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

2. TS의 정적 타입 체크

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

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

//타입스크립트 방식 함수 선언
function makePerson(name :string, age : number){} 

//잘못된 타입 전달 시 컴파일 타임에 에러 발생
makePerson(1, 'mkm'); // name에 잘못된 자료형이 들어갔다는 에러발생

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

2. 동작원리

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

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

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

1. 전통적인 컴파일링 방식

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

2. Typescript 컴파일링 방식

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

왜 그럴까?

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

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

TypeScript에는 사실 Compiler가 없다

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

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

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

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

컴파일러와 트랜스파일러는 결과물이 다르지만, 대부분의 문맥에서는 혼용하여 사용되기도 합니다

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

3. 타입스크립트 컴파일 과정

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

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

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

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

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

TypeScript File -> TSC -> JavaScript File ES2024(ES6+) -> Babel -> JavaScript File ESXXXX

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

4. 요약

TypeScript는 JavaScript의 한계를 보완한 정적 타입 기반 언어로, 협업 효율과 코드 안정성을 획기적으로 개선시켜줍니다. JavaScript와 완전히 호환되며, 점진적인 도입이 가능해 대규모 프로젝트나 모던 프론트엔드 개발에서 널리 사용되고 있습니다. Vue, React, Angular 같은 프레임워크와도 매우 잘 어울리므로 프론트엔드 개발자에게는 사실상 필수적인 도구입니다.