Javascript vs Typescript : 어느 것을 써야 할지 고민이 된다면?

 

먼저, Javascript와 Typescript의 가장 큰 차이점은 Typescript에는 Type을 지정한다는 것입니다.

 

 

Javascript에서는 a + b 코드를 작성할 때,

const a = 1;
const b = 1;

const c = a + b; // 2

위와 같이 작성하지만

 

Typescript의 경우 타입을 지정하게 됩니다.

const a :number = 1;
const b :number = 1;

const c :number = a + b; // 2

 

Type의 경우

number string boolean 등이 있으며,

const와 let 등으로 선언하는 변수 이외에도 props로 전달받는 인자까지 타입을 지정하게 됩니다.

 

const a :number = 1;
const name :string = 'Hong Gil Dong';
const is_removed :boolean = true;

 

 

 

 

그런데, Javascript에 왜 타입을 지정하게 된 것일까요?

 

Javascript는 동적 타입 언어로서 유연하다는 장점이 있습니다.

타입이 지정되어 있지 않기 때문에 변수를 다양한 자료형으로 활용할 수 있습니다. 또한, 동적 타입 언어이기 때문에 컴파일 시간이 Typescript보다 빠르고 런타임 속도 또한 빠릅니다.

 

 

하지만 이러한 장점이 때로는 단점으로 작용할 수 있습니다.

 

1. 높은 유연성으로 인한 버그

Javascript는 유연성이 높아 개발자가 원하는 자료형과는 다른 형식으로 사용될 수 있습니다. 예를 들어, 변수에 숫자를 할당했지만 문자열로 인식하여 에러를 발생시킬 수 있습니다.

 

2. 런타임 시 발생하는 에러

코드를 작성하는 단계가 아닌, 코드를 실행하는 런타임 과정에서 에러가 발견됩니다. 코드 작성 시에는 문제가 없어 보여도 코드를 실행하여 잘 돌아가다가도, 에러가 발생한 지점을 만나게 되면 프로그램이 종료되어 버립니다.

 

 

이러한 문제들은 프로젝트의 규모가 커질수록 발견하기 어렵고 에러 해결이 힘들게 됩니다.

따라서 에러를 조기에 발견하고자, 타입을 지정하는 Typescript가 등장했습니다.

 

 

 

Typescript는 타입을 지정함으로써 Javascript보다 제한적이지만,

 

1. 컴파일 과정에서 버그 감지

Typescript는 코드를 작성하며 실시간으로 버그를 확인할 수 있습니다. 코드의 길이가 길어지고 규모가 커지는 경우 실시간으로 버그를 확인함으로써 효율성을 높일 수 있습니다.

 

2. VScode 등의 IDE와의 높은 결합성

거의 모든 변수와 함수를 ctrl + click 만으로 역추적이 가능하고, 객체의 key 값을 활용할 때 ‘.’ 점을 찍는 것만으로도 key 값들이 화면에 리스트로 보여져 개발 속도를 높일 수 있습니다. 또한, IDE는 아니지만 각종 플러그인을 통해 쉽게 개발 환경을 구축할 수 있습니다.

 

3. 선택적 제한

모든 변수에 타입을 지정할 수 있지만, 반대로 원하는 변수에는 any 타입을 부여하여 타입 제한을 선택적으로 지정할 수 있습니다. 유연해야 하는 부분에서는 Javascript처럼 유연하게, 반대로 확실해야 하는 부분에서는 타입 지정을 통해 제한적으로 사용할 수 있습니다.

 

 

Typescript는 Javascript로 컴파일된 뒤 실행 과정을 거치기 때문에 절대적인 코드의 양이 많고 빌드 시간이 다소 소요된다는 면이 있지만, 개발 편의성을 높일 수 있다는 장점이 있기 때문에 커뮤니티가 빠른 속도로 확대되고 있습니다.

 

 

 

 

 

그렇다면 언제 어떤 언어를 사용해야 할까요?

 

개발 규모가 크지 않고, 빠른 개발이 필요할 때는 Javascript가 적합하며,

복잡하고 대규모의 프로젝트를 진행하며 새로운 언어 학습 시간이 충분할 때는 Typescript가 유리합니다.

개발 기간과 프로젝트의 규모, 개인의 역량에 따라 적절한 언어를 선택하는 것이 중요합니다.

 

 

 

 

 

 

 

아래 링크를 통해 Typescript 문법을 다른 문법의 언어로 확인 가능합니다.

TS Playground - An online editor for exploring TypeScript and JavaScript

 

 

참고 자료

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

https://www.samsungsds.com/kr/insights/typescript.html