TS 스터디 회고록 - 1

⌨️서론

오랜만에 글을 써 보는 것 같다. 현재 마무리 된 프로젝트와 관련된 글도 써야하고 Next.js와 관련된 글도 써야하는데 또 새로운 회고록을 적게 되었다. TypeScript와 관련되어 필자가 헷갈리는 부분을 적어보고자 한다. Javascript에 있는 내용일 수도 있지만 최대한 겹치는 부분은 피하면서 적을 예정이다. 🙇‍♂️
최대한 정확한 정보로 작성하고는 있지만 불가피하게 잘못 된 정보를 적을 수도 있다는 점 미리 양해바란다.

---

TypeScript

타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이며 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다.
출처 : https://ko.wikipedia.org/wiki/타입스크립트

왜 TypeScript를 쓰는가? (JavaScript의 단점)

TypeScript를 쓰는 이유는 다음과 같이 나타낼 수 있다.
1. TS는 타입 안정성이 있다.
JS는 타입 안정성이 존재하지 않는다. 아래에 예시코드를 보여주도록 하겠다.

[1,2,3,4] + false
> '1,2,3,4false' //이렇게 배열이 사라지고 문자열처럼 취급하게 된다.

function divide(a,b){
	return a/b
}
divide(2,3);
divide("xxxxx"); //-> 이런식으로 해도 error메시지를 따로 띄우지는 않는다. 그냥 NaN이라고 할뿐

이렇듯 JS는 자유롭고 유연한 언어이기 때문에 가끔 문법상 말이 안되는 코드들도 허용을 해 주는 경우가 많다. TS는 JS를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 언어라고 보면 된다.
2. TS는 버그 발생을 줄일 수 있다.
JS의 또 다른 단점으로는 코드가 잘못되었음에도 실행되기 전에 잡아주지 않고, 실행되고 나서 잡아준다는 점이 존재한다. 그러나 TS는 실행되기 전에 타입과 맞지 않는다면 실행을 시키지 않기 때문에 버그 발생을 줄일 수 있다.

TypeScript 적용 방식

❗️ TS는 직접 타입을 줘도 되고 안 줘도 된다.(안 줄 경우에는 변수를 집어넣을 때 그 변수에 담는 value로 type을 추론한다) ❗️

변수명 : 타입 = 타입에 맞는 값
ex) let b : boolean = true;

optional value

• object를 만들 때 해당 변수를 선택적으로 가질 수 있게 하는 것
• 형식 → 변수명 ?: 타입
• 즉, 해당 변수가 있어도 되고 없어도 되게 만드는 것 (다만 있으면 해당 타입만 가능)

type User 이런식으로 별도의 type을 만들어서 객체로 할 수 있다.

//예시코드
type Player = { name:string,age?:number
}
const player1 : Player = {name = "nico"};
const player2 : Player = {name = "Lynn", age:12};

인덱스 시그니처

만약 해당 type에 100개이상의 변수가 있는데 변수명만 다르고 타입이 다 똑같다면 일일이 적는건 비효율적이다. 이럴 때 인덱스 시그니처를 이용하면 변수명을 일일이 설정하지 않아도 된다.
사용방식 예시) [key : string] : string

🚨주의할 사항

• 인덱스 시그니처를 이용하게 되면 객체에 아무것도 안 담아도 허용을 해준다. (규칙을 위반하지만 않으면 다 허용을 해주기 때문)
  그렇기 때문에 꼭 필요한 변수일 경우에는 따로 변수명을 만들어 타입 지정을 해줘야한다.
• 인덱스 시그니처에는 따로 지정한 property value의 타입이 다 동일해야 한다. 일치하지 않은 경우에는 에러가 생긴다.
  만약에 인덱스 시그니처에 number타입으로 지정을 했는데 따로 변수명을 만들어 string타입을 지정하게 된다면 에러를 일으키게 된다.

Typescript 타입 종류(Enum, any, unknown, never)

기본 타입들은 JS에서도 다룬 적이 있기 때문에 생소한 타입을 위주로 작성해보고자 한다.

Enum type

여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입이다.

//예시코드
 enum Role{ADMIN = 0, USER = 1, GUEST = 2}
//적용예시
const user = {
  name : "nicki",
  role : Role.ADMIN
}

왜 사용할까? 만약 Role에 따라 다른 값을 줘야 하는데 몇 백개의 객체를 만들 시 잘못 입력하여 오류가 발생할 수 있는 가능성이 있기 때문에 이를 방지하기 위해 사용한다.

any, unknown, never type

any, unknown : 특정 변수의 타입을 우리가 확실히 모를때 사용한다. 모든 타입을 허용하기 때문에 최대한 지양해서 사용해야 한다.

unknown(any와의 차이점) : 모든값을 저장할 수 있지만 집어넣기는 불가능하다.

never : 존재하지 않는, 불가능한 타입. 즉, 아무것도 담을 수 없다. never의 경우 Error와 같은 함수에서 예외가 발생할 때나 함수 parameter에 여러 타입을 넣었는데 (ex) hello(name : string | number)) 해당 타입이 없을 때 사용한다.
ex) eturn하지 않고 오류를 발생시킬 때 → ex) throw new Error(”xxx”)

---

📚참고문헌
https://nomadcoders.co/typescript-for-beginners
https://www.inflearn.com/course/한입-크기-타입스크립트/dashboard