타입스크립트

유틸리티 타입 Pick<T, K> 프젝에 적용하기 | TypeScript

얼마 전에 한 입 크기로 잘라먹는 타입스크립트에서 유틸리티 타입을 공부했다. 마침 블로그 프로젝트을 하면서 유저정보등 중복되는 타입 사용이 많아 불편함을 겪고 있었다. 그래서 이번에 프로필 정보 수정 모달을 작업하면서 적용시켜 보았다. 간단하지만 이 타입을 모른다면 절대 사용할 수 없는 코드랄까.. 우선, Pick 타입에 대해 간단히 설명하자면, 원래 만들어 놓은 객체 타입에서 몇 개의 key만 필요할 때 사용가능하다. 즉, 필요한 key만 "Pick"하는 것이다. 내 블로그 프로젝트를 예로 들어보자. a. (/profile/index.tsx) 에서 유저정보를 받아오고 그 타입은 아래와 같이 지정해두었다. const [userInfo, setUserInfo] = useState([]); const { n..

제네릭 | 한 입 크기로 잘라먹는 타입스크립트

제네릭이란? 종합 병원은 영어로 제네릭 호스피탈이라고 말한다. 그래서 제네릭 함수라함은 모든 타입에 두루두루 사용할 수 있는 범용적인 함수를 의미한다. 함수 계의 종합 병원이랄까...이 개념이 제네릭을 이해하는데 제일 도움이 되는 것 같다. 제네릭을 사용한 경우, 해당 함수를 호출할 때마다 타입이 결정된다. 기본 예시 function func(value: T): T { return value; } let num = func(10); // number 타입 매개변수 타입이 다른 경우 function swap(a: T, b: U) { return [b, a]; } const [a, b] = swap("1", 2); 데이터 배열을 받아오는 경우 function returnFirstValue(data: T[])..

서로소 유니온 타입 | 한 입 크기로 잘라먹는 타입스크립트

서로소 유니온 타입 - 아래 코드에서, tag 프로퍼티는 리터럴 타입이기 때문에 중복될 수 없다 -> 구별용으로 굿 (지금은 엎어졌지만 예전에 높은 연차를 가지신 개발자분들과 프로젝트를 했을 때, 이 타입의 코드를 많이 본 기억이 있다. 그만큼 유용하게 쓸 수 있는 타입 방식이 아닐까싶다.) type Admin = { tag: "ADMIN"; name: string; kickCount: number; }; type Member = { tag: "MEMBER"; name: string; point: number; }; type Guest = { tag: "GUEST"; name: string; visitCount: number; }; type User = Admin | Member | Guest; // 방..

타입단언 (value as typeName) | 한 입 크기로 잘라먹는 타입스크립트

타입단언 (value as typeName) - 타입이 확실한 경우에만 사용한다. - 타입스크립트의 눈을 속이는 느낌이랄까.. type Person = { name: string; age: number; }; let person = {} as Person; person.name = ""; person.age = 23; const 단언 let num4 = 10 as const; // 10 Number Literal 타입으로 단언됨 let cat = { name: "야옹이", color: "yellow", } as const; // 모든 프로퍼티가 readonly를 갖도록 단언됨 Non Null 단언 - 이 값이 undefined이거나 null이 아닐것으로 단언하는 것 type Post = { title: ..

Typescript를 사용해본 프론트엔드 개발자가 다시 Typescript 강의를 듣는 이유

제일 공들인 최근 프로젝트를 시작할 때 타입스크립트를 사용하기로 했었다. 요즘은 타입스크립트가 필수라고하기도하고 타입스크립트를 적용한 프로젝트를 해보고 싶기도 했다. 그래서 문법만 빠르게 달달 외워서 프로젝트에 도입했다. 초반에는 타입스크립트 ebook을 구매해서 살펴보는 등 적극적으로 관심을 가졌지만 너무 어려운 책을 선택한 탓인지 어느샌가 그냥 내 ebook 책장에 담겨만 있었다. 더 변명을 하자면, 생각보다 개발하는데 더 기간이 걸려서 mvp 완성시키는데 급급했고, 그 결과 타입스크립트의 기능들을 제대로 활용하지도 못했고 오히려 타입스크립트가 지적해주는 여러가지 오류들을 해결하느라 any를 남발하거나 배포 테스트를 할 때에는 너무 타입스크립트관련 오류가 많이 나서 배포시 타입스크립트 적용 옵션을 끄..

타입스크립트의 기본 중, 잘 몰랐던 부분 정리 | 한 입 크기로 잘라먹는 타입스크립트

1. 다차원 배열의 타입 정의 let doubleArr: number[][] = [ [1, 2, 3], [1, 2], ]; 2. 튜플 - 배열의 길이와 타입을 바꿀 수 없다. - 결국 배열이다. let tup: [number, number] = [1, 2]; // 튜플 사용예시 const users: [string, number][] = [ ["이정환", 1], ["이아무개", 2], ["김아무개", 3], ["박아무개", 4], [5, "조아무개"], // 오류 발생 ]; 3. 옵셔널 프로퍼티(?)와 readonly 프로퍼티 let user: { id?: number; readonly name: string; // name은 값 수정 불가 } = { id: 1, name: "이정환", }; user.n..

타입스크립트의 컴파일 과정 | 간단 예시

타입스크립트란? - 자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한" 언어 타입스크립트는 어떻게 실행될까? 컴파일 과정 여기서 컴파일이란 프로그래밍 언어(소스코드)를 기게어 혹은 기계어와 유사한 low level까지 해석하는 과정을 말한다. => TS -> AST -> Type Checking -> JS -> AST -> Byte Code 용어 정의 AST - 프로그래밍 언어로 작성된 소스 코드의 추상 구문 구조의 트리인데, 보면 엄청 긴 코드이다. 봐도 잘 모른다... Byte Code -가상머신이 이해할 수 있는 중간 레벨로 컴파일 한 코드 (JavaScript에서 가상머신은 브라우저와 node에서 사용되는 V8) 이 정도는 알고 타입스크립트를 써야할 것 같다.