TypeScript

• 자바스크립트를 기반으로하는 프로그래밍언어
• 새로만들어진 어너아가 아니라 자바스크립트 언어를 사용하여
  새로운 기능과 장점을 추가한 언어로 자바스크립트 코드를 더쉽고 강력하게 작성할수 있음
• 브라우저와 같은 자바스크립트 환경에서 실행할 수 없음. 이유는 브라우저는 타입스크립트를 실행할 수 없기 때문에.
• 타입스크립트 프로그래밍 언어면서 도구. 코드를 실행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 강력한 컴파일러로 컴파일시 얻게 되는 것이 자바스크립트.
• 그렇다면 타입스크립트의 컴파일한 결과가 자바스크립트라면 어떻게 타입스크립트로 새로운 기능을 추가할 수 있을까?
  • 새로운 기능들을 자바스크립트 해결책으로 컴파일하는 타입스크립트 컴파일러

비교

• 자바스크립트

const button = document.querySelector("button");
const input_num1 = document.querySelector("#num1");
const input_num2 = document.querySelector("#num2");

const add = (num1, num2) => {
  return num1+num2
}

button.addEventListener("click", () => {
  console.log(add(input_num1.value, input_num2.value))
});
// 만약 2,3을 전달했다면 결과는 5가 아닌 '23'
// 기술적인 문제가 아니라 논리적인 문제로 발생한 에러

• 코드 보완

const add = (num1, num2) => {
  if(typeof num1 === "number" && typeof num2 === "number") {
    return num1 + num2
  } else {
    return +num1 + +num2  
  }
}

• 타입스크립트의 경우

const button = document.querySelector("button");
const input_num1 = document.querySelector("#num1")! as HTMLInputElement;
const input_num2 = document.querySelector("#num2")! as HTMLInputElement;

const add: number = (num1:number, num2:number) => {
  return num1+num2
}

button.addEventListener("click", () => {
  console.log(add(+input_num1.value, +input_num2.value))
});

• ! as HTMLInputElement라고 명시
• 또한 매개변수에 타입을 명시하여 코드 작성시 발생할수 있는 에러방지
• +기호를 통한 문자형 타입->숫자형타입으로 형변환