개요
안녕하세요 이정환입니다.
타입스크립트란 어떤 언어인지, 왜 탄생하게 되었는지, 세계적으로 또는 국내에서 얼마나 사용되고 있으며, 어떤 장점을 가지고 있는지 알아보는 시간을 갖겠습니다. 추가로 타입스크립트는 자바스크립트의 확장판 언어인 만큼, 자바스크립트에 비해 어떠한 차별점이 있으며 어떤 장점을 갖는지 살펴봅니다.
(틀리거나 잘못된 내용이 있다면 알려주세요 🥲)
타입 스크립트란?
세계적으로 많은 프로그래머들에게 사랑을 받고 있는 타입스크립트는 2012년 마이크로소프트의 개발자 ‘Anders Hejlsberg’의 손에서 처음 탄생했습니다. 타입스크립트는 오픈소스로 개발되었습니다. 따라서 누구나 자유롭게 무료로 사용할 수 있으며 원한다면 언어의 방향성에 직접 기여하는 것 또한 가능합니다.
TypeScript
microsoft • Updated Aug 31, 2023
타입스크립트의 위상
먼저 타입스크립트가 얼마나 많은 인기를 누리고 있는지 알아봅시다.
오늘날 타입스크립트는 자바스크립트 개발자들에게 피할 수 없는 하나의 대세가 되었습니다.
StateofJS 2022년도 설문조사 통계에 따르면 절반 이상의 자바스크립트 프로그래머들은 이미 타입스크립트를 적극적으로 채택하여 프로젝트에 활용하고 있다는 사실을 알 수 있습니다. 심지어 가장 높은 비율인 28%의 개발자들이 100% 타입스크립트를 활용하고 있다는 사실도 알 수 있습니다.
StateofJS는 영어권의 자바스크립트 개발자들을 대상으로 매년 설문조사를 실시하고 통계 결과를 발표하는 꽤나 이름있는 프로젝트입니다.
타입스크립트의 인기는 영어권 뿐만 아니라 국내에서도 유효합니다. 취업시장의 우대 및 자격 요건에서 타입스크립트를 심심치 않게 자주 발견할 수 있으며, 2022 프로그래머스의 국내 개발자 대상 설문 조사 결과 타입스크립트는 새롭게 배우고 싶은(또는 배울 필요성을 느끼고 있는) 프로그래밍 언어 3위에 등극했습니다.
이렇게 타입스크립트의 인기가 대단하니 자바스크립트 개발자들에게 타입스크립트는 피할 수 없는 하나의 대세가 되었습니다. react, vue, angular 등을 포함하여 인기있는 대다수의 자바스크립트 라이브러리는 이미 타입스크립트를 지원하고 있으며 nest.js 처럼 타입스크립트 사용을 강제하는 백엔드 프레임워크도 등장했습니다.
타입스크립트는 자바스크립트의 확장판
타입스크립트는 어떤 언어이길래 이렇게 자바스크립트 개발자들로부터 많은 사랑을 받고 있을까요?
타입스크립트는 자바스크립트와 완전히 다른 언어가 아닙니다. 타입스크립트는 기존의 자바스크립트에 ‘타입’을 추가한 언어로 쉽게 말하면 자바스크립트의 확장판이라고 볼 수 있습니다.
프로그래밍에서는 보통 이런 확장판을 상위 집합이라는 뜻으로 ‘슈퍼 셋(Super Set)’이라고 부릅니다. 반대로 자바스크립트는 타입스크립트의 하위 집합이라는 뜻으로 ‘서브 셋(Sub Set)’이라고 부릅니다.
여담으로 C++와 C 또한 슈퍼셋 ↔ 서브셋 관계로 타입스크립트와 자바스크립트와 유사한 관계를 갖고 있습니다.
타입스크립트는 자바스크립트의 슈퍼셋이므로 기본적으로 자바스크립트의 문법을 따르며 기존에 사용하던 모든 자바스크립트의 문법과 기능을 사용할 수 있습니다. 아래는 두개의 변수에 저장된 숫자를 더하는 기능을 각각 자바스크립트와 타입스크립트로 작성한 예 입니다.
// JavaScript let a = 1; let b = 2; consol.log(a + b);
// TypeScript let a:number = 1; let b:number = 2; console.log(a + b);
기존 자바스크립트는 왼쪽 코드처럼 변수에 타입을 명시할 수 없었습니다.
그러나 타입스크립트는 오른쪽 코드처럼 변수를 선언하고
:number 처럼 이 변수는 숫자 타입을 갖는다고 프로그래머가 직접 타입을 명시할 수 있습니다. 타입을 지정하는 방식에 대해서는 나중에 자세히 다룹니다.타입이 추가되면 작성해야 하는 코드의 양은 증가할 수 있지만 기존보다 훨씬 더 견고한 프로그램을 작성하기 용이합니다. 이는 복잡한 대규모 어플리케이션을 개발하는데에 큰 도움이 됩니다.
그러므로 자바스크립트를 이미 사용하고 있는 사람이라면 타입스크립트를 채택하지 않을 이유가 없습니다. 기존에 잘 쓰고 있는 자바스크립트의 문법을 그대로 사용하면서 추가된 ‘타입’ 기능을 활용해 더 견고한 프로그램을 만들 수 있기 때문입니다. 또 자바스크립트를 처음 배울 때 처럼 처음부터 모든 개념을 다시 배우지 않아도 됩니다.
여기서 잠깐
그렇다면 타입스크립트에 추가된 ‘타입’이란 정확히 무엇을 의미하는 걸까요?
프로그래밍에서 타입(Type)이란 값의 종류를 말 합니다. 예를 들어 숫자 10은 숫자 타입이고 문자 “10”은 문자 타입으로 종류를 나눠 분류할 수 있습니다.
타입은 우리말로 ‘유형’입니다. 오늘날 유행하는 MBTI로 사람들을 여러 유형으로 분류할 수 있는 것 처럼
프로그래밍에서는 값을 유형에 따라 분류하고 이렇게 분류된 유형들을 ‘타입’이라고 부릅니다.
타입 스크립트가 탄생한 이유는 자바스크립트가 잘 나가서
사실 자바스크립트는 이미 세계적으로 많은 사랑을 받고 있는 훌륭한 언어입니다.
당장 2022년도 Stackoverflow의 개발자 설문 조사 결과 세상에서 가장 인기있는 프로그래밍 언어 1위에 등극 될 정도로 자바스크립트는 많은 프로그래머들에게 사랑을 받고 있습니다.
그럼 이미 자바스크립트는 많은 사랑을 받고 있는데도 굳이 타입스크립트를 만들어 가며 자바스크립트에 ‘타입’을 추가해야 하는 이유는 무엇 일까요?
그 이유는 아이러니 하게도 자바스크립트가 생각보다 너무 잘나가서 그렇습니다.
사실 자바스크립트는 원래 웹 사이트에서 아주 간단한 상호 작용 정도를 처리하기 위해 만들어졌습니다. 예를 들면 사용자가 웹사이트에서 버튼을 클릭 했을 때 수행할 동작 정도를 만들기 위해 개발되었습니다.
그래서 자바스크립트는 매우 유연한 문법을 갖도록 설계되었습니다. 안정성이나 견고함을 일부 포기하고 프로그래머가 쉽고 빠르게 코드를 작성하는데에 중점을 두고 만들어졌죠 간단한 프로그램을 만드는데 필요 이상의 견고함을 갖출 필요는 없었으니까요 애초에 복잡한 프로그램을 만들기 위해 개발된 C 또는 Java같은 언어와는 태생 자체가 달랐다고 볼 수 있습니다.
그런데 어느날 Node.js가 등장했습니다. Node.js는 자바스크립트의 새로운 런타임(실행 환경)으로 웹 브라우저에서만 동작할 수 있던 자바스크립트를 모든 환경에서 동작할 수 있도록 날개를 달아주었습니다.
그러자 기존에 자바스크립트를 만족스럽게 사용하던 프로그래머들이 자바스크립트를 이용해 다양한 프로그램을 만들기 시작했습니다. 자바스크립트를 이용해 간단한 웹 서버를 개발하는 것으로 시작해 오늘날에는 페이스북이나 인스타그램 같은 모바일 어플리케이션을 만들거나 카카오톡 같은 데스크탑 어플리케이션을 만드는데에도 활용됩니다. 자바스크립트의 한계가 사라졌고 그야말로 자바스크립트의 전성기가 도래 했다고 볼 수 있습니다.
자바스크립트는 이런 눈부신 진화를 거쳐 오늘날에는 넷플릭스나 에어비엔비같은 거대한 서비스를 지탱하는 아주 복잡한 서비스의 백엔드 서버를 개발하는데까지 활용되고 있습니다.
그런데 이렇게 복잡한 대규모 어플리케이션을 자바스크립트로 개발하다 보니 한가지 문제가 있었습니다. 그건 바로 자바스크립트가 너무 유연하다는 것 입니다. 앞서 자바스크립트는 원래 웹에서 일어나는 간단한 상호작용을 처리하기 위해 일부러 유연하게 개발된 언어라고 이야기 한 적 있는데요
이제는 자바스크립트가 간단하지 않은 복잡한 프로그램을 만드는데 활용되니 오히려 이 유연함이 프로그램의 안정성을 떨어뜨리는 단점이 되어 버린 것 입니다.
그래서 복잡한 프로그램을 만들기위해 자바스크립트는 좀 더 엄격해질 필요가 있었고 그 과정에서 ‘타입’이 추가된 자바스크립트인 타입스크립트가 등장하게 되었습니다.
자바스크립트의 유연한 타입 시스템
앞서 자바스크립트의 장점인 유연함이 되려 복잡한 프로그램을 작성할 때 오히려 단점이 된다고 이야기 했습니다.
그렇다면 구체적으로 어떤 점이 그리 유연 하길래 복잡한 프로그래밍이 힘들어 지게 된 것 일까요?
정답은 자바스크립트의 타입 시스템에 있습니다.
타입 시스템은 일종의 코드 검사기라고 할 수 있는데요 타입 시스템은 우리가 작성한 코드를 실행하기 전에 올바른 타입을 사용했는지 또 올바른 연산을 적용했는지 검사합니다. 예를 들어 우리가 문자열과 숫자를 곱셈 연산 하려고 하면 이는 잘못된 수치 연산이라고 알려주는 그런 기능을 한다고 생각하시면 됩니다.
let a = 1; let b = "hello"; console.log(a * b); // 출력 : NaN
위 코드가 만약 엄격한 타입 시스템을 사용하는 자바나 C같은 언어였다면 아마 실행 되지도 못할 겁니다. 자바스크립트는 다른 언어에 비해 매우 관대한 타입 시스템을 사용하기 때문에 이런 수치 연산의 오류는 무시합니다.
물론 자바스크립트에는
NaN 이라는 수치 연산 오류를 의미하는 특수한 값이 있기 때문에 이 코드를 실행한다고 프로그램이 중간에 갑자기 종료되거나 하지는 않습니다. 정상적으로는 실행 됩니다.그런데 다음과 같은 코드를 작성하고 실행하면 오류가 발생합니다.
let a = "this is string"; a(); console.log("hello"); // [실행 결과] // > node index.js // TypeError: a is not a function // at Object.<anonymous> ... 중략
변수 a에는 “this is string”이라는 문자열을 담았는데 a가 마치 함수인 것으로 착각하여 함수 호출을 했습니다. 이것은 누가봐도 분명 잘못 되었습니다.
그런데 자바스크립트는 이런 오류를 감지하지 않고 그대로 프로그램을 실행합니다. 그리고 오류가 발생하고 프로그램이 종료됩니다. a를 호출한 시점에서 이미 예외가 발생하여 프로그램이 종료되기 때문에 그 아래의
console.log는 실행 되지도 못합니다.이것은 자바스크립트의 타입 시스템이 프로그램이 실행 중일 때(런타임)에 변수와 값의 타입을 동적으로 지정하기 때문입니다. 이렇게 프로그램이 실행 중일 때 즉 런타임에 변수와 값의 타입을 결정하는 것을 동적 타이핑(Dynamic Typing)이라고 합니다. 자바스크립트와 유사하게 동적 타이핑을 사용하는 언어로는 대표적으로 Python이 있습니다.
이런 동적 타이핑은 변수에 숫자 타입을 넣었다가 문자 타입을 넣었다가 하는 등의 유연함을 장점으로 갖지만 프로그램 실행 이전에 오류를 확인하기 어렵기 때문에 복잡한 프로그램을 만들 때에는 오히려 단점이 될 수 있습니다.
타입스크립트의 점진적 타이핑
타입 스크립트는 자바스크립트와 달리 코드를 실행하기 전에 타입을 검사합니다. 아래의 코드를 자바스크립트를 이용하면 문제 없이 실행 하지만 타입스크립트를 이용할 때에는 오류가 감지되어 실행되지 않습니다.
let a:string = "this is string"; a(); // 오류 : 이 식은 호출할 수 없습니다. 'String' 형식에 호출 시그니처가 없습니다.ts(2349) console.log("hello");
이렇게 타입스크립트는 자바스크립트와는 달리 프로그램을 실행하기 전에 미리 오류를 검사합니다. 런타임(프로그램이 실행 중 일때)이 아닌 컴파일 타임(프로그램을 해석할 때)에 검사합니다.
그렇기 때문에 타입스크립트에서는 이런 말도 안되는 코드를 작성하면 프로그램 실행을 막아버리기 때문에 프로그래머의 실수를 방지합니다. 그 결과 비교적 더 안전하고 견고한 프로그램을 설계할 수 있다는 장점을 갖습니다.
타입스크립트의 이런 특징은 Java 또는 C의 타입 시스템과 유사해 보이는데요 완전히 유사하지는 않고 타입스크립트는 그보다는 조금은 덜 엄격합니다.
(마치 아빠보다는 덜 무서운데 엄마보다는 더 무서운 형 정도 된다고 봐야 할까요 ..?)
Java나 C는 매우 엄격한 타입 시스템을 가지고 있기 때문에 애초에 변수를 선언할 때 타입을 명시해주어야 합니다. 이런 타입 시스템을 ‘정적 타이핑(Static Typing)’이라고 부릅니다.
int a = 1; // int는 숫자라는 뜻
그런데 타입스크립트는 모든 변수에 타입을 명시할 필요는 없습니다. 마치 자율주행 자동차 처럼 타입스크립트가 알아서 변수의 타입을 추론하게 둘 수도 있습니다. 예를 들어 다음 코드에서 변수 a는 숫자 타입으로 변수 b는 문자 타입으로 타입 검사기가 자동으로 타입을 추론합니다.
let a; let b; a = 1; // a는 number type으로 자동 추론 b = "2"; // b는 string type으로 자동 추론
타입스크립트는 프로그램을 실행하기 전에 타입을 검사하지만 그렇다고 모든 타입을 프로그래머가 일일히 지정해 주지는 않아도 됩니다. 위 코드에서 a는 누가봐도 숫자 타입이고 b는 누가봐도 문자 타입입니다. 이렇게 당연한 상황에서는 타입스크립트가 알아서 타입을 추론합니다. 우리는 타입스크립트가 타입을 추론하기 애매한 다음과 같은 상황에서만 타입을 명시해주면 됩니다. 이런 특징을 점진적 타이핑(Gradual typing) 이라고 말합니다.
function func(a: number, b: number) { return a + b; } func(1, 2);
위 코드에서 함수 func의 매개변수 a와 b는 타입을 추론하기에 정보가 충분하지 않습니다. a와 b가 문자열이어도 말이되고 객체여도 말이되고 다 말이됩니다. 그렇기 때문에 타입스크립트에서는 이런 애매한 상황에서는 프로그래머가 직접 타입을 명시해주어야 합니다.
결론적으로 타입스크립트는 너무 엄격하지도 너무 자유롭지도 않은 타입 시스템을 자바스크립트에 추가하여 코드를 유연하면서도 견고하게 작성할 수 있도록 도와줍니다. 그 결과 보다 더 안전한 대규모 프로그램을 작성하는데에 매우 용이하여 많은 사랑을 받고 있습니다.
타입스크립트는 어떻게 배워야 할까?
그렇다면 이렇게 좋은 타입스크립트 어떻게 배워야 할까요?
개인적인 의견이지만 저는 타입스크립트는 퀴즈를 통해 배워야 좋다고 생각합니다.
타입스크립트는 언어이며 프론트엔드 백엔드 진영을 막론하고 공통적으로 사용되기 때문에 특정 프로젝트를 함께 해보며 배우기는 조금 애매합니다. 둘 모두를 만족시킬 수 있는 공통적인 내용을 다루는 프로젝트가 무엇인지 저는 아직은 잘 모르겠습니다.
그래서 저는 퀴즈를 통해 배우는게 가장 적절하다고 생각합니다. 개념을 배우고 간단한 실습을 직접 해본 다음에 배운 내용을 바로 퀴즈로 풀어보며 내가 확실히 이해하고 넘어가는 것인지 확인할 수 있고 지속적으로 성취도를 느낄 수 있을 것이라 기대합니다.