TypeScript(1)

타입스크립트를 사용하는 이유

우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못한다.
결국 자바스크립트로 변환하고 로드해야 실행할 수 있다.
이런 번거로움을 감수하면서까지 타입스크립트를 사용하는 이유는 뭘까?

아래의 다음과 같은 함수가 있고, 어떤 개발자가 실수로 인자값 없이 함수를 호출했다고 가정해보자

function add(num1, num2){
	console.log(num1 + num2);
}

add(); // NaN

여기서 자바스크립트는 아무런 힌트와 에러없이 실행이 된다.
아무 인자값이 없기 때문에 매개변수로 undefined가 들어 갈 것이고,
undefined와 undefined를 더해서 결과는 NaN이 출력된다.
당연히 우리가 원하는 결과는 아니다!

그 외에도 여러가지 경우를 보자면...

add(1); // NaN
add(1, 2); // 3
add(1, 2, 3); // 3 => 세번째 인자 값은 무시된다.
add('Joon', 'young'); // 'Joonyoung'

add(1)을 제외한 나머지는 결과가 나오지만, add(1, 2, 3)같은 경우에는 개발자는 6을 생각하고 실행했지만 3이 나오므로 어디서 잘못되었는지를 알 수 없게된다.
add('Joon', 'young')같은 경우에는 숫자만을 인자로 받아서 사용하게끔 만들었지만 원하는 사용방법이 아닌채로 결과가 출력이 되는것을 볼 수 있다.

이렇게 자바스크립트는 원하는 사용방법도 아니고 원하는 값도 얻지 못하는 코드임에도 아무런 경고도 주지 않는다.

자바스크립트와 타입스크립트의 차이(1)

function showEl(arr) {
	arr.forEach((el) => {
    	console.log(el);
    });
}

showEl([1, 2, 3]); // 1, 2, 3

showEl이라는 함수는 인자값으로 배열을 전달해주면 잘 동작하지만,
배열이 아닌 것을 인자값으로 전달하면 래퍼런스 에러가 발생 할 것이다.

왜냐면 이 숫자 1에는 forEach라는 메소드가 존재하지 않기 때문이다.
JavaScript는 실행되는 시점 즉 '런타임'에 타입이 결정되고 오류를 발견한다. (동적언어) ✔︎
개발자가 실수한 것을 사용자가 그대로 볼 수 있는 것이다.

반면에, TypeScript 또는 Java와 같은 언어는 컴파일 시에 타입이 결정되고 오류가 발견된다. (정적언어) ✔︎
초기의 코드 작성은 오래걸려도 더욱 안정적이고 빠르게 작업을 진행시킬 수 있는 장점을 가지고 있다.

자바스크립트와 타입스크립트의 차이(2)

그렇다면 타입스크립트 환경에서 처음에 사용한 자바스크립트 코드를 넣어보자.

👉 이곳에서 타입스크립트를 설치 없이 연습할 수 있다.

에러가 생긴 것을 볼 수 있다. 빨간색 밑줄을 갖다대면 에러를 알 수 있을 것이다!
any타입은 정말 어떤 타입일지 모를때 사용하는 것인데, 가급적이면 사용하지 않는것이 좋다.

• 따로 타입을 지정해주지 않았으므로, 타입스크립트에서 num1과 num2를 any타입이라고 판단한 것이다.

나머지 에러는 인자값으로 두개를 받아야하는데, 아예 안받았다거나 한개 혹은 세개를 인자값으로 받아서 에러로 알려주는 것이다. <= 불친절한 자바스크립트에 비해서 아주 친절하게도 알려주신다.

타입지정

그러면 이번에는 타입을 지정해보려고 하는데, 함수를 만든 개발자는 오로지 숫자만 더해서 사용하는 방법을 의도했다고 가정하고 타입을 지정해보자

1

function add(num1: number, num2: number){
	console.log(num1 + num2);
}

:원하는 타입의 타입지정 문법으로 원하는 타입의 매개변수를 받도록 의도할 수 있다.

타입을 지정했더니 아까는 보이지 않았던 add('Joon', 'young')에서 다음과 같은 에러가 나타나게 된다.

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

any타입이었던 인자가 number타입으로 고정이 되면서 string타입을 인자값으로 받던 함수호출 부분이 타입의 불일치로 에러가 생긴 것이다.

2

두번째로 사용했던 자바스크립트 코드로는 다음과 같이 타입을 지정 할 수가 있다. (숫자로 된 배열을 받기를 원한다는 가정)

function showEl(arr:number[]) {
	arr.forEach((el) => {
    	console.log(el);
    });
}

showEl([1, 2, 3]);