TypeScript란?

TypeScript(TS)의 등장

JavaScript(JS)는 이상한 언어다.

# null에 숫자 곱하기
null * 213
>> 0

# undefined에 숫자 곱하기
undefined * 8976
>> NaN

# 존재하지 않는 객체 속성에 접근하기
const shape = { width: 14, height: 12 };
shape.hieght
>> undefined

 

위와 같은 자잘한 오류들은 나중에 큰 프로젝트에서 처리하기 힘들어진다.

 

자바스크립트가 이상한 이유는 원래 널리 쓰일 용도로 만들어지지 않았기 때문이다.

만들어진 목적은 단지 브라우저에 스크립팅 기능을 추가하기 위해서였다.

자바스크립트의 특이점이나 문제가 계속해서 발생하게 되어서 개발자들은 이것을 고치려고 하는데 완벽한 프로그래밍 언어가 되지 못했다.

그래서 TypeScript가 등장하게 되었다! (역시 답이 없는 코드는 계속 수정하는 것보다 새로 만드는 것이 현명한 방법인가 보다.)

 

타입스크립트는 자바스크립트 기반 언어다.

자바스크립트에서 자주 발생하는 오류나 버그를 잡아준다.

자바스크립트와 다른 점은 타입스크립트에서는 타입 시스템을 사용한다는 것이다.

즉, 자바스크립트에 타입 시스템을 더한 것이 타입스크립트이다.

 

Types

타입스크립트는 정적 검사를 수행한다. 코드 실행(컴파일링)은 자바스크립트로 한다.

정적 검사란?
실행하지 않고도 코드 내 오류를 잡는 기능

 

타입스크립트는 코드 실행 전에 정적 검사를 함으로써 프로그램 데이터의 종류나 타입을 검사한다.

문자열, 숫자, 배열이나 특정한 프로퍼티를 가진 객체 등을 검사한다.

 

왜 중요한가?

=> 실행 전 에러를 찾는다

개발 단계에서 작성과 동시에 분석을 함으로써 문제를 찾아준다.

타입스크립트 = 개발용, 개발 후 타입스크립트에만 있는 구문은 다 사라지고 자바스크립트로 컴파일링 된다.

 

타입스크립트 환경 설정하기

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

How to set up TypeScript

 

npm를 이용한 설치

npm을 이용해 설치하려면 node.js를 설치해야 한다.

프로젝트별로 TS를 설정하는 방법도 있지만, 전체 프로젝트에서 쓸 수 있도록 하려면 `npm install -g typescript`를 하면 된다. 터미널에서 tsc 커맨드로 사용 가능

-g? global

# ts 버전 확인
tsc -v

 

TypeScript Playground

 

https://www.typescriptlang.org/play/

TS Playground - An online editor for exploring TypeScript and JavaScript

 

아무것도 설치하지 않고 웹사이트에서 TS를 작성할 수 있다.

Run 버튼을 누르면 JS 코드가 만들어지고 Logs를 통해 실행 결과를 확인할 수 있다.

VSCode 사용

Visual Studio Code라는 IDE를 설치하면 따로 설정할 필요가 없다.

마이크로소프트가 TypeScript를 만들었고 VSCode도 마이크로소프트 것이기 때문..

 

타입스크립트 실행하기

파일은 {파일명}.ts로 생성한다.

tsc 명령어를 통해 JS로 컴파일링도 가능하다.

# tsc {파일명}
tsc basics.ts