섹션1 :

타입스크립트란 무엇인가?

마이크로소프트에서 만든 자바스크립트의 슈퍼셋 프로그래밍 언어.

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

어떻게 작동하냐면 타입(Type)을 추가하는 것이다.

슈퍼셋의 의미

모든 자바스크립트 코드는 유효한 타입스크립트에 포함된다.

자바스크립트 + 타입 시스템 = 타입스크립트

Static Checking

타입스크립트는 정적 검사Static Checking 이라는 걸 수행한다

실행하지 않고도 코드 내 오류를 잡는 기능.

코드를 실행하는 건 자바스크립트가 할 일이다

타입스크립트는 정적으로 검사한다

실행하기 전에 코드를 보고 문제가 있는지 알려준다.

타입스크립트는 정적 타입 검사기로서, 실행 전에 프로그램 데이터의 종류나 타입을 검사한다

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

타입이 중요한 이유. 오류를 찾아준다

실행할 필요없이 타입스크립트로 작성하면서 오류가 나타나면 바로 확인해서 고치고

코드를 일반 자바스크립트로 컴파일링한다. 즉 타입스크립트는 개발용이고 개발 후엔 자바스크립트로 컴파일된다

타입스크립트에만 쓰이는 추가 구문은 다 타입과 관련이 된다

타입스크립트 설치

npm install -g typescript

-g는 전역. 글로벌 설치를 한다는 뜻.

tsc라는 명령어를 쓸수 있다

tsc -v

버전 알아보기

TypeScript Playground

브라우저 기반 환경

아무것도 설치하지 않고 바로 타입스크립트를 작성할 수 있다

https://www.typescriptlang.org/play

왼쪽에 타입스크립트 오른쪽에 컴파일된 자바스크립트가 보인다.

Example에 enums를 보면 여러가지 예시가 나온다

TS Config에 들어가면 설정을 바꿀 수 있다

타입스크립트를 작성하면 오른쪽에 자바스크립트로 컴파일된 코드가 보이고,

코드를 실행하려면 왼쪽에서 Run 을 클릭하면 된다

타입스크립트 파일 만들기

확장자는 .ts

.tsx 확장자도 있는데 간단히 말해서 TypeScript에 jsx 파일을 더하는 건데

TypeScript로 jsx 구문을 쓸 수 있게 해준다

코드를 작성하는 다른 프로그래밍 언어들은 일반적으로 코드를 작성하고

코드를 실행해야지 작동 등을 확인할 수 있지만

TypeScript의 경우는 앞서 정적이라고 말한 것처럼 코드를 작성하면서도

편집기 내에서 확인할 수 있는 기능을 제공한다

Math.round()

를 치면 괄호 안에 숫자가 필요한데 없다고 빨간 밑줄이 뜬다.

워드프로그램에서 맞춤법이 틀렸다고 알려주는 것과 비슷하다.

즉 이렇게 코드를 작성하면서 오류를 확인할 수 있다

컴파일 하기

타입스크립트 파일을 만든 후

basic.ts

이 타입스크립트 코드를 자바스크립트로 컴파일 하고 싶으면

터미널에서 tsc 명령어를 사용하면 된다

tsc basic.ts

그러면 basic.js 파일이 같은 디렉토리에 생성된다. 컴파일 된 것이다.

타입스크립트에서만 쓰이는 코드는 사라지고 자바스크립트 코드만 남아서 나온다.