Announcing TypeScript support in Electron
electron npm 패키지에는 이제 Electron API 전체에 대한 상세한 주석을 제공하는 TypeScript 정의 파일이 포함되어 있다. 이 주석들은 순수 JavaScript를 작성하더라도 Electron 개발 경험을 향상시킬 수 있다. 프로젝트에서 최신 Electron 타입 정의를 사용하려면 npm install electron을 실행하면 된다.
TypeScript는 Microsoft가 만든 오픈소스 프로그래밍 언어다. JavaScript의 상위 집합으로, 정적 타입 지원을 추가해 언어를 확장한다. 최근 몇 년 동안 TypeScript 커뮤니티는 빠르게 성장했으며, 최근 Stack Overflow 개발자 설문조사에서 가장 사랑받는 프로그래밍 언어 중 하나로 꼽혔다. TypeScript는 "확장 가능한 JavaScript"로 불리며, GitHub, Slack, Microsoft와 같은 팀들이 수백만 명이 사용하는 확장 가능한 Electron 앱을 작성하는 데 활용하고 있다.
TypeScript는 클래스, 객체 구조 분해, async/await와 같은 JavaScript의 최신 언어 기능을 지원하지만, 진정한 차별점은 타입 주석이다. 프로그램의 입력 및 출력 데이터 타입을 선언하면 컴파일 시 오류를 찾는 데 도움을 주어 버그를 줄일 수 있으며, 주석은 프로그램의 작동 방식에 대한 공식적인 선언 역할도 한다.
라이브러리가 순수 JavaScript로 작성된 경우, 타입은 종종 문서 작성 시 부차적으로 모호하게 정의된다. 함수는 문서화된 것보다 더 많은 타입을 허용할 수 있거나, 문서화되지 않은 숨겨진 제약 조건이 있을 수 있어 런타임 오류로 이어질 수 있다.
TypeScript는 정의 파일로 이 문제를 해결한다. TypeScript 정의 파일은 라이브러리의 모든 함수와 예상되는 입력 및 출력 타입을 설명한다. 라이브러리 작성자가 배포된 라이브러리에 TypeScript 정의 파일을 포함시키면, 라이브러리 사용자는 에디터 내에서 바로 API를 탐색할 수 있으며, 종종 라이브러리 문서를 참조하지 않고도 바로 사용할 수 있다.
Angular, Vue.js, node-github (그리고 이제 Electron!)과 같은 많은 인기 프로젝트들은 자체 정의 파일을 컴파일하여 배포된 npm 패키지에 포함시킨다. 자체 정의 파일을 포함하지 않는 프로젝트의 경우, 커뮤니티에서 관리하는 정의 파일의 제3자 생태계인 DefinitelyTyped가 있다.
설치
Electron 버전 1.6.10부터 모든 릴리스에는 자체 TypeScript 정의 파일이 포함된다. npm에서 electron 패키지를 설치하면 electron.d.ts 파일이 자동으로 설치된 패키지와 함께 번들로 제공된다.
Electron을 설치하는 가장 안전한 방법은 정확한 버전 번호를 사용하는 것이다:
npm install electron --save-dev --save-exact
혹은 yarn을 사용한다면:
yarn add electron --dev --exact
이미 @types/electron이나 @types/node와 같은 서드파티 정의를 사용하고 있었다면, 충돌을 방지하기 위해 Electron 프로젝트에서 이를 제거해야 한다.
정의 파일은 구조화된 API 문서에서 파생되었기 때문에, 항상 Electron의 API 문서와 일치한다. 단순히 electron을 설치하면 사용 중인 Electron 버전에 맞는 최신 TypeScript 정의를 항상 얻을 수 있다.
사용 방법
Electron의 새로운 TypeScript 어노테이션을 설치하고 사용하는 방법에 대한 요약은 다음 짧은 데모 스크린캐스트를 참고한다:
Visual Studio Code를 사용한다면, 이미 TypeScript 지원이 내장되어 있다. 또한 커뮤니티에서 관리하는 플러그인도 사용할 수 있다. Atom, Sublime, vim, 그리고 기타 에디터를 위한 플러그인이 있다.
에디터에서 TypeScript를 설정하면, 자동 완성 제안, 인라인 메서드 참조, 인자 검사 등과 같은 컨텍스트 인식 동작을 확인할 수 있다.
TypeScript 시작하기
TypeScript가 처음이라면, Microsoft의 입문 동영상을 통해 이 언어가 왜 만들어졌는지, 어떻게 동작하는지, 사용 방법과 앞으로의 방향에 대해 간략히 살펴볼 수 있다.
또한 공식 TypeScript 웹사이트에서 핸드북과 플레이그라운드를 제공한다.
TypeScript는 JavaScript의 상위 집합이므로, 기존 JavaScript 코드는 이미 유효한 TypeScript 코드이다. 이는 기존 JavaScript 프로젝트를 점진적으로 TypeScript로 전환할 수 있으며, 필요에 따라 새로운 언어 기능을 추가할 수 있음을 의미한다.
감사의 말
이 프로젝트는 Electron 오픈소스 커뮤니티의 도움 없이는 가능하지 않았을 것입니다. 특히 Samuel Attard, Felix Rieseberg, Birunthan Mohanathas, Milan Burda, Brendan Forster를 비롯한 많은 분들이 버그 수정, 문서 개선, 기술적 조언 등으로 큰 도움을 주셨습니다. 여러분의 기여에 깊은 감사를 드립니다.
지원
Electron의 새로운 TypeScript 정의 파일을 사용하면서 문제가 발생하면, electron-typescript-definitions 저장소에 이슈를 등록하세요.
TypeScript를 즐겁게 사용하세요!