Typescript 시작하기

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 Typescript란

타입스크립트는 자바스크립트 슈퍼셋입니다.
슈퍼셋이 뭐죠???
새로 만들어진 언어가 아니라 다행히도 자바스크립트를 기반으로 하는 프로그래밍 언어입니다.

그런데 중요한 것은 타입스크립트는 node js, 브라우저에서 실행할 수 없습니다.
아니 그러면 대체 어떻게 실행하죠???
실행할 수 있는 자바스크립트로 컴파일해야 합니다.

그럼 타입스크립트의 대표적인 특징은 무엇일까요?🤔

• 보다 쉽게 작업할 수 있도록 기능을 제공합니다
• 타입(Type)을 추가합니다
• 오류를 검사할 수 있습니다

👀 타입(Type)

타입스크립트의 큰 특징 중 하나는 다음과 같이 타입에 대해 명시해 줘야 한다는 것입니다.

두 숫자를 입력받아 두 수의 곱을 리턴하는 자바스크립트 예제는 다음과 같습니다.
이 예제는 버튼을 클릭하면 두 수를 곱한 결과를 알려줍니다.

const ElBtn=document.getElementById('myBtn');
const ElInput1=document.getElementById("input1");
const ElInput2=document.getElementById("input2");

const multiple=(num1, num2)=> {
	return num1 * num2;
}

ElBtn.addEventListener("click", function () {
	alert(multiple(ElInput1.value, ElInput2.value));
});

혹시 html의 input 값을 받아올 때 myInput.value 이런식으로 받아 와 보신적이 있나요?
input1과 input2의 타입이 number여도 기본적으로 문자열 형태로 받아옵니다.

이를 그냥 두면 개발 단에서 발생하는 논리적 오류가 될 수 있고,
처리하려면 if문이나 Number() 를 사용하는 등 몇가지 작업을 해줘야 합니다.

이런 경우에 타입스크립트를 사용하면 다음과 같이 코드를 작성할 수 있습니다.

👀 튜토리얼

위 예제를 타입스크립트로 작성해 보겠습니다.

1. 타입스크립트 설치:

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

npm install typescript --save-dev

2. 코드 작성하기

이 파일을 example.ts 처럼 확장자 ts로 하여 저장합니다.

//1.
const ElBtn=document.getElementById('myBtn')! as HTMLButtonElement;
const ElInput1=document.getElementById("input1")! as HTMLInputElement;
const ElInput2=document.getElementById("input2")! as HTMLInputElement;
//2.
const multiple=(num1: number, num2: number)=> {
	return num1 * num2;
}
//3.
ElBtn.addEventListener("click", function () {
	alert(multiple(+ElInput1.value, +ElInput2.value));
});

코드 설명

• 1번
  • !는 null값이 아님을 명시하는 것입니다.
  • as 뒤는 이 변수의 성격을 의미합니다.
    위 코드에 따르면 ElBtn은 HTML버튼 엘리먼트, ElInput1은 HTML input 엘리먼트 입니다.
• 2번
  • 매개변수의 타입을 :을 사용해 명시해 줍니다. 두 수를 곱하려면 숫자 타입이여야 합니다.
• 3번
  • 위 코드의 ElInput1.value의 타입은 문자열입니다. 이를 +를 덧붙여 숫자 타입으로 간편하게 변환해 줍니다.

3. 컴파일 하기

작성한 코드를 tsc 명령어를 사용해 자바스크립트로 컴파일 해주어야 합니다.

tsc example.ts

그러면 example.js처럼 같은 이름의 js파일이 생성되며, 이 파일을 import하여 프로젝트에 사용하면 됩니다.

😝 마무리

이렇게 간단하게 Typescript를 찍먹해 보았습니다.
다음 시간에도 저는 살아남을 수 있을까요?!

• 참고:
  【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
  https://www.udemy.com/course/best-typescript-21/