[16] 타입스크립트를 왜 사용하나요? 자바스크립트와 어떤 차이가 있죠?

📎 질문

타입스크립트를 왜 사용하나요? 자바스크립트와 어떤 차이가 있죠? (기존 axios에 대한 질문은 15번 질문과 거의 중첩되는 질문이라 위 질문으로 변경했습니다)

✏ 구술 답변 키워드

타입 스크립트를 사용하는 이유

정적 타입 언어(컴파일 타임에 타입 체크)로, 타입 안정성 제공
향상된 도구 지원(개발 도구와의 통합) - 자동 완성, 타입 체크, IDE 기능 지원 등 개발 효율성 증대
객체 지향 프로그래밍 지원 - 코드의 재사용성 및 관리성 향상

✏ 서술 답변

타입스크립트란?

자바스크립트의 슈퍼셋(Superset) (*Superset이란? 한 언어가 다른 언어의 모든 기능을 포함하고 추가적인 기능을 제공하는 경우를 의미함)

타입스크립트를 사용하는 이유

1. 타입 안정성 개발 단계에서 타입(자료형)을 명시적으로 지정하게 하여, 개발자의 실수로 인한 오류를 방지하고 IDE에서 코드를 더 잘 이해할 수 있게 함으로써 컴파일 에러, 타입 관련 오류를 빌드 전에 찾을 수 있음. 코드의 품질을 개선하고 런타임 에러의 가능성을 줄여줌.

2. 향상된 도구 지원 자동 완성, 타입 체크, 리팩토링 도구 등 IDE의 기능을 풍부하게 활용할 수 있게 하여 개발 과정을 더욱 효율적으로 만들어 줌.

3. 현대적 기능 지원 최신 자바스크립트 기능(ES6 이상)을 지원하며, 클래스, 인터페이스, 상속 등 객체 지향적 프로그래밍을 지원하여 코드의 재사용성과 관리성을 향상시켜 줌.

자바스크립트와 타입스크립트의 주요 차이점

타입 시스템 JS : 동적 타입 언어(런타임에 타입 결정) TS : 정적 타입 언어(컴파일 타임에 타입 체크 - 더 엄격한 타입 안정성 제공)
컴파일 과정 JS : 인터프리터 언어 - 소스코드를 바로 실행 가능함 TS : 자바스크립트로 컴파일 된 후 실행(컴파일 과정 - 오류를 미리 발견, 수정 기회 제공)
개발 도구와 통합 타입스크립트는 강력한 타입 시스템을 통해 더 나은 개발도구와의 통합을 제공하며, 개발자가 오류를 빠르게 식별하고 수정할 수 있게 제공함.
프로젝트 규모 적합성 JS : 작고 간단한 프로젝트에 적합 TS : 복잡한 대형 프로젝트에 적합
특징 JS : 독립적으로 사용 가능하며, 타입에 제한 받지 않아 더욱 유연함 TS : 자바스크립트에 의존적이며, 더욱 견고하고 일관성 및 재사용성이 높음

타입스크립트란

JavaScript의 대체 언어의 하나로, ES5의 superset 언어.

타입스크립트 사용 이유

타입으로 인한 에러 예방(개발자의 실수 예방)
IDE에게 타입, 속성값, 컴파일 에러 등을 빌드전에 경고받을 수 있다.
바벨에 따로 설정을 하지 않아도 여러 브라우저를 지원할 수 있다.
자바스크립트와의 차이점

(참조 : [Typescript] 타입스크립트를 "사용해야 하는" 이유 (+ 온라인에서 연습하기))

자바스크립트

런타임에 타입이 결정되며, 코드 작성시 자료형을 명시할 필요가 없다.
소스코드를 바로 실행하는 인터프리터 언어이다. 따라서 컴파일시 소스코드 전체를 기계어로 변환 후 실행된다.
독립적으로 사용이 가능하며, 타입에 제한을 받지 않아 코드 작성이 유연해 빠른 코딩이 가능하다.
런타임에 자료형이 결정되므로 예상하지 못한 에러가 발생할 수 있다.
타입스크립트
컴파일시 자료형이 결정되며, 코드작성시 자료형을 명시해야한다.
런타임시 코드 한 줄씩 중간 코드인 바이트 코드로 변환 후 실행된다.
더 나은 구조와 간결함, 일관성, 재사용성, 가독성이 좋다.
컴파일시 에러를 잡을 수 있어 오류를 예방할 수 있다.
타입스크립트의 단점
자바스크립트로 컴파일되어 실행되기때문에 속도가 느릴 수 있다.
타입을 작성해야하기때문에 코드의 양과 제약이 많아진다.
초기 설정이 필요하다.

타입스크립트란?

MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어이며, 자바스크립트의 단점을 해결하기 위해 만들어진 언어.

타입 에러 방지(컴파일 단계에서 오류 포착)
명시적인 정적 타입 지정으로 코드 가독성을 높이고 디버깅을 쉽게 할 수 있음
코드 자동 완성 및 가이드
class와 interface의 특징을 지원함으로써 객체지향 프로그래밍 환경을 제공

자바스크립트와 타입스크립트 비교

