[Typescript] 타입스크립트란?

이제는 프로젝트를 진행하면서 항상 타입스크립트 문법으로 구현했지만 블로그를 한 번도 쓰지 않았다. 더 늦기전에 타입스크립트에서 하나 둘씩 정리해서 써 볼려고 한다.

Typescript란?

타입스크립트는 마이크로소프트에서 개발한 오픈소스 프로그래밍 언어이다. 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장된 언어이다. 대규모 애플리케이션을 개발하는데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해서 개발되었다.

 

자바스크립트는 동적 타입 언어(dynamic type language) 이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않는다.

여기서 타입 안정성이란 값의 종류가 잘못 전달될 경우 버그를 잡기 어렵다는 것을 의미한다.

 

타입스크립트는 정적 타입 언어(static type language) 이기 때문에 컴파일 시 시간이 조금 더 걸리더라도 타입 안정성을 보장한다는 장점이 있다. 타입을 선언을 하므로 자바스크립트에서 모호하게 사용되던 타입을 제어할 수 있어 간편하게 에러를 잡을 수 있다.

 

즉, 자바스크립트 엔진은 ES5의 Superset(상위확장)이므로 기존의 자바스크립트 문법을 그대로 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이고 ES6의 새로운 기능들을 사용하기 위해서 Bable과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 실행할 수 있다. 자바스크립트의 모든 단점을 줄이고 더 좋은 기능을 감싼 형태에 언어이다.

타입스크립트 사용을 고려해야 하는 이유

에러 예방

타입스크립트는 타입을 부여하기 때문에 코드 작성 시에 알맞지 않은 타입을 넣거나, 혹은 타입을 넣지 않았을 경우 사전에 오류라고 경고를 준다.

function sum(a,b) {
	return a + b;
}

위 함수를 보면 두 개의 숫자를 인자로 받아서 합을 리턴하는 함수이다. 하지만 인자로 들어오는 타입은 숫자일 수도 있고 문자열일 수도 있고 알 수 없다. 즉, 어떤 타입의 반환값을 반환해야 하는지 명확하지 않다.

 

이제 타입스크립트 언어로 다시 작성해보자

function sum(a: number, b:number){
	return a + b;
}
sum("10","20"); // Error : 10 형식의 인수는 'number' 형식에 매개 변수에 할달될 수 없다.

타입스크립트는 정적 타입 언어로서 컴파일 단계에서 오류를 포착할 수 있다. 실행하기 전에 오류를 찾기 때문에 오류를 사전에 차단하고 피드백을 통해 작업과 동시에 디버깅이 가능하므로 생산적인 측면에서 효과적이다.

실행 속도

자바스크립트는 동적 타입의 인터프리티 언어이기 때문에 런타임 때 타입을 결정해서 적용한다. 이 말은 컴퓨터한테 오류가 있는지 확인하는 작업이 추가되는 것이기 때문에 실행 속도가 느리다는 단점이 있다. 하지만 타입스크립트는 코드 작성부터 타입을 결정하기 때문에 이러한 런타임 작업을 줄여서 기계가 할 일을 덜어주므로 실행 속다가 빠르다는 장점이 있다.

안정성 및 협업용이성

자바스크립트는 같이 협업하는 사람이나 혹은 다른 개발자들이 코드를 읽을 경우 타입이 어떤 것인지 짐작하기 어렵다. 또한 미처 발견하지 못한 에러나 버그가 운영 중에 발견될 수도 있다. 하지만 타입스크립트는 타입을 명시하며 런타임이 아닌 컴파일 시 오류를 찾기 때문에 보다 더 안정적이다 볼 수 있다.

슈퍼셋 (자바스크립트 호환)

타입스크립트는 자바스크립트의 슈퍼셋이다. 즉, 자바스크립트 + 알파이다. 클래스, 인터페이스 등 객체지향 프로그래밍 패턴을 제공하며 자바스크립트와 100% 호환된다. 이 말은 자바스크립트의 단점은 줄여주고 대신 더 좋은 기능들을 감싼 형태라고 보면 된다.

강력한 생태계

타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로소프트의 VsCode를 비롯해 각종 에디터가 플러그인을 지원한다.

프론트엔드 프레임워크와 타입스크립트

**리액트(React)**

리액트와 타입스크립트의 호환성은 비교적 좋은 편이다. 최근 들어 많은 개발자들이 리액트와 타입스크립트 조합을 선택하고 있다. 리액트 공식 홈페이지에서는 타입스크립트를 사용하기 위한 가이드를 제시하고 있으며 페이스북에서 공식적으로 배포하는 리액트 웹 개발용 보일러 플레이트(Boilerplate, 구조·설정 작업을 자동으로 진행해주는 도구이자 명령어)인 Create React App은 간단한 옵션 추가만으로 타입스크립트를 사용할 수 있도록 지원한다.

 

**뷰(Vue.js)**

뷰 2.0에서는 타입스크립트를 사용할 수 있지만 몇몇 라이브러리의 도움을 받아야 하거나 구현 자체가 안 되는 문제도 다수 있었다. 하지만 최근 뷰 3.0부터는 타입스크립트를 공식 지원한다. 뷰 3.0 CLI(Command Line Interface)는 타입스크립트 도구화 지원을 기본으로 제공한다.

 

**앵귤러(Angular)**

자바스크립트 기반인 앵귤러 버전 1과 달리 버전 2부터는 타입스크립트 기반으로 만들어졌고 타입스크립트를 권장하고 있다.

결론

유지보수 측면 즉, 생산성 측면에서 보다면 자바스크립트 보다 타입스크립트가 월등하게 좋다고 생각한다. 굳이 사용할 이유가 무수히 많은 타입스크립트 대신 자바스크립트로 개발할 이유가 딱히 없다. 생산성이 증대되고 디버깅과 코드 읽는 시간이 줄어듬으로 개발 속도가 향상되며 클린 코드를 만드는데 도움이 되기 때문에 이제부터 자바스크립트 대신 타입스크립트로 코드를 작성해보자!

 

 

 

출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다

https://hymndev.tistory.com/79

https://fomaios.tistory.com/entry/TS-타입스크립트TypeScript란

https://velog.io/@taeg92/TypeScript-시작하기

https://hanamon.kr/타입스크립트란-typescript/

https://jay-flow.medium.com/왜-타입-스크립트를-사용하여야-하는가-ae511aad8fe8

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