TypeScripte- typeScript를 javaScript로 compile

javaScript의 input값에 액세스할 때 알아 두어야 하는 것은  해당 value는 input type이 문자이든 숫자이든 상관 없이  항상 문자열(string)이라는 것이다. 

 

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));
});

 위 함수에서  input으로 전달 받은 인자 두개는 항상 문자열로 전달 된다. javaScript에서 두 문자열을 더하면 수학적으로 덧셈이 되는 것이 아니라 단순이 문자열이 연결되게 된다.

 

 

숫자의 덧셈을 반환하기 위해서는 다음과 같이 수정

const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

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

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

하지만 위와 같이 인자를 전달하면 해당 input을 통해서는 문자열도 전달할 수 없다. 왜냐하면 add 함수는 숫자에대해서만 동작하기 때문이다.

 

위와 같은 문제들이 javaScript에서 자주 일어나는 문제인데 이런 문제는 typeScript로 해결이 가능하다.

 

Typescriptlang.org에서 Download를 클릭하여 설치 방법을 확인할 수 있다. => npm 도구를 사용하는 command를 통해서 download할 수 있는데, npm 도구는 nodeJs패키지의 일부이다.

 

따라서 nodeJS코드를 여기서 작성하지 않더라도 nodeJS는 설치해야 한다. 앞으로 사용할 일부도구에서도 사용될 것이기 때문이다. 그리고 nodeJS를 설치하면서 노드패키지 매니저 즉 npm을 설치한다. 이것은 시스템에 타입스크립트를 전역적으로 설치하는데 사용된다.

 

npm install -g typescript

nodejs.org를 방문하면 최신 버전을 설치할 수 있다. 그리고 nodeJs가 설치되면 typescript를 Dowload하는 위 command를 실행 할 수 있다.

 

이로써 타입스트크립트가 전역적으로 시스템에 설치되었는데 간단히 말해 typeScript가 설치되었 다는 것이다.typeScript는 프로그래밍 언어이지만 javaScript로  컴파일하는 compile하는 유일한 언어이자 javaScript가 있기 때문에 작동하는 프로그램밍 언어이다.

 

따라서 위 명령어로 설치한 것은 typeScript 코드를 이해하여 javaScript로 변환하기 위해 있어야할 컴파일러인 것이다. 위와 같이 컴파일러를 설치하여 TSC 커맨드를 실행할 수 있다. tsc커맨드는 자바스크립트에 해당될 수 있는 타입의 컴파일러를 호출한다.

 

따라서 프로젝트에 수행한 작업을 확인하기 위해 원하는 이름, 예를 들어 using-ts.ts같은 새 파일을 추가한다.

 

먼저 작성했던 javaScript 코드를 typeScript 파일에 복사해 보면 지금 수정해야 하는 에러가 즉시 반환 되는 것을 확인 할 수 있다. 이것이 올바른 IDE를 사용하는 경우에 얻을 수 있는 typeScript의 큰 장점중 하나이다. 또한 파일 형식 대신 IDE에서 큰 도움을 받을 수 있다. 

 

typeScirpt로 적힌 코드는 스스로 몇가지를 분석하고 약적을 식별할 수 있도록 한다. 

 

원래 코드가 적혀 있었던 js파일을 삭제하면 일부 상수 등이 여러 파일에서 사용되어 식별해서 나타나던 일부 에러가 사라진다. 하지만 여전히 에러가 발생하는 것을 확인 할 수 있다.

 

예를 들어 value속성이 실제로 존재하는지 확실하지 않음을 알 수 있다. => 이는 javaScript에서는 고려조차 못한 실수 이다. 하지만 typeScript가 지적하고 있는 부분도 의미가 있다.

 

위 코드는 id별로 요소를 선택하고 있다. 그 시점에 사실 typeScript는 해당 코드가 정말로 작동 할 것이지 알 수 없다. 어쩌면 id명에 오타가 존재할 수도 있다. 그럴경우는 코드가 동작하지 않을 것이고, 해당 요소가 같은 페이지에 존재 하지 않기 때문에 오타여부를 검사할 수 없다.(typeScript는 HTML 코드가 작동하는지 분석하는 것이 아니다.)

 

HTML의 요소를 집어 오는 것은 실패할 수도 있다. 하지만 성공하여 거기서 요소를 선택한다고 하더라도 그것이 input의 요소가 될 필요는 없다. 다른 어떤 요소가 될 수도 있다. 다른 어떤 요소든 될 수 있다.

 

그리고 대부분의 HTML 요소들은 javaScript에서 액세스할 수 있는 value 속성을 가지고 있지 않다. typeScript는 코드의 의도를 더 명확히하고 코드를 다시 확인하도록 요구한다.

 

element 선택자 뒤에 느낌표

const input1 = document.getElementById("num1")!;

위 코드처럼 !(느낌표를 추가함 으로써) 해당 요소가 절대 null이 되지 않을 것임을 알려줄 수 있다. 그러므로써 항상 요소를 찾을 수 있다. 물론 !(느낌표)를 붙인 만큼 해당요소가 반드시 선택될 것임을 분명하게 확인해야 한다.

 

