1. Annotation Basic

 

Why using Typescript?

• Static Checking : 코드 실행 없이 오류 검사
• Typescript 코드 작성 -> 오류 검사 -> Javascript로 컴파일링 -> 실행
• 컴파일링 과정에서 오류가 발생해도 멈춤X -> 컴파일링 후 터미널에 오류 메시지 표시
• Typescript Playground : Typescript 코드 테스트

// Typescript 컴파일링
tsc 파일명.ts

 

 

 

How to use Typescript

• 참고 - https://www.typescriptlang.org/download

How to set up TypeScript

 

 

• 특정 프로젝트에 설치시, npx 선언 필수

// 특정 프로젝트 적용

프로젝트 디렉토리 > npm install typescript --save-dev
프로젝트 디렉토리 > npx tsc

 

• npx 없이 적용할 경우, 하단 오류 발생
  ('tsc'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.)

 

• npx 선언이 귀찮다면, Typescript global 설치

cmd > npm install -g typescript

 

 

 

---

 

 

 

Type Annotation

• 변수명 뒤에 :타입 명시
• 타입은 소문자(대문자X)

// 문자열
let movieTitle: string = 'Parasite'

// 숫자
let movieNumber: number = 20191031

// 불리언
let isFilm: boolean = false

 

 

Type Interface (타입 추론)

• Typescript는 타입을 명시하지 않아도 할당된 데이터로 타입 추론

let movieTitle = 'Parasite'

movieTitle = 'Old boy' // SUCCESS
movieTitle = 20191031 // ERROR

 

 

Any Type

• Typescript의 의도와 벗어나기 때문에 사용 빈도 ↓

let things: any

things = 'This is Strings' // 문자열
things = 35 // 숫자
things = false // 불리언
things() // 함수

 

 

지연된 초기화 및 암묵적 Any Type

• 선언한 변수에 타입을 지정하지 않거나, 초기화 하지 않으면 Any 타입으로 자동 지정

const movies = ['Movie1', 'Movie2', 'Movie3'];
let foundMovie; // let foundMovie: any

for (let movie of movies) {
	if (movie === 'Movie3') {
    	foundMovie = movie
    }
}

foundMovie = true
foundMovie = 555
foundMovie()

• 암묵적 Any 타입 지정을 막기 위해 Type Annotation이 필요