자꾸 타입스크립트 공부를 띄엄띄엄하게되서, 타입스크립트를 확실히 공부하기위해 기존에 타입스크립트에 대해 정리했던 글들을 모두 지우고 처음부터 다시 차근차근 타입스크립트를 공부하며 정리를 해보려고한다.
그리고 이번글에서는 "타입스크립트를 왜 쓰는가"에 대해서 정리를 해보려고한다.
우선 왜 써야하는지 이유를 알아보기에 앞서, 타입스크립트란 뭘까?
타입스크립트?
타입스크립트는 자바스크립트의 확장판이다.
좀 더 엄격한 자바스크립트.. 라고 해야할까?
자바스크립트는 타입에 대한 제한이 전혀 없는 언어이다.
우리가 자바스크립트로 변수 선언을 할 때 어떻게 했는가?
문자열, 정수, 실수, 배열 등 어떤 데이터타입이든 변수 선언 키워드가 있으면 통제받지 않고
그냥 넣을 수 있었다.
var something = 1;
var something = "Hello";
var something = [1,2,3];자바나 C언어는 어땠는가?
어떤 값을 변수에 할당할 때, 해당 변수에 데이터타입을 지정해줘야했다.
String str = "Hello";
int num = 2;
int [] arr = {1,2,3};타입스크립트는 "타입스크립트"라는 말그대로 자바스크립트의 타입 제한 버전인것이다!
타입스크립트 왜 쓸까?
그러면 우리는 타입스크립트를 왜 쓸까?
자바스크립트가 좀 더 유연하고 자유로운 언어 아닌가? 자유로움이 장점 아닌가?! 라고 생각할 수 있다. (나도 그렇게 생각한다..)
그렇다면 타입스크립트는 어떤 이유때문에 사용하는걸까?
타입스크립트는 아래 두 가지 관점에서 자바스크립트의 품질과 생산성을 높일 수 있다.
- 에러방지
- 코드 가이드 및 자동 완성(개발 생산성 향상)
에러방지
타입스크립트가 에러를 방지해준다고? 어떻게 에러를 방지해줄까?
아래의 간단한 코드를 보며 그 이유를 알아보자.
자바스크립트 코드
function sum(a, b) {
return a + b;
}타입스크립트 코드
function sum(a: number, b:number) {
return a + b;
}두 코드 모두 두 수의 합을 구하는 코드이다.
먼저 자바스크립트로 짜여진 함수를 보자.
sum(10, 20); // 30위 코드는 문제없이 우리가 원하는 값인 30을 얻을 수 있다.
sum('10', '20'); // 1020위 코드는 '1020' 이라는 문자열이 출력된다는걸 쉽게 알 수 있다.
하지만 1020은 우리가 원하는 결과가 아니다.
자바스크립트로 코드를 짜면 이처럼 의도치 않은 결과가 나올 수 있다. (막지 않으니까)
타입스크립트는 이런 상황을 사전에 방지해준다.
이제 타입스크립트 코드를 살펴보자
function sum(a: number, b:number) {
return a + b;
}
sum('10', '20');위와 같이 코드를 작성하면 타입스크립트는 오류를 발생시킨다.
'10'은 number 형식의 변수에 할당될 수 없습니다.
타입스크립트로 작성된 sum 함수의 매개변수를 보면 매개변수 타입을 number 타입으로 제한하고있다.
따라서 문자열인 '10'이 매개변수로 전달되면 타입스크립트에서 거부반응을 일으키는것이다.
타입스크립트의 이런 점을 통해서 우리는 코드의 에러 또는 의도치 않은 결과를 방지할 수 있는 것이다.
코드 가이드 및 자동 완성
타입스크립트를 사용하는 또 다른 이유 중 하나는 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 점이다.
프론트엔드 개발자들이 많이쓰는 Visual Studio Code는 툴의 내부가 타입스크립트로 작성되어 있어서 타입스크립트 개발에 최적화 되어있다.
자바스크립트 코드
function sum(a: number, b:number) {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString();자바스크립트로 작성된 위 코드를 보자.
toLocaleString() 메소드는 숫자의 사용 언어에 따른 표현을 포함한 문자열을 반환하는 메소드이다.
자바스크립트로 코드를 짜면 VSC에서 total.toLocaleString(); 이 부분을 코딩할 때 자동완성이 지원되지않는다. 즉 자바스크립트가 total 이 무슨 타입인지 모르고 있다는 것이다.
즉, sum() 함수의 결과가 숫자라는걸 개발자가 스스로 예상하고 total 의 타입이 number 라고 가정한 상태에서 코딩을 하게 되는것이다.
자바스크립트는 위에서 말했듯이 total 이 number 인지 모르기 때문에 개발자는total.toLocaleString(); 이 부분을 작성할 때 스스로 작성해야한다.
그런데 이때 실수로 오타라도 난다면, 우리는 프로그램을 실행해야만 오류를 찾을 수 있을 것이다.
이제 타입스크립트를 사용했을 때를 살펴보자.
타입스크립트 코드
function sum(a: number, b: number): number {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString();타입스크립트는 자바스크립트와 다르게, sum() 함수가 number 를 반환할 것을 알고 있다.
즉, total의 타입이 number 라는 것을 VSC가 알고있는 상태라는것이다.
그렇기 때문에 total.toLocaleString(); 이 부분을 작성할 때 total.까지만 작성해도 사용할 수 있는 메소드들을 자동완성 시켜준다.
즉, tolocaleString(); 메소드를 자동완성으로 띄워준다는것!
해당타입에 대한 API를 미리보기로 띄워주기 때문에 개발자들은 일일히 작성해야하는 수고를 덜수있음과 동시에 오타를 작성할 확률도 없어지는것이다!
이번 포스팅에서는 타입스크립트 소개와 타입스크립트를 사용하는 이유를 간략하게 정리해봤다.
오늘 이 포스팅을 작성하면서, 타입스크립트가 무엇인지 그리고 사용하는 이유가 무엇인지 다시 한번 생각해 볼 수 있었다.
내용 참고
타입스크립트 핸드북
