TypeScript 사용 이유, 기본적인 type 사용 방법
타입스크립트를 왜 사용하나 ?
JS코드에 장점이자 단점으로 꼽히는 것 중 하나는 언어가 너무 유연하다는 것이다.
JS 코드에서 문자열 + {숫자열, 불린, 배열, 객체 ..} 모든 과정이 error를 반환하지 않는다.
이 부분은 규모가 작다면 별 신경쓰지 않을 수 있지만, 규모가 커질 수록 예상치 못한 이슈가 발생할 수 있다. 또한, 코드를 읽는 과정(렌더링 되기 전)에 error를 잡는 것이 아닌 client가 사용하는 중에 error를 반환하기 때문에 불편함이 생긴다.
**이걸 해결하기 위해** 타입스크립트가 나왔다. 말 그대로 **JS에서 type을 지정**해 주는 방식이 typescript이다.
타입스크립트 Type 지정하기
사용하던 JS코드에서 Type을 지정해주면 된다.(JS처럼 지정하지 않아도 상관없다. 어느 정도 타입스크립트에서 정해준다.)
즉 let name='btae' 라고 선언을 하면 타입은 지정하지 않았지만 타입스크립트에서 변수 name에 타입은 String이라 생각하고 코드를 읽는다.(이 방법을 타입 추론이라 한다)
그렇다면 지정하는 방법은? **: type**
let name : string = "btae" 방식으로 작성 할 수 있다. (이런 방법을 명시적 표현이라 한다.)
이런 방법을 추천하지 않은 분들이 있을 것이다. 이유는 우선 코드가 길어지고, 가독성이 떨어진다는 점이다.
알아서 추론해주는데 왜 더 작성하는 거야? 라는 생각이 드는 건 당연하다.
아래 코드에서는 명시를 해줘야한다.
let arr = [1,2,3]
arr.push('a') >> 에러 O
let arr = []
arr.push('a') >> 에러 X이렇게 달라지는 이유는 당연하게도 빈 배열은 추론 할 수 없기 때문이다. 즉 이런 경우에는 타입을 명시해 주는 것이 바람직하다. let arr : number[] = [];
타입 스크립트 optional type
name : string,;
age? : number;
}={name : "btae"}여기서 ? 에 집중을 해보자. 위 player 객체에는 age가 있을 수 있고 없을 수 있다. 하지만 ?를 작성하지 않는다면 typescript에서 무족건 age값을 입력하라는 에러가 발생한다. 이럴 때 사용하는 방법이 ?이다. 즉 ? 를 포함하면 있을 수도 없을 수도에 의미를 갖는다.
이 부분은 불편하다 생각 할 수 있지만, 에러를 방지하기 위한 좋은 장치이다.
if (player.age < 10)이라는 조건을 달면 에러가 발생한다. 이유는 값이 undefined가 나올 수도 때문이다. 즉 if( player.age && player.age < 10) 이라는 확인 절차가 있어야 사용이 가능하다.
alias 타입 지정하기
type Player = {
name : string,
age? : number
}동일한 형태에 객체 데이터가 많다면, 매번 타입을 지정하는 일이 불편하다. 그래서 alias라는 기능이 있다. 이는 위에 코드처럼 tpye을 미리 지정한다(첫 글자는 대문자로 작성하자)
그리고 각 객체에 타입을 지정할 필요없이 변수를 사용하면 된다.
함수 return 값에 타입 지정하기
function playerMaker(name:string) : Player{
return {
name : name
}
}
const btae = playerMaker("btae");
btae.age = 27;파라미터 인자에 타입을 지정하는 건 알 수 있겠지만 함수 뒤에 작성하는 타입은 이해가 바로 되지 않는다.
작성한 이유는 함수가 반환하는 값의 타입을 Player(위에서 작성한) 타입을 사용한다는 의미이다.
*만일 작성하지 않았다면, age를 추가하는 작업은 불가능 했을 것이다. *
왜냐? 리턴 값에 age라는 key가 없기 때문에
readonly
타입 스크립트에는 readonly라는 속성이 있다.
type Player = {
readonly name : string,
age? : number
}단어 뜻에서 볼 수 있듯 값을 변경할 수 없게 만들 수 있는 속성이다.
Tuple
배열은 보통 하나의 타입을 가지고 작성하지만 다른 타입의 요소들이 들어가는 경우가 있을 것이다. 이럴 땐 이렇게 작성할 수 있다. 그리고 이 방식을 Tuple이라 한다.
const player: [string, number, boolean] = [...]위 코드에서 에러가 나지 않기 위해서는 지켜야 할 규칙이 있는데, 타입을 지정한 3개 요소는 반드시 들어가야 한다. 그리고 순서도 지켜줘야 한다.
any
타입스크립트의 타입 보호를 받지 않기 위해 사용할 수 있다.
그리고 any또한 타입의 일종이다. 아무 값을 받을 수 있다.
최대한 사용하지 말자, 다만 꼭 사용해야 할 상황이 있을 수는 있다.
any를 사용하면 JS에 유연한 언어에 뒤통수 맞게 된다.
추가 타입 스크립트 Type
unknown
API로부터 데이터를 받는데 이 데이터를 모를 때..... unknown을 지정해 줄 수 있다.let a : unknown ; if( typeof a === 'number'){let b = a + 1}받는 값의 타입을 모를 때는 unknown을 통해 보호해 줄 수 있다. 다만 어떤 type인지 모르기 때문에 거의 모든 기능을 통제할 수 있다.
따라서 조건을 통해 type을 먼저 확인하는 과정을 거쳐야 한다.void
return하지 않은 함수에 대한 type이다.never
자주 사용하지는 않지만 함수가 절대 return하지 않을 때 발생한다. 즉 타입으로 never를 작성할 경우 함수의 return은 에러를 발생시킨다.
throw new Error("xxx")와 같은 에러는 가능하다.