TypeScript
개요
- 마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어. 확장자로는 .ts를 사용하며,
컴파일의 결과물로 JavaScript 코드를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 된다.- TypeScript라는 이름답게
정적 타입을 명시할 수 있다는 것이 순수한 자바스크립트와의 가장 큰 차이점이다. 덕분에 개발 도구(IDE나 컴파일러 등)에게 개발자가 의도한변수나 함수 등의 목적을 더욱 명확하게 전달할 수 있고, 그렇게 전달된 정보를 기반으로코드 자동 완성이나 잘못된 변수/함수 사용에 대한에러 알림같은 풍부한 피드백을 받을 수 있게 되므로 순수 자바스크립트에 비해 어마어마한 생산성 향상을 꾀할 수 있다. 즉,'자바스크립트를 실제로 사용하기 전에 있을만한 타입 에러들을 미리 잡는 것'이 타입스크립트의 사용 목적이다.- 개발자와 도구 간의 상호작용에서 뿐만 아니라 개발자 간의 상호작용에서도 상당한 이점이 있는데,
API를 구현하고 사용함에 있어 해당 API의 인풋과 아웃풋이 무엇인지 명확하게 표현할 수 있으므로, API 하나 쓰는데에도 일일이 매뉴얼을 찾아봐야 하거나 심하면 해당 API의 코드까지 뒤적거려봐야 하는 자바스크립트에 비해 효율적이다.- 타입스크립트를 사용하려면
npm이 필요하다.Node.js를 설치하면 npm이 자동으로 설치된다.- 다양한 IDE들이 타입스크립트를 지원하고 있지만, 역시 타입스크립트의 제작사인 마이크로소프트의
Visual Studio Code와의 가장 정합성이 훌륭하다고 평가받고 있다.백엔드와 프론트엔드 통합
타입스크립트는 Node.js 런타임 뿐만 아니라, 원래 자바스크립트의 고향인 프론트엔드 개발에서도 상당히 유용하다. 특히 프론트엔드와 백엔드를 모두 TypeScript로 구현한다면 종전과는 비교할 수 없을 정도로 높은 개발 안정성과 편의성을 확보할 수 있다. 프론트엔드-백엔드 상호 간 데이터 통신을 위해서는 일반적으로 JSON 형식의 REST API를 구현하게 되는데, 이렇게 사용되는 데이터 포맷은 개발 과정 중에 수없이 변경되고 또 변경되기 마련이다. 이로 인해 프론트엔드와 백엔드 개발자 사이에서는 수도 없이 커뮤니케이션 로스가 발생하고 이는 고스란히 개발자의 피로도 상승 및 개발 기간 증가, 유지보수성의 저하로 이어진다. 게다가 이러한 문제점은 실제로 코드를 동작시키지 전까지는 알아채기 어려운 경우도 많기 때문에 최악의 경우 검증되지 않은 버그가 남은 채 프로젝트를 퍼블리시하게 될 수도 있다. TypeScript가 이러한 사태를 미연에 방지할 수 있는 이유는, 프론트엔드와 백엔드간의 데이터 포맷을 타입으로 정의하여, 이를 양측에서 공통으로 참조하도록 구현하고, 데이터 포맷의 변경 사항이 발생할 경우 이렇게 공용화된 타입의 정의부를 수정함에 따라 프론트엔드와 백엔드 코드에 컴파일 에러를 발생시킴으로써 데이터 포맷의 통일을 강제하기 때문이다.
물론 백엔드 개발자들은, 타입스크립트 사용 이전에 프론트엔드 개발자에게 올바른 API를 제공하고 본인의 정신건강을 지키기 위해서는 Swagger등의 API문서의 작성이 선행되는 게 권장되긴 하겠으나, IDE에서 제공하는 자동 완성이나 API 에러 알림 등의 피드백 덕분에 문서 참조의 필요성을 줄일 수 있다는 것 자체가 상당한 장점이다.더 알아보기 > 나무위키 - TypeScript
활용도가 높아지는 웹 프론트엔드 언어, TypeScript
컴파일 언어, 정적 타입 언어
자바스크립트는 동적 타입의 인터프리터 언어로런타임에서 오류를 발견할 수 있습니다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.
자바스크립트 슈퍼셋(Superset)
타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있습니다.
객체 지향 프로그래밍 지원
타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.타입스크립트 사용을 고려해야 하는 이유
새로운 프로그래밍 언어에 대한 러닝 커브(Learning Curve), 상대적으로 낮은 가독성, 코드량 증가 등의 이유로 타입스크립트 사용을 망설이는 개발자가 많습니다. 프로젝트 성격에 따라 타입스크립트를 사용할지 결정하면 됩니다. 프로젝트의 규모가 크고 복잡할수록, 유지보수가 중요한 장기 프로젝트일수록 타입스크립트의 이점이 부각될 것입니다.
출처 SAMSUNG SDS
TypeScript는 어떻게 공부해야 하나요?
javascript의 매력은 prototype 객체기반 함수형 동적타입 스크립트 라는 컨셉이었기에 javascript는 사랑받는 언어로 성장하기 시작했습니다. 그러나 엔터프라이즈급 개발 환경에서는 그러한 매력에도 에러를 확인하거나 협업에 있어서는 다소 불편한 점이 많은 언어였습니다. javascript의 가치를 그대로 유지한채 Type검사와 AutoComplte의 엔터프라이즈 협업을 위해서 꼭 필요한 기능이 탑재된 형태의 Typescript는 이제 웹 개발 엔터프라이즈 씬에서는 완전히 주류언어가 되어버렸습니다.
- 일단 가급적 세팅이 되어 있는 프로젝트로 시작하세요. (Vite, tsup)
- 변수 선언과 함수 인자 부터
- 하지만 타입 선언보다는 가급적 자동추론을 사용하자.
- 백엔드 스키마 interface를 만드는 것을 연습해보자.
- callback을 인자로 만드는 방법을 공부하자
- 유틸리티를 사용하는 법
- 공식문서에 다 있지만 차근차근 공부는 안해도 된다.
- Error를 zero로 만들어 볼 시간!
Typescript는 그저 타입체크와 자동완성을 도와주는 플러그인 이라는 마인드로 접근을 한다면 정말 Typescript의 장점만 이용하면서 부드럽게 도입을 할 수 있을 거라고 생각합니다.
출처 - 테오의 프론트엔드
리액트 프로젝트에서 타입스크립트 사용하기
- 리액트 프로젝트에서 타입스크립트 사용하기
- 타입스크립트 기초 연습
- 리액트 컴포넌트 타입스크립트로 작성하기
- 타입스크립트로 리액트 Hooks 사용하기 (useState, useReducer, useRef)
- TypeScript 환경에서 리액트 Context API 제대로 활용하기
- TypeScript 환경에서 Redux를 프로처럼 사용하기
출처 - Velopert
시니어 개발자가 말하는 TypeScript
TS의 장점이 뭔가요?
💬 Next.js를 계기로 타입스크립트 탐색중
💬 부트텐트를 통해 알게된 SeSAC 풀스택 개발자 과정을 신청했는데 아쉽게도 탈락했다(그런데 배포가 화목이라 아마도 됐어도 못 들었을 것 같다. 이것을 신청하게된 계기는 사소하지만 나중에 개발자에 대한 생각, 도전기 등으로 정리해서 쓸 생각이다..) 그래도 요즘은 유튜브가 있으니까 😀 (영상 등을 몇 개 봤는데 내 기준에 좋은 선생님..?! 같다)
