Cominciamo,
새로운 프로젝트가 시작됐다. 캘린더에 아무것도 없는 이틀동안 꿈지럭 대느라 사실 아무것도 첫번째 프로젝트 회고를 썼어야 하는데 못썼다. 이제 기억이 흐려지고 있긴 한데, 주말엔 쓸 수 있을지도 모른다... 기억력아 힘내!
이번 파이널 프로젝트에서는 고민과 방황끝에 새로운 도전, 타입스크립트를 써보기로 했다. 무려 5일이나 고민했다. NestJS와 꼭 써보고 싶었던 GraphQL을 놓기에는 쉽지 않았지만 4주동안은 불가능 할지도 모른다는 생각에, 그리고 완성도를 높이고 싶다는 생각에 지금은 잠깐 접어두고 이후에 따로 공부해보자고 마음 먹었다.
내가 왜 이 직업의 길을 가기로 했는지 다시 생각하게 됐다. 매일이 공부라서 선택했고, 솔루션을 찾는데 집중 할 수 있기 때문에 선택했는데 벌써 그걸 까먹었다. 나란 인간이란.
그래서 이번에도 공부도 하면서, 적절히 현실과 타협을 하면서 시작한 것이 바로 타입스크립트.
자바스크립트도 잘 못하면서 뭔 타입스크립트냐! 할 수 있지만 그래도 내 경험상 언어라는 것이 기본적으로 완전정복이 없고, 적당히 잘 쓸 줄 알면 다른 언어를 배우는 것도 도움이 되고, 같은 라틴어계열 언어는 같이 배우면 도움이 되기 땜시롱, 이번에도 그럴거라고 생각한다.
하여간 그래서 타입스크립트도 TIL을 적어보기로 마음 먹어서 지금부터 시작한다.
Type + script
타입스크립트는 "자바스크립트 + 타입", 이정도로 이해했다.
TypeScript offers all of JavaScript’s features, and an additional layer on top of these: TypeScript’s type system.
출처 : 공식문서
말하자면, 타입스크립트는 자바스크립틔 기능에 더해서 타입시스템을 넣은 것.
그렇다면, 무슨 타입이 들어갈까?
There are already a small set of primitive types available in JavaScript: boolean, bigint, null, number, string, symbol, object, and undefined, which you can use in an interface. TypeScript extends this list with a few more, such as any (allow anything), unknown (ensure someone using this type declares what the type is), never (it’s not possible that this type could happen), and void (a function which returns undefined or has no return value).
기본 원시 타입은 다 들어간다. 거기에 any, unknown, never, void가 추가 되었다.
이 타입들은 아래 설명과 같은 특징을 가진다.
- any : allow anything
- unknown : ensure someone using this type declares what the type is
- never: it’s not possible that this type could happen
- void: a function which returns undefined or has no return value
How to Define Types:
총 3가지 방식으로 타입을 명시하는 것 같다.
추론 타입으로는 interface, 그 외 더 복잡한 객체를 만들어야 할 때는 union 방식과 generic 방식을 사용 하여 생성 한다.
- 추론 타입은 아래와 같이 작성한다.
interface User {
name : string;
id: number;
};그리고 아래와 같이 사용 가능하다.
const user: User = {
name: "Hayes",
id: 0,
};그러나 만약 아래와 같이 사용한다면, 에러가 뜬다.
const user: User = {
username: "Hayes",
id: 0,
}에러는 아래와 같다.
Type '{ username: string; id: number; }' is not assignable to type 'User'.
Object literal may only specify known properties, and 'username' does not exist in type 'User'.- union방식은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법이다.
윈도우의 상태를 예를 들어보면 아래와 같다.
type WindowStates = "open" | "closed" | "minimized";
이와 같이 유니언 방식은 다양한 타입을 처리할 수 있게 된다.
function getLength(obj: string | string[]) {
return obj.length;
}이런식으로 파라미터의 타입을 설정할 수 있다. 위의 예시에서는 문자열과 배열을 파라미터의 타입으로 설정한 것을 볼 수 있다.
- 제네릭(generic)방식은 타입에 변수를 지정하는 방법이다
핸드북에 있는 예시를 보자.
interface Backpack<Type> {
add: (obj: Type) => void;
get: () => Type;
}
// 이 줄은 TypeScript에 `backpack`이라는 상수가 있음을 알리는 지름길이며
// const backpack: Backpack<string>이 어디서 왔는지 걱정할 필요가 없습니다.
declare const backpack: Backpack<string>;
// 위에서 Backpack의 변수 부분으로 선언해서, object는 string입니다.
const object = backpack.get();
// backpack 변수가 string이므로, add 함수에 number를 전달할 수 없습니다.
backpack.add(23);조금 더 쉬운 예제부터 살펴보면,
type NumberArray = Array<number>;이와 같이 위의 배열은 숫자열로만 이루어져있다. 바로 위의 예는 backpack의 변수가 문자열임을 알 수 있다.
위와 같이, 이런식으로 타입을 구성 및 정의 할 수 있다.
finiamo,
우선 타입스크립트에 발꼬락만 담궈봤다. 그런데 처음 언어를 배우는 것 마냥 재미있다.
아직 봐야 할 문서가 많지만, 새로워서 그런가 기대된다 두근두근
