#0 타입스크립트를 쓰는 이유

Useful·2023년 3월 19일
0

Typescript

목록 보기
1/5

1. Typescript(타입스크립트)란?

쉽게 설명하자면 Javascript + Type 이라고 생각하면 된다.
자바스크립트의 모든 단점을 보완해 만든 언어이다. (JS의 확장버전)

아래 이미지로 쉽게 설명이 된다.

1-1 ) 타입스크립트의 장점

1. 에러 예방

2. 실행 속도

  • 자바스크립트는 동적 타입의 인터프리티 언어이다.
  • 이 말은 런타임(실행) 시에 타입을 결정해서 적용된다는 것인데, 이것은 '컴퓨터'에게 오류가 있는지 없는지 체크하라고 일을 맡겨버린 것과 같기 때문에 실행 속도가 당연히 오래 걸린다.
  • 하지만 타입스크립트는 '사람'이 코드 작성 시에 오류를 체크하고, 타입을 미리 결정하기 때문에 기계가 할 일을 덜어 실행 속도가 매우 빠르다는 장점이 있다.

3. 든든한 백

마이크로소프트 라는 든든한 형이 뒷받침 하고있다.

1-2 ) 타입스크립트의 단점

1. 초기 세팅

자바스크립트에 비해 초기 세팅이 까다롭고, 꽤 귀찮다.
(컴파일 옵션,모듈 사용 설정 등)

2. 새로운 언어

보통 자바스크립트 개발자인 경우 새로운 언어를 따로 배워 적용해야 한다는 단점이 있다.

3. 더 많은 코드

타입스크립트는 자바스크립트보다 코드를 더 많이 작성해야 한다.
이것은 개발 기간이 늘어나며, 코드를 더 작성하기 때문에 가독성이 더 떨어지는 부작용도 있다.

1-3 ) 결론. 그냥 쓰세요



2. 타입스크립트 살펴보기

만약, 숫자 2개를 더해서 콘솔에 결과값을 출력해주는 addNum 함수를 자바스크립트로 만들었다 가정한다.

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

addNum();    		//rersult: NaN
addNum(1);	  		//result: NaN
addNum(1,2); 		//result: 3
addNum(3,4,5);		//result: 7, 뒤에 5는 생략된다.
addNum('hello', 'world');	//result: "helloworld"

위에 코드 처럼 add 함수를 호출하면 자바스크립트는 문제가 있는 코드라 하더라도 어떠한 에러도 없이 실행시켜준다.

뭔가 이상하지 않나..?
addNum 함수의 목적은 숫자 2개 를 받아서 그에 맞는 값을 출력하는게 목적인데.

위에 코드처럼 Javascript는 너무 관용적이다시피 저 에러를 걸러주지 않는다..

자바스크립트동적인 언어로, 런타임에 타입 결정/오류를 발견한다.

그러나 타입스크립트정적인 언어로, 컴파일 타임에 타입 결정/오류를 발견 한다.

이제 위에 코드를 타입스크립트로 변환해서 차이점을 알아보자.

아래 링크는 웹에서 타입스크립트를 별도의 설치 없이 테스트할 수 있는 사이트다.
-> https://www.typescriptlang.org/play

에러가 5개나 된다. 하나씩 알아보자

"파라미터 num1은 암시적으로 any 타입으로 선언되었다' 는 의미인데.
우선 Javascript는 any 타입을 기본으로 한다.
그러나 any 타입은 정말 개발자가 이 변수나 파라미터에 무슨 값이 들어올 지 모를 때 쓰는 값이고,
any 타입을 사용하면 Typescript를 쓰는 의미가 없으므로 타입을 지정해주자.

우리는 숫자 2개 를 받아서 쓸 것이므로, num1과 num2 뒤에 숫자 타입을 뜻하는 :number 를 붙여준다.

5번과 6번 에러가 난 줄을 한번 살펴보자
에러의 내용은 "2개의 매개변수가 필요한데, 넌 0개를 넣었어" 라고 한다.

타입스크립트는 자바스크립트와 다르게 컴파일 전에 미리 저렇게 개발자의 실수나 잘못된 코드를 걸러준다.

그리고 'hello'와 'world'를 매개변수로 넘긴 라인을 살펴보면 다음과 같은 에러메세지가 보인다.

"'문자열' 타입의 매개변수는 너가 지정한 '숫자' 타입의 매개변수에 맞지 않아." 라고 우리에게 메세지를 보낸거다.

그래서 'addNum' 함수를 잘못 호출한 코드를 지워준다면. 에러는 없어진다.

위에 코드가 이제 정상적인 코드이다.. 진짜 개조금 설명했는데 피곤하다

다음은 기본 타입에 관해 설명해보는 시간을 갖겠다.








+++++++++++++++++++++++++++++++++++

참고한 자료 출처 )
https://fomaios.tistory.com/entry/TS-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8TypeScript%EB%9E%80
코딩앙마님 유튜브채널(https://www.youtube.com/channel/UCxft4RZ8lrK_BdPNz8NOP7Q)

profile
1 commit = 1 life

0개의 댓글