TypeScript

ERROR | 'string' 형식의 식을 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.

ERROR | 'string' 형식의 식을 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.type Colors = { skyblue: string; lightGreen: string; green: string; blue: string; violet: string; pink: string; yellow: string; orange: string; peach: string;};type MainColor = Pick;type SubColors = Omit;export const colors: Colors = { skyblue: 'bg-main-skyblue', lightGreen: 'bg-sub-lightGreen', green: 'bg-sub-green'..

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

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

TypeScript, Next.js, React.js 이미지 미리보기 | Image Preview

프론트엔드라면 프로젝트마다 적어도 한번씩은 image preview 작업을 할 것이다. 그래서 필수 코드를 정리해보았다. 아래 코드는 프로필 이미지를 편집하는 모달이다. 스택은 macro.twin, next.js(pages router)이고 css가 생략되어 있을 수 있다. 위의 빨간 줄을 없애기 위해 아래처럼 방어코드를 작성해주었다. const [imagePreview, setImagePreview] = useState("/images/defaultUser.svg"); const addPreviewImage = async (e: React.ChangeEvent) => { if (e.target.files !== null) { const file = e.target.files[0]; if (file) {..

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

제네릭이란? 종합 병원은 영어로 제네릭 호스피탈이라고 말한다. 그래서 제네릭 함수라함은 모든 타입에 두루두루 사용할 수 있는 범용적인 함수를 의미한다. 함수 계의 종합 병원이랄까...이 개념이 제네릭을 이해하는데 제일 도움이 되는 것 같다. 제네릭을 사용한 경우, 해당 함수를 호출할 때마다 타입이 결정된다. 기본 예시 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[])..

TypeError: Cannot read properties of undefined (reading 'length') 의 원인과 해결 방안

TypeError: Cannot read properties of undefined (reading 'length') 에러는 typescript를 사용한다면 무조건 봤을 에러메세지이다. 원인이 무엇일까? 여러가지 이유가 있을 수 있지만 거의 대부분은 string이나 array의 길이 속성을 참조하기 때문에 발생하는 것이다. 예를 들어, string 인수를 사용하는 함수가 하나 있다고 해보자. 그 함수를 호출했을 때 해당 string 인수 값이 없다면 이 에러를 보게 될 것이다. 위 화면을 보면, zustand에서 magazineStore를 만들어 놓고 sorting이라는 값을 담아서 사용하고 있다. 하지만 RegionResult 컴포넌트를 사용하는 순간에는 magazineStore에서 sorting을 u..

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

서로소 유니온 타입 - 아래 코드에서, 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: ..

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

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) 이 정도는 알고 타입스크립트를 써야할 것 같다.

타입스크립트 컴파일러 옵션 설명

현재 next + typescript 프로젝트를 벌써 몇 달째 진행하면서 타입스크립트에 대해 조금만 더 제대로 알고 싶다는 생각에 좀 아쉬워서 -한 입 크기로 잘라먹는 타입스크립트- 강의 (인프런)을 수강중이다. 타입스크립트 컴파일러 옵션 설명 타입스크립트를 설치하면 자동으로 설정이 되다보니 따로 볼 생각을 못했었다. 하지만 당연하다고 여겼던 것들이 다 tsconfig파일에서 컴파일러 옵션으로 지정되어있었기 덕분이였다. 아래 코드에 따른 설명으로, 어떤 옵션으로 인해서 타입스크립트에서 자바스크립트로 자연스럽게 컴파일되는지 알 수 있다. /tsconfig.json { // 컴파일할 때 사용하는 것들 "compilerOptions": { // ESNext: 최신 문법, (에전 문법을 사용해야만 돌아가는 환경..

router.query.id is string | string[] | undefined. type error 해결

router.query.id is string | string[] | undefined. 에러를 해결하려면 간단하다. 나는 router.query.id 을 string으로 사용하고 싶었기 때문에 아래처럼 문자열로 만들어버렸다. const magazineId = router.query.id?.toString();