TypeScript란?

🧐 TypeScript란 무엇인가?

👉 자바스크립트의 슈퍼셋, 자바스크립트의 확장된 버전이다. 정적 타입 언어로서 코드를 작성할 때 변수, 함수, 객체등의 데이터 타입을 명시하고 컴파일 타임에 타입 검사를 수행한다. 이를 통해 코드의 안정성을 향상시키고 버그를 사전에 방지할 수 있으며, 대규모 애플리케이션의 개발과 유지보수를 더 쉽게 만들어준다.

 

슈퍼셋(Superset) : 어떤 언어나 기술이 다른 언어나 기술의 확장 또는 상위 집한인 경우를 가리킨다. 원래 언어나 기술의 모든 기능을 포함하면서 추가적인 기능이나 확장을 제공한다는 것을 의미한다.

 

 

🧐 TypeScript를 사용하는 이유?

👉 타입 안정성 : 컴파일 타임에 타입 오류를 발견할 수 있으므로 런타임 오류를 사전에 방지할 수 있다.

👉 IDE(통합 개발 환경)지원 : 대부분의 IDE는 타입스크립트를 지원하며, 이를 통해 코드완성, 오류검사, 리팩토리 기능을 활용할  수 있다.

👉 코드의 가독성 향상 : 타입 annotation과 타입 추론을 통해 코드가 더 명확해지고 가독성이 높아진다.

👉 구조적 코드 작성 가능 : 객체 지향 프로그래밍과 모듈화를 지원해서 구조적인 코드를 작성할 수 있다.

👉 크로스브라우징 문제 해결 가능 : 크로스브라우징은 다양한 웹 브라우저에서 웹 애플리케이션이 의도한 대로 이상 없이 구현되도록 하는 것을 말한다. 타입스크립트는 컴파일 과정에서 es6+ 문법들을 알아서 바꿔주기 때문에 구 브라우저에서도 대응이 가능하다.

 

주석(Annotation) : 프로그램 코드에 부가적인 정보를 제공하거나 주석으로 추가하는 방법 중 하나로, 코드 문서화나 런타임 동작 제어, 컴파일러 지시사항, 메타데이터 제공 등과 같은 목적으로 사용
크로스브라우징 문제 : 웹 브라우저 간에 웹 애플리케이션이 일관되게 동작하지 않는 문제

 

 

😵 TypeScript의 단점

👉 작은 규모의 프로젝트에서는 불필요 할 수 있다.

👉 작성해야 하는 코드의 양이 많아진다.

 

 

🥴 TypeScript 사용 예제 ( TypeScript 공식문서 따라 하기)

 

➡ javaScript에서는 에러가 나지 않는 코드지만 런타임에서 orr의 이름을 찾을 수 없기 때문에 충돌하게 될 것이다.

 

 

 

➡ TypeScript에서는 오류가 발생한다. 컴파일과정에서 코드 오류를 읽기 때문에 orr이 없다는 것을 런타임 전에 미리 알려줌.

 

 

⁉ orr을 다시 arr로 고치고 arr에 배열이라는 타입을 선언해 주면 어떤 오류가 생길까?

 

 

➡ 배열 속성에 trim이라는 속성이 없다는 에러가 뜬다.

➡ trim은 문자열의 (문자열 양 끝의 공백을 제거하는) 메서드 이므로 배열에서 사용하지 못하는 것이기 때문이다.

 

 

⁉ 그러면 자연스러운 문법을 추가해서 써보면? any 타입은 지양하는 타입이므로 문자열 배열로 바꿔서 넣었다.

 

 

➡ 별다른 에러 없이 자연스러운 타입스크립트 코드가 작성된 것을 알 수 있다.

 

 

참고

https://www.typescriptlang.org/ko/

JavaScript With Syntax For Types.