What is TypeScript?
=> 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확이하는 도구(타입검사)임
컴파일러 옵션의 효과 설명하기.
들어가기 전
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
const user ={
name: "Hayes",
id: 0,
}
//interface로 객체의 모양을 명시적 선언
interface User {
name: string;
id: number;
일치하지 않을 경우 TS에서 경고
function fn(x) {
return x.flip()
}
flip
을 가져야만 위 함수가 잘 동작함을 우리는 '코드를 읽음으로써'알 수 있음. 하지만 JS는 fn
이 특정 값과 어떤 동작을 수행하는지 알 수 있는 방법은 호출하고 무슨 일이 벌어지는지 보는 것 뿐. = JS는 오직 동적타입만 제공
그래서 실행 전 예측을 어렵게 만듬.
이런 측면에서 '타입'이란 어떤 값이 fn
으로 전달될 수 있꼬, 어떤 값은 실행에 실패할 것임을 설명한 개념
코드를 실행하기 전 미리 버그를 발견할 수 있는 도구 TypeScript
TypeScript로 실행하면, 코드가 실행되기에 앞서 오류 메세지를 확인할 수 있음.
//JS
const user = {
name: 'Daniel",
age: 26,
};
user.location
//undifined
오류 아닌 오류가 난다.
하지만 TS에서는
Property 'location' does not exist on type '{ name: string; age:number;}'.
명확한 오류가 난다.
이처럼 TS는 명시적 버그는 아니지만, 겉으로 드러나지 않는 버그를 꽤 많이 잡아냄.
ex) 오타, 호출되지 않은 함수, 논리 오류
tsc
, TypeScript 컴파일러
npm install -g typescript
tsc 전역 설치
tsc hello.ts
변환된 JS파일이 다운레벨링을 통해 생성(템플릿리터럴 x)
tsc --target es2015 input.ts
= ECMAScript 5로 실행해서 템플릿 리터럴 수정 X
원시 타입: string
, number
, boolean
TS에서 각자 대응하는 타입이 존재.
"Hello world"
와 같은 문자열 값42
와 같은 숫자. int, float
가 별도로 존재 X 모든 수는 number
true / false
[1, 2, 3]
같은 배열의 타입을 지정은 number[]
구문 사용string[]
= 문자열[number]
= 전혀 다른 의미를 가짐(튜플 타입 부분 참조) any
TS는 any
라는 특별한 타입이 있음. 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용.
let obj:any = {x: 0};
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;
// 이와 같은 코드들은 모두 오류 없이 정산적으로 실행
// `any` 사용하면 추가적인 타입 검사가 비활성화
const, var, let
등을 사용해서 변수를 선언할 떄,
let myName: string = "Alice";
매개변수 타입 표기
function greet(name: string) { console.log("Hello, " + name.toUpperCase() + "!!"); }
greet(42)
실행되면 런타임 오류 발생