자바스크립트는 매우 유연하고 쓰기 쉬운 언어이지만, 그 “유연성” 때문에 대규모 개발이 발생하면 예기치 않은 버그를 일으킬 수 있습니다. “문자열을 기대하고 있던 함수에 수치를 건네주었다” “API의 응답으로부터 존재하지 않는 프로퍼티에 액세스 해 버렸다”——이러한 에러는, 모두가 한 번은 경험이 있을 것입니다.
이 기사에서는 과제와 해결책이라는 접근법으로 왜 TypeScript가 현대의 웹 애플리케이션 개발에 필수적이라고 말할 수 있는지를 풀어 나갈 것입니다.
과제 : 실행할 때까지 버그를 모르는 공포
순수한 JavaScript로 작성된 응용 프로그램의 가장 큰 약점은 코드 오류가 “런타임 (런타임)“으로 처음 발생하는 것입니다. 브라우저에서 실제로 버튼을 클릭하거나 특정 화면으로 전환하지 않으면 오류를 알 수 없습니다. 이로 인해 QA 팀의 테스트 누출과 사용자의 결함보고를 통해 처음으로 버그를 알 수있는 매우 위험한 개발 프로세스가됩니다.
해결: “형"이라는 이름의 강력한 방어구
TypeScript를 도입하면 이 과제가 크게 개선됩니다. TypeScript는 자바스크립트에 “정적 형식화” 개념을 제공합니다. 변수나 함수의 인수·반환값에 대해서 「이것은 문자열이야」 「이것은 특정의 구조를 가진 객체야」라고 룰(형)을 정할 수 있는 것입니다.
이것에 의해, 코드를 쓰고 있는 중, 혹은 빌드 하는 단계에서 에디터가 「여기에 건네주고 있는 값은 형태가 다릅니다」라고 경고를 줍니다. 즉, 실행 전에 많은 버그를 미연에 방지할 수 있습니다.
과제: 도입 학습 비용 및 설명
그렇다고는 해도, 「형 정의를 쓰는 것이 귀찮다」 「학습 비용이 높다」라고 도입을 주저하는 현장도 적지 않습니다.
확실히, 처음에는 interface나 type의 정의, Generics(제네릭스)라고 하는 낯선 개념에 당황할지도 모릅니다. 코드의 기술량도 일시적으로 증가합니다.
해결: 압도적인 편집기 완성과 중장기 생산성
그러나 초기 투자는 즉시 회수할 수 있습니다. VS Code와 같은 현대적인 편집기와 TypeScript의 궁합은 뛰어납니다. 형식이 정의되어 개체에 어떤 속성이 존재하는지 편집기가 완벽하게 추론하여 강력한 자동 완성을 제공합니다.
문서나 사양서를 일부러 보러 가지 않아도, 「닷」을 치는 것만으로 다음에 입력해야 할 후보가 서제스트 되는 체험은, 한 번 맛보면 되돌릴 수 없습니다. 팀 개발에서도 다른 사람이 쓴 함수를 안전하게 호출할 수 있기 때문에 결과적으로 커뮤니케이션 비용의 삭감과 개발 속도의 향상으로 이어집니다.
결론 대신
처음에는 “귀찮은 규칙이 밀려있다"고 느낄지도 모릅니다. 그러나, TypeScript의 형태 시스템은, 개발자를 묶는 것이 아니라, 개발자를 버그의 공포로부터 지켜 주는 「방패」입니다. 견고하고 오래 유지할 수 있는 웹 애플리케이션을 만들고 싶다면 TypeScript를 사용해 보세요.