const input1 = document.getElementById("num1")! as HTMLInputElement;

또한 위 코드는 input요소이기 때문에  HTMLInputElement  type으로 사용할 수 있음을 알고 있다. 나중에 typeScript에 이것이 어떤 유형의 요소인지 알려주기 위한 과정을 자세히 살펴본다. 위 코드 처럼 의도를 더 명확하게 하기 위해 typeScirpt를 사용하면 코드를 면밀히 다시 확인 할 수 밖에 없다.

 

 

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

이와 더불어 TypeScript의 큰 장점은 추가 타입이다. 즉 위와 같이 컴파일러가 이해할 수 있는 typeScirpt의 추가 구문을 이용해서 typeScirpt 파일에 보다 명시적인 타입을 추가할 수 있다.:number 해당 인자가 숫자 타입이 될 것이라고 입력하는 것이다.

 

아직도 위와 같이 input1.value에서 에러가 발생하고 있음을 알리는 것을 확인 할 수 있는데, 위 오류는 IDE에서만 보고하는 오류가 아니라 코드를 compile하려고 할 때도 발생한다.

 

 

TSC 명령어를 사용해서 typeScirpt 컴파일러 호출

tsc [typeScript 파일명]

오류를 정확이 이해하기 위해 실제 터미널을 열어 앞서 npm 패키지 관리자를 사용해 설치한 typeScript 컴파일러를 호출하여 해당 코드를 compile해 보도록 한다.

위와 같은 오류가 발생한다. 기본적으로 타입스크립트는 당연히 javaScript로 컴파일 되므로 여전히 자바스크립트로 변환된 파일을 가져온다.

 

 Argument of type 'string' is not assignable to parameter of type 'number'.

=> 문자열(string) 인수를 숫자 타입의 매개 변수에 할당할 수 없다는 것을 보고하고 있다. 

즉 typeScript가 input요소의 value속성에서 얻는 것은 문자열이 된다는 것을 알고 있다는 걸 확인할 수 있다.

 

Input요소를 숫자 type으로 변환하기

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

따라서 더하기 기호(+)를 붙여서 해당 요소를 숫자 type으로 변환하여 이를 수정해야 한다. => 그리고 이 작업을 수행하는 즉시 tsc명령어로 해당 파일을 compile하면 이전의 발생했던 error가 사라진 것을 확인 할 수 있다. 정상적으로 compile이 가능하다는 것을 확인 할 수 있다.

 

compile 결과물 Js파일

var button = document.querySelector("button");
var input1 = document.getElementById("num1");
var input2 = document.getElementById("num2");
function add(num1, num2) {
    return num1 + num2;
}
button.addEventListener("click", function () {
    console.log(add(+input1.value, +input2.value));
});

compile결과물인 js파일을 살펴보면 type을 명시했던 것이 사라지고, 유형변환(this costing)도 사라진 것지고 다시 바닐라 자바스크립트만 남은 것을 확인할 수 있다. 

 

typeScript의 type명시들은 typeScript의 기능일 뿐이다. 다시 말해 typeScript는 javaScript 파일로 컴파일 되기전 코드를 평가 하고 잠재적으로 에러를 찾는데 사용되지만 컴파일이 되고 난 후에는 제거되고 일반 javaScript파일이 출력결과물로 얻어진다. 

 

HTML파일에서 컴파일 결과물인 js파일 사용하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Understanding TypeScript</title>
    <script src="using-ts.js" defer></script>
  </head>
  <body>
    <input type="number" id="num1" placeholder="Number 1" />
    <input type="number" id="num2" placeholder="Number 2" />
    <button>Add!</button>
  </body>
</html>

그러므로 이제 index.html 파일로 이동하여 using-ts.js파일을 가져올 수 있다. 이것은 중요한 부분인데 왜냐하면 브라우저는 typeScript를 실행할 수 없으므로 항상 컴파일된 결과물인 javaScript 파일을 가져와야한다.

 

 

이후 해당 코드를 실행 시켜보면 105인 문자열이 출력되는 것이 아니라 10+5의 덧셈값인 15가 정상적으로 출력되는 것을 확인 할 수 있다. 입력 값을 형변환 하여 함수로 전달 함으로써 문제를 수정한 것이 제대로 반영되어 동작하는 것이다. 

 

Using-ts.js

var button = document.querySelector("button");
var input1 = document.getElementById("num1");
var input2 = document.getElementById("num2");
function add(num1, num2) {
  return num1 + num2;
}
button.addEventListener("click", function () {
  console.log(add(+input1.value, +input2.value));
});

usring-ts.js는 javaScript로써 적법한 코드를 갖추었지만 typeScript로 선언했던 타입 annotation덕분에 문제를 해결할 수 있다. 즉 typeScript는 보다 낳고 깔끔하고 에러가 적은 토드를 작성할 수 있게 해준다.