타입스크립트
타입스크립트는 자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 언어이다. 자바스크립트의 확장판이라 볼 수 있다.
- JavaScript
let a = 1;
let b = 2;
console.log(a + b); // 3- TypeScript
let a:number = 1;
let b:number = 2;
console.log(a + b); // 3두 언어는 비슷하게 생긴 것을 볼 수 있다.
원래 사용하던 자바스크립트 코드에 타입을 정의하는 코드를 추가하면 타입스크립트 코드가 되는 것이다. 그렇기 때문에 자바스크립트에서 사용하던 문법 그대로 사용이 가능하다. 타입스크립트를 다루기 위한 추가적인 기능들만 공부하면 빠르게 프로젝트에 활용이 가능하다.
등장배경
자바스크립트는 웹사이트에서 간단한 상호작용을 처리하기 위해 개발되었다. 그래서 엄격한 문법을이 필요하지 않았다. 이는 코드를 간결하게 작성하고 빠르게 구현하는데 초점을 두었기 때문이다. 그런데 Node.js의 등장으로 자바스크립트 코드를 어디서든 실행할 수 있게 되면서 어떤 프로그램이든 자바스크립트로 개발할 수 있게 되었다. 그래서 자바스크립트의 한계가 사라지며 전성기가 도래했다.
하지만 자바스크립트로 복잡한 앱을 개발하다 보니 문제가 발생했다. 엄격하지 못한 타입 시스템으로 자바스크립트의 유연함이 버그 발생 가능성을 높혀 프로그램에 안정성을 떨어지게 만드는 단점이 되었다.이러한 문제로 자바스크립트의 기존 문법과 매력은 유지하면서 안정성을 확보할 수 있는 언어가 필요했다. 타입 관련 기능들을 추가한 언어인 타입스크립트가 등장하게 된 배경이다.
자바스크립트의 한계점과 타입스크립트
모든 프로그래밍 언어에는 타입 시스템이 존재한다.
- 값들을 어떤 기준으로 묶어 타입을 규정할 것인가?
- 코드의 타입을 언제 검사할지?
- 어떻게 타입을 검사할지?
이러한 규칙들을 모아둔 체계를 타입 시스템이라고 한다.
타입시스템은 정적 타입 시스템과 동적 타입 시스템으로 나눌 수 있다. 정적 타입 시스템은 코드 실행 이전 모든 변수의 타입을 고정적으로 결정며, 동적 타입 시스템은 코드를 실행하고 나서 유동적으로 변수의 타입을 결정한다.
C, Java는 정적 타입 시스템으로 엄격하고 고정적인 시스템을 가지고 있고, Python과 JavaScript는 동적 타입 시스템으로 자유롭고 유연한 시스템이라고 볼 수 있다.
동적 타입 시스템
자바스크립트가 사용하는 동적 타입 시스템은 변수의 타입들을 코드가 실행되는 도중에 결정되기 때문에 우리가 직접 정의하지 않으며, 타입이 하나로만 고정되어 있지 않아 아무 타입의 값을 자유롭게 담을 수 있다.
let a = "hello"; // string
a = 7; // number하지만 이러한 유연함 때문에 런타임 에러 발생 가능성을 지니고 있다.
let a = "hello";
a = 7;
a.toUpperCase();위와 같이 string 메소드인 toUpperCase()를 사용하게 되면 에러가 발생하면서 프로그램이 비정상 종료된다. 지금 변수 a에는 number 타입인 7이 담겨있기 때문에 오류가 발생한다. 여기서 볼 것은 실행이 되었다는 점이다. 애초에 오류가 발생할 코드였다면 검사를 걸쳐 실행이 되지 않도록 막는게 좋다.
지금과 같이 코드가 복잡하지 않다면 어떤 오류인지 바로 파악이 가능하지만, 복잡한 코드에서 발생한 오류는 예상치 못한 오류로 당황하게 되고, 프로그램이 종료되면서 서비스가 마비될 수도 있을 것이다.
정적 타입 시스템
정적 타입 시스템은 코드를 실행하기 전에 모든 변수의 타입을 결정하게 된다. 그래서 변수의 타입을 결정해 주어야 한다.
문자열 타입인 a 변수를 선언하고 "hello" 문자열을 할당하고, 숫자 타입인 b 변수를 선언하고 123 숫자를 할당 했다. 그 후 숫자 타입 변수 c에 문자열 타입 a와 숫자형 타입 b를 곱한 값을 할당하도록 하면 에디터 상에서 바로 빨간줄로 잘못되었다고 알려주게 된다.
문자열과 숫자를 곱하는 것은 잘못된 연산이기 때문에 오류를 바로 보여주게 된다. 이렇게 타입에 관련한 오류가 있다면 바로 오류를 알려주고 코드를 실행하기 전에 타입 검사가 진행되기 때문에 실수를 미리 파악할 수 있다. 하지만 정적 타입 시스템에서 모든 변수의 타입을 정의해야 하기 때문에 코드량이 늘어나게 된다는 단점이 존재한다.
타입스크립트와 점진적 타입
타입스크립트는 독특한 타입 시스템을 사용한다. 마치 동적 타입 시스템과 정적 타입 시스템을 같이 사용하는 듯한 모습을 보인다. 동적 타입 시스템 처럼 모든 변수에 타입을 지정할 필요가 없다.
변수 a를 숫자 타입으로 자동으로 인지해서 코드에 오류가 있음을 빨간줄로 알려준다. 변수가 초기화 될 때 값을 기준으로 자동으로 타입을 추론한다.
이처럼 정적 타입 시스템이 갖는 안정성을 채택하면서 모든 변수의 타입을 선언해야하는 불편함을 해결한 시스템을 점진적 타입 시스템이라고 부른다.
타입스크립트 동작 원리
프로그래밍 언어는 인간에게 친화적인 언어이다. 컴퓨터는 이진수, 기계어 같은 단순한 형태의 언어를 기반해서 동작한다. 그래서 프로그래밍 언어는 컴퓨터가 이해하고 실행할 수 있도록 컴파일 과정을 거쳐야한다.
타입스크립트도 또한 컴파일 과정이 이루어진다. 다른 언어들과 동일하게 AST로 변환한 뒤, 타입을 검사하는 Type Checking을 거친다. 만약 이때 잘못된 코드로 타입 에러가 있다면 컴파일을 종료한다. 만약 검사가 성공하면 AST를 자바스크립트로 변환하며 컴파일이 종료된다.
결과로 만들어진 자바스크립트 코드는 Node.js나 웹 브라우저로 실행하면 컴파일 과정을 거쳐 실행하게 된다. 중요한 것은 타입스크립트로 컴파일된 자바스크립트 코드는 타입 검사가 이루어져 오류 발생이 낮은 안전한 코드가 된다. 그리고 자바스크립트로 변환될 때 타입과 관련된 코드들은 모두 사라지게 된다.
한 입 크기로 잘라먹는 타입스크립트(TypeScript)를 수강하고 정리한 글
