- 더 나은 개발 경험과 더 생산적인 개발을 원하는 JS 개발자를 위한 강의
- 타입에 익숙한 개발자 ex) 자바, C# 개발자 ...
-> 자바나 C#하고 비슷한 개발환경을 지원한다.
-> 타입 안정성이 있다.
Why not JavaScript
타입 안정성
-> 코드에 버그가 엄청 줄어든다.
-> 런타임 에러가 줄어든다.
-> 생산성도 늘어난다.
1) 자바스크립트는 개발자를 이해해주려고 한다. 에러를 보여주지 않으려고 한다.
이런 말도 안되는 코드를 허용해준다.
배열에 왜 boolean을 더하는 건 말도 안된다.
2) 자바스크립트의 함수는 올바르게 사용하도록 강제하지 않는다.
본래 숫자만 들어가야 실행이 되어야하는데, 문자열과 하나만의 인자만 넣어줬는데도 에러가 없다.
3) 런타임 에러
-> 콘솔 안에서 나는 에러
-> 유저의 컴퓨터에서 코드가 실행될 때만 일어나는 에러일 수도 있다.
코드가 실행되기 전에 언어 자체적으로 문제가 생겼다고 알려주는 것이 가장 좋지만, 자바스크립트는 그렇지 않다.
-> Rust나 Go에서는 아예 실행 조차 되지 않는다.
-> 코드가 실행되기 전에 바로 잡아야한다.
타입스크립트에서는 위와 같은 문제들을 허용하지 않는다.
TypeScript
타입스크립트 : strongly typed(강타입) 프로그래밍 언어
-> 컴파일을 할 때 자바스크립트로 변환된다.
브라우저가 타입스크립트가 아닌 자바스크립트를 이해하기 때문이다.
타입스크립트가 제공하는 보호장치는 타입스크립트 코드가 자바스크립트로 변환되기 전에 발생
Type
Type Checker
데이터와 변수의 타입을 명시적으로 정의할 수 있음.
1) 타입스크립트는 변수 타입을 추론할 수 있다.
https://www.typescriptlang.org/play?#code/DYUwLgBAhhC8ECIAWJjAPYIFA3ggRgJ4jZA
2) 명시적으로 말해준다.
let b : boolean = false변수가 boolean인 것을 알려준다. -> 타입스크립트 문법
-> 굳이 타입 체크를 해주려면 2번을 사용하고, 아니면 1번으로 사용하는 것을 권장한다.
빈 배열 등을 사용할 때는 명시적 표현이 유용하다.
let c : number[] = []
c.push()-> 타입스크립트가 타입을 추론하지 못할 때는 명시적 표현 사용.
하지만 명시적 표현은 최소한으로 사용하는 것이 좋다.
Object Type
object의 타입을 정해준다.
const player : {
name: string;
age?: number; // age? <- 선택사항
} = {
name: "nico"
}
// 앞의 player.age은 값이 존재한다고 말해줌. undefined일 수가 없음.
if (player.age && player.age < 10 ) {
}Alias(별칭)
-> 적은 코드를 쓸 수 있게 해준다. (코드 재활용성)
type Player = {
name:string,
age?:number
}
const playerNico: Player = {
name:"nico"
}
const lynn : Player = {
name: "lynn",
age:12
}c++ 같다. 뭔가 코드가 섹시함.
Return
type Age = number;
type Name = string;
type Player = {
name:Name,
age?:Age
}
// 함수 return 값의 타입을 지정하는 법 function : Player
function playerMaker(name:string) : Player {
return {
name
}
}
const playerMaker = (name:string) : Player => ({name})
const nico = playerMaker("nico")
nico.age = 12
typescript는 return할 때 어떤 타입인지 설정해줘야한다.
Readonly
요소들을 '읽기 전용'으로 만들 수 있음.
// 수정을 시도하려고 하면, 타입스크립트는 멈출 것이다.
// 읽기 전용으로 설정해줬으니.
readonly name:Name,-> filter나 map은 해줄 수 있다.
Tuple
array를 생성할 수 있게 하는데 최소한의 길이를 가져야하고 특정 위치에 특정 타입이 있어야한다.
< 자바스크립트에는 Tuple이 없다 >
const player: [string, number, boolean] = ['nico', 12, false]배열 안에 여러 개의 타입들을 사용할 수 있다.
++ Tuple + Readonly
// 코드 실행 안됨
const player: readonly [string, number, boolean] = ['nico', 12, false]
player[0] = 'hi' 가끔 선택적 타입을 사용하는데 그 떄 undefined를 사용할 수 있다.
any type
-> 비어있는 값들을 쓰면 기본값이 any가 된다.
any는 typescript로부터 빠져나오고 싶을 때 쓴다.
< 타입스크립트의 보호장치로부터 빠져나오고 싶으면 사용하면 된다. >
-> 정말 아무런 타입이나 사용 가능하다.
조언 : any는 타입스크립트를 빠져나오기 때문에 사용하지 않는 걸 권장한다.
가끔 사용하는 것은 좋지만, any를 쓰는건 좋은 방식이 아니다.
any는 모든 타입스크립트의 보호장치를 비활성화시킨다.
-> 타입스크립트는 Type Checker와 소통하는 것이다.
Q. 어떤 타입인지 모르는 변수는 타입스크립트에게 어떻게 말해줘야할까?
Unknown
-> 어떤 작업을 하려면 이 변수의 타입을 먼저 확인해야 하는 방식으로
-> 타입스크립트부터 일종의 보호를 받게 된다.
let a:unknown;
if(typeof a ==='number') {
let b = a+1
}
if(typeof a === 'string') {
let b = a.toUpperCase();
}-> unknown을 사용하면 타입스크립트가 타입 확인작업을 강제로 시킬 것임.
Void
-> 아무것도 return하지 않는 함수를 대상으로 사용함.
void를 따로 지정해줄 필요가 없다. 자동으로 인식하기 때문에
never
-> 함수가 절대 return하지 않을 때 발생한다.
-> return하지 않고 오류를 발생시키는 함수다.
ex) 함수에서 exception(예외)이 발생했을 때
// 잘못된 표시
function hello() :never {
return 'x'
}
// throw new Error 자체가 예외발생했을 때 사용하니 문제 없음.
function hello2() :never {
throw new Error('xxx')
}
function hello(name: string | number) {
if (typeof name === 'string') {
name
}
else if (typeof name === 'number') {
name
}
else {
// 이 name은 type이 never이다.
// 즉, 이 코드는 절대로 실행되지 않아야한다.
name
}
}Call Signatures
-> 함수 위에 마우스를 올렸을 때 보게 되는 것
-> 함수를 어떻게 호출해야하는지 알려준다.
-> 함수의 반환 타입도 알려준다.
Signatures는 인자 타입과 함수의 반환 타입을 알려준다.
// call Signature 타입 만들기
type Add = (a:number, b:number) => number; // 위 코드처럼 type들을 일일이 써줄 필요가 없다.
// 타입스크립트는 add의 타입을 Add를 통해서 알았기 때문이다.
// 그래서 유추할 수 있게 된다.
type Add = (a:number, b:number) => number;
const add:Add = (a,b) => a+b; -> 타입을 만들 수 있고, 함수를 구현하기 전에 함수가 어떻게 동작하는지 서술해둘 수 있다.
