확실히 실제로 써보고 다시 공부해보니깐 이해가 훨씬 잘되는것 같다. 이전에는 개념들이 한번에 이해가 안되는게 많았는데 역시 코드는 쳐봐야 한다. 어제는 영상은 시청하지 않고 퀴즈만 풀었기에 이번에는 이틀치의 강의를 몰아서 공부하려니까 오래 걸리고 글이 길어질것 같다.
그럼 TS 복습 가보자고!
TS를 사용하는 이유
JS는 굉장히 유연한 언어이지만 이것은 개발자의 개발에 있어서 단점으로 작용할때가 많다. 유연한만큼 이상하게 코드를 칠때도 적용되는데 예를들어 string + boolean 을 하려고 하면 타입에 상관없이 더해버린다.
console.log([1,2,3,4] + false) 를 한다면 콘솔에 string인 '1,2,3,4false' 가 찍힌다. 그렇기에 TS 를 사용하면 type safety를 확보하여 이런 기행을 방지 할 수 있다.
또 JS의 런타임에러는 유저가 마주 할 수 있기에 이를 코드를 실행하기 전에 바로 잡을 수 있다는 장점이 있다.
이러한 이유들로 JS로 개발하다가 타입스크립트로 넘어가는 이유가 크다고 한다.
TS작동원리
TS는 strongly typed programming language 로 타입을 강제하며 컴파일을 통해 JS로 변환되어야 브라우저에서 읽을 수 있는데 애초에 에러가 있다면 JS로의 변환이 안된다. 그렇기에 변환전부터 사전에 에러를 방지 할 수 있으며 변환이 된다면 버그가 없을것이라고 볼 수 있다.
TS의 특이점
TS는 변수와 타입을 명시할 수 있고 또한 자동으로 type을 infer(추론) 할 수도 있다. 코드의 가독성 측면에서 본다면 TS가 타입을 추론 할 수 있다면 명시적인 표현은 최소한으로만 사용해주는것이 좋다. 예를 들어 다음과 같은 코드를 본다면 let a = [1,2,3,4] TS는 자동으로 a 는 숫자의 배열이란것을 추론 할 수 있을것이다.
TS의 타입
기본적인 Type들
number, string, boolean, array 등 다음과 같이 사용 할 수 있다.
- array of number:
let a : number[] = [1, 2, 3] - array of string:
let a : string[] = [a, b, c] - array of boolean:
let a : boolean[] = [true, false, true]
Optional Type
있을수도 있고 없을 수도 있음
예시) age : number | undefined boolean 의 뒷부분이다. 더 간단하게 사용할 수 도 있는데 다음과 같이 사용한다 age ?: number 또한 다음과 같은 코드가 있을때
const player: { name: string; age?: number; } = { name: "will" }
이렇게 사용하면 에러가 나는데 if(player.age < 10){return 1}
이렇게 사용하면 에러가 나지 않는다 if(player.age && player.age < 10) {return 1}
player.age && 부분이 "player.age 가 존재하면" 이라는 뜻이기 때문이다.
Type Alias(별칭)
Type으로 반복되는 것들의 틀을 만들어 지정함
예시) type Player = {name: string, age?:number} 의 틀을 만들고 다음과 같이 쓴다
const will : Player = {name: "will"}
const sarah : Player = {name: "sarah", age: 28}return 의 탑입 또한 다음과 같이 지정 할 수 있다
function playerMaker(name: string) {
return {name: name}}
const will = playerMaker("will")
will.name = will
//will.age 같은 경우는 알수 없다 다음과 같이 해보자
function playerMaker(name: string) : Player {
return {name}}
//will.age = 28 같은것을 할 수 있다. Readonly Properties
property를 readonly 상태로 만들수 있다. JS 에는 없으며 readonly 상태는 현 상태에서의 변경을 불가능하게 만든다.
예시)
const numbers : readonly number[] = [1,2,3,4]
numbers.push(1) 처럼 변경하려고 해도 readonly라면 변경이 안된다
(에러를 뱉음)Tuple
최소한의 길이를 가진 array를 생성 가능하게 해주고 특정위치에 특정 타입을 만들게 함.
["will", 12, false]
=> const player :[string, number, boolean] 처럼 지정해줌 여기서 [string, number, boolean] 부분이 Tuple 이다.
Any
모든 가능성을 포함하는 타입. TS를 벗어나고 싶다면 any를 사용하면 된다.
사용할 수 는 있으나 사용하게 되면 TS의 보호장칠를 제거함으로 TS를 사용하는 의미가 없어지기에 웬만해서는 쓰지 않는다.
TS에만 존재하는 타입들
Unknown
어떤 타입일지 모르는 변수의 타입을 지정해 줄때 사용한다.
예시
let a: unknown;
if(typeof a === "number") {let b = a+1}
if(typeof a === "string") {let b = a.toUpperCase();}Void
return 을 하지 않는 함수에 사용한다.
예시
function hello() {console.log("x")}
=> 자동으로 void로 infer 가능하다Never
함수가 절대 return을 하지 않을때 사용한다.
예시
function hello(): never {return "x"} => 에러
function hello(): never {throw new Error("xxx")} => 작동
function hello(name: string|number) {
if(typeof name === "string") {
name
} else if(typeof name === "number") {
name
} else {
name
}
} => 마지막 name의 경우 자동으로 never로 infer
왜냐하면 name은 string or number 이기 때문에 실행이 될 수 없음