자바스크립트 동적 타이핑 인터프리터 언어, 타입스크립트 정적 컴파일 언어
자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 반면에 타입스크립트는 정적 타입의 컴파일 언어이며, 타입스크립트 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고, 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.
타입스크립트는 자바스크립트의 슈퍼셋, 자바스크립트의 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.
타입 스크립트는 ES6에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

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

높은 수준의 코드 탐색과 디버깅
1. 타입스크립트는 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다.
강력한 생태계
1. 타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로 소프트의 비주얼 스튜디오 코드를 비롯해 각종 에디터가 타입스크립트 관련 기능과 플러그인 지원

Q. 타입스크립트 사용 이유

정적 타입언어의 장점을 가짐. 런타임에서 예상하지 못한 타입에러가 나지 않음. 컴파일 또는 IDE를 이용해 빌드전에 타입검사를 할 수 있었음.
코드가독성과 협업에 유리. 다른 사람의 코드를 보고 명시된 타입을 통해 금방 파악하고 이를 재사용하거나 리팩토링을 할 수 있었음.

Q. 자바스크립트와 타입스크립트 차이

1. 언어 자체의 차이 JS: 인터프리터언어. 동적타이핑으로 인해 런타임에러 가능성 있음. TS: 컴파일언어. 정적 타입 검사로 인한 컴파일타임에 에러 발견 가능

2. 장단점 차이 JS: 유연하고 모든 브라우저에서 실행되며 라이브러리 생태계가 크다. 타입오류 발견이 어렵고 유지보수도 어렵다. TS: 실행 전 타입에러를 파악가능하고 안전하고 유지보수가 용이. 이를 위한 별도의 컴파일 과정 필요함. (외부 라이브러리가 ts를 지원하지 않는다면 .d.ts 파일을 만들어 직접 컴파일 옵션 만들어줘야함), 무엇보다 매번 타입을 지정해줘야하는 번거로움으로 인한 개발생산성 감소.

자바스크립트의 발전: 타입스크립트 사용 배경

자바스크립트는 웹브라우저에서만 동작하도록 만들어 졌고 또 아주 간단한 사용자 상호작용을 처리하기 위해 만들어진 언어입니다. 사용자가 버튼을 클릭할 때 경고창을 띄워주는 정도의 상호작용을 위한 언어이기 때문에, 엄격한 문법을 갖출 필요가 없었습니다. 그런데 Node.js가 등장하면서 웹브라우저만 실행할 수 있었던 자바스크립트를 여러 다른 환경에서 실행할 수 있게 되었고, 웹브라우저 외에 웹서버, 모바일과 데스크탑 어플리케이션 등 여러 분야에 활용이 되면서 코드의 안정성을 보장할 필요가 생겼습니다.

자바스크립트의 한계

자바스크립트의 근본적인 한계는 자바스크립트 언어가 채택한 동적 타이핑 시스템입니다.

동적 타입 언어는 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 해당 값의 타입에 따라 변수 타입이 결정됩니다.
타입에 관대할 뿐만 아니라, 연산을 위하여 필요 시 임의로 형 변환까지 실행하므로 개발 의도와 다르게 동작할 가능성이 있습니다.

let a = "hello" //문자열
a = 19970107 //숫자

a.toupperCase();  //오류가 발생할 코드이지만 사전에 알 수 없고 런타임에서 확인 가능

자바스크립트의 한계를 보완할 수 있는 타입스크립트

타입스크립트는 자바스크립트의 한계를 보완할 수 있는 슈퍼셋 언어입니다,

타입스크립트의 점진적 타이핑 시스템
- 타입스크립트는 점진적 타입 시스템을 채택해서 정적 타입 시스템처럼 프로그램 실행 전에 타입을 올바르게 썼는지 타입 검사를 해 타입 안정성을 확보하면서도 동적 타입 시스템처럼 변수에 우리가 일일이 모두 타입을 지정해주지 않아도 되는 유연함까지 갖춘 언어입니다. 이를 통해 타입 관련 오류를 사전에 방지할 수 있으면서도, 기존 자바스크립트로만 작성된 코드의 점진적 마이그레이션도 가능합니다.

자바스크립트에 정적 타입을 추가한 언어로, 자바스크립트의 슈퍼셋이다.
런타임에 타입이 결정되는 자바스크립트와 달리, 컴파일 시간에 타입 체크가 이뤄진다.
타입을 명시적으로 지정하게 하고, 타입 관련 편의 기능을 제공한다.
버그를 미연에 방지하여 코드의 안정성을 높이고 장기적으로 생산성을 향상시킨다.

자바스크립트에는 int나 string같은 자료형이 존재하지 않습니다. 잘못된 자료형의 값을 넣어도 추적이 안 된다는 단점이 있습니다. 이를 보완하기 위해 도입된 것이 타입스크립트입니다. 타입스크립트는 정적 타입 언어로 코드를 작성하는 중에 오류를 발견하고 빠르게 해결할 수 있습니다. TypeScript는 JavaScript의 슈퍼 셋입니다. 슈퍼 셋이란 특정한 언어의 모든 기능을 포함하면서 다른 기능까지 활용 가능하도록 확장된 것을 말하는데, TypeScript를 적용하는 경우 기존의 JavaScript로 짜인 코드에 확장하는 식으로 대규모 수정 없이도 TypeScript 적용이 가능합니다.

QueenCards / ProjectAnalysis