TypeScript 강의: Section 1

🤔 왜 타입스크립트?

개발 도중 런타임 에러가 아닌, 코드의 논리적인 실수로 인해 웹 애플리케이션에서 발생할 수 있는 문제들을 개발 도중에 포착할 수 있음! 즉, 보다 깔끔하고 에러가 적은 코드를 작성하도록 돕는다!

정의

• 자바스크립트의 Superset
• 프로그래밍 언어인 동시에 도구
  • 코드를 실행하여 TS 코드를 JS 코드로 컴파일하는 컴파일러
  • 타입스크립트 컴파일러가 보다 더 나은 구문과 작업을 수행할 수 있게 함
  • 코드 + TS => JS

컴퓨터 과학에서 슈퍼셋(Superset)이란 특정한 언어의 모든 기능을 포함하면서, 다른 기능까지 포함하도록 향상 또는 확장된 것을 의미
출처 : eensungkim님 Velog - TypeScript (TIL 96일차)

특징

• 자바스크립트에 타입을 추가
• 자바스크립트 환경(브라우저, Node.js)에서 실행될 수 없으나, 컴파일 후 JS 코드로 변경되면 사용 가능
• 타입스크립트만 이해할 수 있는 특정 기능들이 있음
• 런타임 에러로 인한 에러를 초기에 발견할 수 있도록 추가적인 오류 검사 제공
• Decorators(장식자) 등 특정 메타 프로그래밍 기능 제공
• 타입스크립트의 odds는 구성하기 매우 용이함
  • 요구 사항에 맞게 미세하게 조정하여 더 엄격하거나 느슨하게, 원하는 대로 동작하게 할 수 있음
• 최신 도구와 IDE를 사용하여 타입스크립트가 아닌 프로젝트에서도 도움을 받을 수 있음

설치

npm install -g typescript 

그래서 구체적으로 예시를 보자면..

// 예시 코드
const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

function add(num1, num2) {
  return num1 + num2;
}

button.addEventListener("click", function() {
  console.log(add(input1.value, input2.value));
});

예시 코드를 .ts 파일로 생성하면 value 속성이 실제로 있는지 확실하지 않다고 오류를 띄워 주는데, 이는 바닐라 자바스크립트에서는 고려조차 하지 못하는 실수다!

• id별로 요소를 선택하고 있지만 타입스크립트는 이 코드가 정말 작동할지 알 수 없음 (ex: 오타 문제)
• 대부분의 HTML 요소들은 우리가 액세스할 수 있는 value 속성을 가지고 있지 않음

// 예시 코드 수정 파트 1
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;

• !를 추가함으로써 요소를 얻을 것임을 타입스크립트에게 알릴 수 있음! 즉, 결코 null을 야기하지 않는다고 알리는 것
• 또한 항상 input 요소이기 때문에 형 변환이라는 HTMLInputElement로 사용할 수 있음

타입스크립트는 개발자가 의도를 더 명확히 하고, 코드를 다시 확인하도록 요구하며 도와준다는 것을 확인할 수 있음!

하지만 가장 큰 특징이자 장점은 Type!

(parameter) num1: any

이러한 IDE 메시지에서 타입스크립트가 말하고자 하는 것은 결국,
"그 안에 무엇이 있는지 알지 못하며 어떤 타입의 값이든 될 수 있다" 는 것인데

우리는 타입스크립트를 이용함으로써 보다 명시적인 타입을 추가할 수 있음!

// 예시 코드 수정 파트 2
function add(num1: number, num2: number) {
  return num1 + num2;
}

button.addEventListener("click", function() {
  console.log(add(+input1.value, +input2.value));
});

• 다음과 같이 num1과 num2는 Number 타입이 될 것이라고 명시 가능
• 또한 input1.value와 input2.value가 String 타입이므로 발생하는 오류를 형 변환하여 해결 가능

이러한(! as .., :number) 타입스크립트 코드들은 자바스크립트로 컴파일할 때 코드를 평가하고 잠재적 에러를 찾는 데 사용되지만, 해당 작업 후에 제거되고 일반 자바스크립트가 출력으로 얻어짐!