개발 기록 남기기✍️

Next.js 공식문서에서 getServerSideProps를 보다가 문득..// pages/index.tsimport type { InferGetServerSidePropsType, GetServerSideProps } from 'next'type Repo = { name: string stargazers_count: number}export const getServerSideProps = (async () => { ...}) satisfies GetServerSideProps // 🔥 satisfies라는 키워드가 보이더군요. 흐음?게다가 Vercel의 구성원 중 한 명인 Lee Robinson은 다음과 같이 말합니다. TypeScript 4.9는 Next.js에 거대한 영향을 미칠 것입니다...

🚨 마주한 문제 공통코드를 템플릿 리터럴 타입으로 다음과 같이 정의했어요. type Integer = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; type CODE = `CODE${Integer}${Integer}${Integer}`; 그 중 공통코드 일부를 키로 갖는 객체를 만들려고 했어요. const 예시객체: Record = { CODE001: '테스트', }; 그랬더니 다음과 같은 에러가 터집니다. 예시객체는 CODE000 부터 CODE999까지의 키를 모두 보유한 객체가 되어야 한다는 오류입니다. 1️⃣ 1트 const 예시객체: Partial = { CODE001: '테스트', }; Partial로 Record를 감싸주면 타입에러는 발생하지 않지만, value에 und..

🚨 마주친 문제 Record 형태의 객체를 만들어서 Object.keys() 또는 Object.entries()를 실행했을 때 key의 타입은 ('a' | 'b')[] 형태가 아닌 string[]이 됩니다. 이 때문에 다음과 같이 Object.keys()로 추출한 객체의 키로 객체에 접근하려고 할 때 에러가 발생하게 됩니다. type Person = { name: string, age: number, id: number, } declare const me: Person; Object.keys(me).forEach(key => { // 🚨 Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to inde..

[강의로 이동](https://nomadcoders.co/typescript-for-beginners) vscode에서 환경 셋팅하기 typescript 설치하기 package.json 초기화 npm init -y typescript 설치 npm i -D typescript tsconfig.json 설정디렉터리에 tsconfig.json 파일이 있으면 해당 디렉터리가 typescript 프로젝트의 루트임을 나타낸다. tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다. MAC : touch tsconfig.json Window : code tsconfig.json // 이후 ctrl+S (저장) package.json에 작성 // "main" 코드 삭제 ..

[강의로 이동](https://nomadcoders.co/typescript-for-beginners) Classes abstract class User { constructor ( private firstName : string, private lastName : string, protected nickname : string ){} abstract getNickName() : void getFullName(){ return `${this.firstName} ${this.lastName}` } } class Player extends User { getNickName(){ console.log(this.nickname); } } const sun = new Player("sun", "yoo", "너해동..

[강의로 이동](https://nomadcoders.co/typescript-for-beginners) Call Signatures 프로퍼티로 호출 가능한 것을 설명하려면 객체 타입에 Call Signature을 작성할 수 있다. Call Signatures는 다음과 같이 함수의 매개변수와 반환 타입을 type으로 미리 선언한다. React.js를 사용할 때, props로 함수를 보내게 되면, 어떻게 함수가 작동하는지 타입스크립트한테 설명해줘야 한다. type Add = { (a : number, b: number) : number; } // type Add = (a : number, b: number) => number; const add : Add = (a, b) => a + b; Overloadin..

[강의로 이동](https://nomadcoders.co/typescript-for-beginners) 왜 Typescript인가? Typescript는 타입 안정성을 가진다. 코드에 버그가 줄어들게 되며, 런타임 에러가 줄어들고 생산성도 늘어난다. 런타임 에러 : 콘솔 안에서 일어나는 에러 Javascript는 매우 유연한 언어이다. 개발자를 이해하려고 해서 아무리 이상한 코드라고 해도 에러를 보여주지 않으려고 한다. [1,2,3,4] + false -> '1,2,3,4false' function divide(a,b){ return a / b }; divide(2,2); // 1 divide("xxxxx"); // NaN Javascript는 함수를 올바르게 사용하도록 강제하지 않는다. 매개변수의 타입..