AsProps 타입type AsProp = { as?: C;};선택적으로 as 속성을 받을 수 있는 타입.`as` 속성은 `ElementType`을 상속받는 타입 `C`로 지정된다. 이 속성을 통해 사용자가 컴포넌트를 어떤 요소나 다른 컴포넌트로 렌더링할지 결정할 수 있다. PropsToOmit 타입type PropsToOmit = keyof (AsProp & P);`AsProp`와 추가적인 프로퍼티 `P`를 결합한 타입에서 키를 추출한 타입.컴포넌트가 기본적으로 가지는 프로퍼티(`C`) 중에서 `Props`로 지정된 사용자 정의 프로퍼티와 충돌할 수 있는 프로퍼티를 제거할 때 사용한다. PolymorphicComponentProp 타입export type PolymorphicComponentProp ..
📚 PropsWithChildren type PropsWithChildren = P & { children?: ReactNode }; https://github.com/DefinitelyTyped/DefinitelyTyped/blob/813a8799e465a7d5f0d6776643f20f93681e85e4/types/react/index.d.ts#L820 1. generic 타입 매개변수 P를 받아온다 2. 해당 타입에 ReactNode 타입의 children 속성을 추가해준다. 📚 PropsWithChildren 사용하기 PropsWithChildren타입은 말 그대로 children을 가진 props 타입을 의미한다. 직접 children의 타입으로 명시해주어야했던 ReactNode와는 다르게 chi..
깃헙 레포를 보다가 객체에 `as const`를 선언하는 것 몇번 봤었다. `as const`가 뭐지? 왜 객체에 선언할까? 한번 알아보자 🤔 📚 as const 상수가 아닌 것을 상수로 타입단언 (const assertion)한다. 이때 리터럴 타입으로 추론해준다. 리터럴 타입으로 추론되기 때문에 상수가 아닌 것에도 상수처럼 관리할 수 있다! 📚 const assertion을 활용한 상수 관리하기 const Colors = { red: "#FF0000", blue: "#0000FF", green: "#008000" } 각 컬러의 대문자를 담은 Colors 변수를 선언해줬다. Colors 변수 내부에 추론된 값을 보면 각 속성 별로 리터럴 타입이 아닌 `primitive type(string)`으로 추론..
📚 타입스크립트 컴파일 옵션: tsconfig.json { // 컴파일러 옵션 지정 "compilerOptions": { // 컴파일될 ES(JS) 버전 명시 - "ES2015" 권장 "target": "esnext", // 모듈 시스템 지정 - "CommonJS", "AMD", "ESNext" "module": "ESNext", // 모듈 해석 방식 지정 - "Node", "Classic" "moduleResolution": "Node", // ESM 모듈 방식 호환성 활성화 여부 "esModuleInterop": false, // 모든 파일을 모듈로 컴파일, import 혹은 export 키워드 "isolatedModules": false, // 모듈 해석에 사용할 기준 경로 지정 "baseUrl":..
📚 함수의 오버로딩(Function Overloading) 함수의 이름이 같지만 매개변수의 개수나 타입이 다른 여러 버전의 함수를 정의하는 것을 함수 오버로딩이라고 한다. function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다 사용예제 💩 타입만 다른 함수를 여러번 사용한 경우 function add1(a: string, b: string) { return a + b; } function add2(a: number, b: number) { return a + b; } add1('Hello', 'World'); // Hello World add2(1, 2); // 3 add1('Hello', 2); add2('Hello', 2); ✨ 함수의 오버로딩..
📚 Parameter properties 타입스크립트에선 클래스의 constructor에서 속성을 선언할 때 매개변수에서 선언하고 초기화하는 것을 허용한다. 클래스 접근 제어자의 사용도 허용한다. 예제 class Octopus { readonly name: string; readonly numberOfLegs: number = 8; constructor(theName: string) { this.name = theName; } } 기존의 작성 예시 class Octopus { readonly numberOfLegs: number = 8; constructor(readonly name: string) {} } constructor 매개변수에 속성을 선언하고 초기화했기 때문에 body 생략가능함 JS 컴파일..
