타입스크립트 - 타입스크립트란 무엇인가?( 공식문서 같이읽기 )

회사에서 자바스크립트로 일 한지 1년이 넘었다. 

자바스크립트는 회사에 와서 제대로 하게 된 것 같다.

종전에는 자바와 파이썬을 위주로 공부를 했고, 자바를 하다가 자바스크립트를 하는 나에겐 처음에는 자바스크립트의 자유로움이 편리하다고만 생각했었다.

일을 진행하고 일을 하다가 보니, 타입과 형태가 정해져 있지 않다 보니 console.log(data) 로 데이터의 form을 확인하거나, 공용 함수의 매개변수가 무엇인지 찾아 가고 하다 보니( 타입스크립트를 사용하면 tooltip 으로 해당 매개변수가 무엇인지 알려줌) 왜 타입스크립트를 여러명이 협업하는 프로젝트에서 사용하는지 일부 공감할 수 있었다. 

그래서 회사에서 사용하진 않지만, 혼자 배워서 익혀 두려고 한다.  

 

보통 공부를 시작하거나, 언어에 대해 공부할 때에는 공식문서를 보는게 좋다고 생각한다. 

물론 설명이 잘 되어 있는 책을 사도 좋은 것 같다.

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

해당 사이트는 타입스크립트 공식 페이지 이다. 

오늘부터 간단히 읽은 내용을 정리 하려고 한다. 

잡설은 이제 끝이고, 시작이다.

---

타입스크립트 공식문서 페이지 https://www.typescriptlang.org/docs/handbook/2/basic-types.html

Documentation - The Basics

 

타입스크립트를 사용 시 장점을 설명하고 있다. 

• 정적 타입 체크 

// Accessing the property 'toLowerCase'
// on 'message' and then calling it
message.toLowerCase();
// Calling 'message'
message();

자바스크립트는 타입이 없이 때문에 해당 Code 가 실행될 때에 평가될 수 있다.

그런데 message의 값이 string 일 경우 toLowerCase 가 실행될 수 있겠지만, string 이 아닐 경우에는 바로 에러가 발생한다. 

두번째 message 같은 경우 string 일 시 함수가 아니므로 실행 불가능하다.

일반 자바스크립트의 경우에는 실행 시점에 알 수 있지만, 타입스크립트의 경우 실행 시점 전에 발견할 수 있다. 

• Non-exception Failures

const announcement = "Hello World!";
 
// How quickly can you spot the typos?
announcement.toLocaleLowercase();
announcement.toLocalLowerCase();
 
// We probably meant to write this...
announcement.toLocaleLowerCase();

해당 announcement는 String 형이다. 

상단 예제의 함수(toLocalLowerCase)는 오타가 포함되어 있다. 

물론 저런 코드인 경우 실행시점에 에러 발생 시 수정이 어려운 것은 아니지만, 한눈에 봤을 때 오타인 저 함수는 타입스크립트의 경우에는 실행시점 전에 발견 할 수 있고, 애초에 자동완성이 가능해 발생하기 어렵지 싶다. 

function flipCoin() {
  // Meant to be Math.random()
  return Math.random < 0.5;
Operator '<' cannot be applied to types '() => number' and 'number'.
}

const value = Math.random() < 0.5 ? "a" : "b";
if (value !== "a") {
  // ...
} else if (value === "b") {
This condition will always return 'false' since the types '"a"' and '"b"' have no overlap.
  // Oops, unreachable
}

위에 두가지 예제는 Math.random은 Math.random() 으로 호출해야 number 간 비교가 가능하다는 것을 이야기하고 있고, 

두번째 예제는 value 가 a가 아닐 시 무조건 b 일 수 밖에 없는데 ( ? 연산자로 결과값은 무조건 둘 중 하나)

첫번쨰 if 문에서 a가 아닌 경우, 즉 b일이므로 두번째 else if 문은 절대 실행될 수 없다. ( if - else if 문은 앞에서 조건이 만족되면 뒤엔 검사하지 않으니까 )

위에서 설명한 논리적 에러를 잡아준다고 한다.  

• 자동완성

상단 사진처럼 타입스크립트를 사용 시,

타입이 정의가 되어 있기 때문에 자동완성 기능을 이용 할 수 있다.

나는 미리 한번 컴퓨터에 세팅을 해 보았는데, 매개변수에 무엇이 들어가는지도 tooltip으로 나와서 편리했다.  

 

해당 페이지에서는 간단하게 타입스크립트를 사용하면 좋은 점들을 설명하고 있는 것 같다. 

 

타입스크립트의 확장자는 ts 이다. 해당 파일을 실행하려면 js 로 변경해야 javascript 인터프리터가 해석할 수 있다.

그렇기 위해서는 타입스크립트 컴파일러가 있어야 하는데 해당 컴파일러가 tsc라고 한다

npm install -g typescript

해당 명령어를 shell 이나 powershell 등에 입력하면 typescript 컴파일러를 설치할 수 있다.

-g 옵션을 주면 global로 설치된다. 시스템에서 해당 모듈을 사용할 수 있다.

 

설치를 했으면, tsc 파일이름.ts 라고 쉘에 입력 시 컴파일 된 Js 파일이 만들어지게 된다.

오늘은 이정도 정리를 하고, 내용을 추가하던 하면서 해야겠다. 

댓글을 남기면 추가 기술을 하거나, 아는 내용이면 답변 달아 드리겠습니다.