TypeScript에 대해서 하나씩 차근차근 배우면서 작성하는 글입니다.

📌 TypeScript vs JavaScript

TypeScript는 JavaScript의 슈퍼셋으로, JavaScript의 기능을 포함하면서도 정적 타입 시스템을 추가한 프로그래밍 언어입니다.
TypeScript의 타입 시스템은 코드의 안정성과 가독성을 높이고, 오류를 런타임 이전에 발견할 수 있게 해주는 큰 이점을 제공합니다.

이번 시간에는 TypeScript와 JavaScript의 차이점을 살펴보며 TypeScript의 타입 시스템이 어떤 이점이 있는지 알아보겠습니다!

JavaScript의 동적 타입

JavaScript는 동적 타입 언어로, 변수의 타입이 실행 시간에 결정됩니다. 이로 인해 코드 작성이 더 쉽고 유연하게 할 수 있지만, 런타임 오류의 위험이 증가합니다.

let value = 42; // number
value = "hello"; // string

위에 예시 코드처럼 JavaScript의 타입은 유연한 변수 사용이 가능하다는 점이 장점도 있지만 단점도 있습니다!

동적 타입의 장점

• 코드 작성이 간결하고 빠름
• 유연한 변수 사용 가능

동적 타입의 단점

• 타입 관련 오류를 런타임 전에 발견하기 어려움
• 가독성과 안정성이 떨어질 수 있음

TypeScript의 정적 타입

TypeScript는 정적 타입 시스템을 도입하여 변수의 타입이 컴파일 시간에 결정됩니다. 이를 통해 개발자는 코드의 안정성과 가독성을 높이며, 런타임 이전에 대부분의 오류를 잡을 수 있습니다.

let value: number = 42;
value = "hello"; // Error: Type '"hello"' is not assignable to type 'number'.

위에 예시 코드처럼 TypeScript는 타입 선언이라는 시스템을 사용하여서 개발자가 의도하지 않은 타입의 값이 할당되거나 함수에 전달되는 것을 방지할 수 있습니다.

정적 타입의 장점

• 코드의 안정성과 가독성 향상
• 코드의 품질과 생산성 향상
• 컴파일 시간에 타입 관련 오류 발견 가능

정적 타입의 단점

• 코드 작성에 추가적인 노력 필요 (타입 선언)
• 일부 코드 유연성이 감소

TypeScript의 기본 타입

TypeScript의 기본 타입은 JavaScript의 기본 타입을 기반으로 하되, 몇 가지 추가된 타입을 포함하고 있습니다.
TypeScript는 JavaScript의 슈퍼셋이기 때문에, JavaScript의 기본 타입을 그대로 사용할 수 있습니다.

JavaScript의 기본 타입

• number : 숫자 값을 나타내는 타입 (정수, 실수 등)
• string : 문자열 값을 나타내는 타입
• boolean : 참(true) 또는 거짓(false) 값을 나타내는 논리 타입
• object : 원시 타입이 아닌 모든 타입을 나타내는 타입
  (Ex. 객체, 함수, 배열 등)
• null : 값이 없음을 나타내는 타입
• undefined : 값이 정의되지 않았음을 나타내는 타입

TypeScript에서 추가된 타입

• array : 동일한 타입의 요소를 저장하는 배열 타입
  (Ex. number[], Array)
• tuple : 서로 다른 타입의 요소를 저장하는 고정된 길이의 배열 타입
  (Ex. [string, number])
• enum : 명명된 상수의 집합을 정의하는 타입
  (Ex. enum Color {Red, Green, Blue})
• any : 어떤 타입이든 허용하는 타입 (타입 검사를 무시하고 싶은 경우에 사용)
• void : 값이 없음을 나타내는 타입 (주로 함수에서 반환 값이 없는 경우 사용)

이처럼 TypeScript는 JavaScript의 기본 타입을 확장하여, 개발자가 더 명시적으로 타입을 정의하고 사용할 수 있게 해줍니다. 이를 통해 코드의 안정성과 가독성이 향상됩니다.