React/typescript

엄격한 단일 상속 Mixin에 앞서서 class의 엄격한 단일 상속에 대하여 알아둬야 합니다. (클래스가 수행할 수 없는 상속의 형태를 알게 되면, 그에 맞는 함수를 구상하는 데 도움이 됩니다.) 클래스 Typescript 그리고 Javascript 클래스는 엄격하게 단일 상속만 지원합니다. 그래서 아래와 같이 할 수 없습니다. class User extends Tagged, Timestamped {// 🚨오류 : 다중 상속 불가 } interface와 class를 헷갈리지 말자. interface는 multiple extends가 가능합니다. 아래 코드에서 interface IUser는 Tagged와 Timestamped를 만족시켜야 합니다. class User는 IUser를 만족시켜야 합니다.(imp..

tsconfgi.json 파일 생성 커맨드$ tsc --initTL;DR 일반적으로 유용한 필드들{ "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "checkJs": true, // 일반 js 파일에서도 에러체크 여부 "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', '..

Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature 이런 에러 문구가 떠서 글로벌 타입을 추가 지정하였습니다. 그 과정 속에서 알게 된 점을 정리해두고자 합니다.(간단?하게) 1. namespace namespace는 JS 일반 객체로 컴파일 됩니다. raw namespace와 raw module은 완전 동일한 사용법을 가지고 있습니다.(이름만 다름) 기본적으로 외부에서 네임스페이스와 모듈의 내부를 참조할 수 없습니다. 하지만, namespace 내부 데이터 앞에 `export`를 사용해서 외부에서도 접근이 가능하게 할 수 있습니다.(module도 완전 동일) 외부파일에서 `.ts`에서 선언..

/** * 타입 트릭 */ type Trick = { name: string; } & ({ gender: 'male'; salary: number; }| { gender: 'female'; weight: number; }) ({ } | { }) 이러한 형태를 가지고 있습니다. 타입을 이렇게 선언할 경우, name 프로퍼티는 무조건 가져야하고, gender를 'male'로 선택하면 무조건 salary만 자동으로 추천이 됩니다. 만약 gender를 'female'로 선택했다면 무조건 weight만 자동으로 추천이 됩니다. optional(?) 로 선언을 했다면 모든 프로퍼티가 자동추천으로 뜨지만, 이렇게 하면 원하는 프로퍼티 타입만 자동추천이 뜨기 때문에 좋은 것 같습니다. import React from ..

react hook에 typescript를 적용하면서 generic 타입에 대해서 아직 제가 잘 모르고 있었다고 깨닫게 되었습니다. 그래서 새로 알게 된 내용을 기록해두고자 합니다. 1. generic의 extends가 곧 최종적인 타입은 아니다. extends는 단순 generic 타입의 범위를 제한시켜주는 역할을 합니다. 제한시킨다는 것은 extends 오른쪽의 조건을 만족하거나 포함해야한다는 것입니다. 완벽히 동일할 필요는 없습니다. 예를 들어 아래의 예시 코드에서는 제네릭 타입 T는 완전히 Ttest와 동일한 타입일 필요는 없되, Ttest의 타입을 만족, 즉, 포함해야 한다는 것입니다. type Ttest = { result: string; } ... 위를 바탕으로 제네릭T 자리에는 다음과 같은..

1. target.value 혹은 target.name의 보편적인 타입 지정 방법 일부 코드 const onChangeHandler = (e: React.ChangeEvent) => { const { name, value } = e.target; setTarget(pre => ({ ...pre, [name]: value })); }; 전체 코드 import { useState } from 'react'; export type TinitialValue = { userId?: string; password?: string; phoneNumber?: string; // necessary passwordConfirm?: string; nickname?: string; code?: string; dogname?:..

1. 🌟keyof를 활용한 key narrowing 만일 함수의 매개변수 key가 반드시 매개변수 obj의 제네릭 타입 T(객체를 받게되는)에 존재하여야 할때, keyof T 를 하면 객체의 key 값을 모아 유니온 타입으로 만들 수 있습니다. 이 때 유니온 타입은 literal type으로 이루어지게 됩니다. function getProperty(obj: T, key: K) { return obj[key]; } let x = { a: 1, b: 2, c: 3, d: 4 }; getProperty(x, "a"); // 성공 getProperty(x, "m"); // 오류: 인수의 타입 'm' 은 'a' | 'b' | 'c' | 'd'에 해당되지 않음. 2. 제너릭 자체에 리터럴 객체 타입 할당하기 // ..

1. Object index signature 1-1. Object index signature 다음과 같이 type을 한꺼번에 지정할 수 있는 방법을 index signature 라고 합니다. interface StringOnly { [key: string]: string } let user : StringOnly ={ name: 'kim', age: '20', location: 'seoul' } 그런데 만약 age는 number 타입이어야 한다면 어떻게 해야 할까요? 다음과 같이 해주면 됩니다. interface StringOnly { [key: string]: string|number; age: number } let user : StringOnly ={ name: 'kim', age: 20, lo..

1. class 키워드 1-1. public, private, protected, static 사용 용도 1. public 키워드 public 키워드는 사실 class 의 필드값 왼쪽에 보이지 않지만 자동으로 부여되는 속성입니다. class User { public name = 'kim'; constructor(a){ this.name = a } public 함수(){ // do something } } const variable1 = new User('park') console.log(variable1.name) variable1.name = 'john' console.log(variable1.name) 위 코드를 tsc -w 명령어로 일반 .js 파일로 변환시키면 다음과 같이 변환되는 것을 볼 수 있..

1. Overloading 일반적으로 함수에 대한 call signiture를 적는 방법은 다음과 같습니다. *call signiture: 우리가 타입스크립트에게 이 함수가 어떻게 호출되는지 설명해주는 부분 type Add = (a:number, b:number) => number 그런데 call signiture를 아래처럼 좀 더 길게 적는 방법이 있습니다. 이렇게 적어주는 방식이 있는 이유는 바로 오버로딩이라는 개념 때문인데요. type Add = { // 여러 개의 call signiture가 있다. (a:number, b:number):number (a:number, b:string):number } 오버로딩이란? 오버로딩은 함수가 서로 다른 여러 개의 call signiture를 가지고 있을 때..