TypeScript_ 1. 타입스크립트와 특징

Eunsu·2021년 11월 30일

@ TypeScript

목록 보기

1/14

내가 했던 미니 프로젝트를 이제 타입스크립트로 바꿔보는 작업을 하려고 한다. 그 전에 타입스크립트의 사용이유와 함께 기본적인 문법에 대해서 포스팅을 해보려구 한당!

🔶 TypeScript란?

타입스크립트는 2012 년 마이크로소프트가 발표한 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다.

타입스크립트의 가장 큰 강점이자 장점은 Strongly typed language라는 점이다. 즉, 변수와 기타 데이터 구조가 문자열이나 블린 같은 특정 형식을 갖도록 프로그래머가 선언 할 수 있으며ㅡ 타입스크립트가 값의 유효성을 확인한다. loosely typed인 자바스크립트에서는 불가능 한 일이다.

그리고 코드가 읽히기 전에 타입스크립트가 먼저 실행되서, 데이터 타입을 먼저 잡아내어 서버에 올리기 전, 컴파일 되기 전 오류를 잡아 낼 수 있다.

🔹 자바스크립트와 타입스크립트

타입스크립트는 자바스크립트의 확대 집합이지만, 자바스크립트에는 없는 강력한 형식이라는 (Stronly typed) 강점을 갖고 있다.

타입스크립트 변수는 문자열, 수, 불린과 같은 형식과 연결된다. 형식은 컴파일러에 변수가 어떤 종류의 데이터를 담을 수 있는지를 알려준다. 또한 타입스크립트는 형식 추론을 지원하며 잡다한 형식을 모두 담는 any 형식도 포함하므로 프로그래머가 명시적으로 변수에 형식을 할당할 필요가 없다.

타입스크립트가 좋다 해도 굳이 오류를 고쳐가면서 문법을 배워가며, 타입스크립트를 사용하는 이유는 뭘까?

🔹 타입스크립트 사용 이유

1. 높은 수준의 코드 탐색과 디버깅

타입스크립트는 코드에 목적을 명시하고, 목적에 맞지 않는 타입의 변수나 함수들에서 애러를 발생시켜 버그를 사전에 제거한다. 타입을 먼저 명시해, 추후의 애러를 감소시키고 디버깅을 용이하게 해 준다. 실제로 모든 자바스크립트 버그의 15%가 사전에 타입스크립트로 감지 할 수 있다고 한다.

2. 자바스크립트 호환

타입스크립트는 자바스크립트와 100% 호환된다. 자바스크립트로 이루어진 Node.js나 Next.js 에서도 타입스크립트 사용이 가능하며, 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용이 가능하다.

코드가 늘어나고, 가독성이 떨어지는 단점이 있을 수도 있지만, 만약 내가 하는 프로젝트의 페이지가 늘어나고, 컴포넌트의 수가 많다면 타입스크립트의 사용을 어쩌면 필수 적일 것이다.

🔹 타입스크립트 특징

1. 컴파일 언어, 정적타입

자바스크립트는 동적 타입의 언어 (inpretter language)이므로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이기 떄문에 컴파일러 , 바벨을 통해 자바스크립트 언어로 변환된다.

그렇기 떄문에 코드 작성 단계에서 타입을 체크해 오류를 확인 할 수 있고, 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다.

2. 자바스크립트 슈퍼셋

타입스크립트는 자바스크립트의 확장 언어이기 떄문에 유효한 자바스크립트 언어는 타입스크립트로 변환해 컴파일 할 수 있다.

3. 객체지향 프로그래밍 지원

타입스크립트는 ES6에서 새롭게 사용된 문법을 포함하고 있으며, class, interface, instance, module과 같은 객체지향 프로그래밍 패턴을 제공한다.

🗨 내 생각

큰 프로젝트를 해본적이 없어서 타입스크립트에 대한 필요성은 사실 크게 와닿지 않는다. 하지만 페이지 수와 컴포넌트의 수가 많아지고, 기능이 많이 추가된다면 불가피하게 state와 자식으로 전해지는 props의 수가 많아지고 복잡해질 것 이다.

그 방면에서 타입스크립트는 큰 강점을 갖고 있는 것 같다. 또한 나 혼자 작업이 아닌 협업하여 작업한다고 하면, 타입을 명시해준다면 같이 작업하는 사람도 prop의 타입과 오류를 한 눈에 잘 알아볼 수 있을 것 같다.

설치해서 간단한 test를 해 봤을 때, type이 틀리거나 required 된 props를 전달받 지 않았을 때, VS Code 상에 밑줄이 쳐지면서 애러를 발생시킨다. 런타임되기 전 이렇게 오류를 잡는 다는 점이 추후의 애러 발생을 최소화 시킬 수 있을 것 같아, 애러 많이 내는 나에게는 필수적으로 공부해야 되는 부분인것 같다 ,,ㅎㅎㅎㅎ

다음 포스팅에서는 타입스크립트 설치와 기본 문법에 대해서 알아보자!

출처: