공부 기록일지📚

Typescript에서 useRef를 사용할 때에는 용도에 따라서 타입지정이 달라지게 되는데 크게 두 가지로 나눌 수 있다. 1. 값 저장 용도 (current 객체 자체를 수정하기 위함) : useRef를 로컬 변수 용도로 사용하는 경우이다. 제네릭: 값의 타입을 넣어준다. 초기값: 타입에 맞는 초기값을 할당해준다. const count = useRef(0); const text = useRef("") 2. DOM 취득 용도 제네릭: 참조하는 HTML 엘리먼트를 넣어준다. 초기값: null을 넣어준다. // DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정 const buttonRef = useRef(null); // DOM input 참조 : 제네릭으..

TS + CRA 로 작업하면서 styled-component 를 쓰게됐다. CSS-in-JS 이기 때문에 props를 활용하기 좋다(조건부 스타일링). 하지만 하나의 컴포넌트에 props를 내려주는 식으로 진행하기 때문에 TS에서는 해당 props에 대한 정의가 필요하다. *CSS-in-JS는 스타일 정의를 CSS파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 초기 세팅 yarn add styled-components @types/styled-components styled-normalize 📌 styled-normalize: 브라우저마다 다르게 보이는 css를 초기화 코드 분리 styled-components 를 사용할 때 테마/전역스타일 코드 분리 styled-components의 타..

타입스크립트를 사용할 때 가장 큰 혜택 두 가지를 뽑는다면 자동완성 문서화 기능 이라고 할 수 있습니다. 타입을 잘 사용하면 직접 모든 코드를 작성하지 않고 IDE(우리의 경우엔 vscode)가 추론해준 선택지들 사이에서 고르는 방식으로 코드 개발이 가능합니다. 물론 타입스크립트를 제대로 작성했을 때, TS가 잘 추론할 수 있겠죠. 1️⃣자동완성 IDE뒷단에서 돌고 있는 LSP(Language Server Protocol)에 의해 개발자가 작성된 코드의 타입이 실시간으로 체크됩니다. 그래서 가끔 타입 추론이 제대로 되지 않을 때는 TS Server를 재시작해주면 됩니다. (종종 타입 체킹이 안될 때가 있는데.. 새로고침을 하면 됩니다. 아예 모를 때는 vscode를 껐다가 켰네요. ) 타입스크립트 파일을..

TS에서 프로미스는 Promise 타입으로 표시합니다. const p1 = Promise.resolve(1) //Promise .then((a) => a + 1) //Promise .then((a) => a + 1) //Promise .then((a) => a.toString()); // Promise //then을 전부 다 실행시킨 최종 결괏값을 p1에 리턴한다. const p2 = Promise.resolve(2); // Promise const p3 = new Promise((res, rej) => { setTimeout(res, 1000); }); Promise.all([p1, p2, p3]).then((result) => console.log(result)); //결과: ['3',2,undefi..

Required 분석 { interface Profile { name?: string; age?: number; married?: boolean; } type Name = Profile["name"]; type R = { //-? 의미: 옵셔널(?)을 빼라 라는 의미("-"의 명칭은 modifier ?) //T라는 인터페이스의 프로퍼티의 key를 가져올 때 optional은 빼고 가져오라는 의미 [key in keyof T]-?: T[key]; }; //type Required = { [P in keyof T]-?: T[P]; } // P = key // Readonly //type Readonly = { readonly [P in keyof T]: T[P]; }; //만약에 남의 타입을 가져올 때 re..

Partial interface Profile { name: string; age: number; married: boolean; } const cong: Profile = { name: "cong", age: 27, married: false, }; //Partial의 기능: 프로퍼티들을 전부 "?" 옵셔널로 만들어 준다.(필수값이었던 것들을) const noMarriedCong: Partial = { name: "cong", age: 28, }; Partial 을 직접 구현해보기 //Partial을 직접 구현해보기 //맵드 타입스랑 인덱스드 시그니처 사용 type Name = "Human" | "Animal"; //keyof 뒤에는 interface가 올 수 있다. (type alias도 가능, js..

오버로딩 타입을 하나로만 정의하는 것이 베스트긴하지만 다 정의하지 못할 때 사용한다.(제네릭으로 깔끔하게 못만들겠다 싶을때 쓰면 좋을듯) 오버로딩을 했으면 실제 구현부에서는 any를 사용해도 된다. (아래 추가설명) 함수도 앞에 declare키워드를 붙이고 오버로딩이 가능하다. (declare키워드가 붙은 함수는 TS를 속여 body부분을 작성해주지 않고 선언부만 적어도 된다.) -> 여기서 실제 사용할 때의 구현부 타입은 any로 지정해줘도 된다(오버로딩된 타입들이 제대로 작성되어 있다면). // declare를 함수 앞에 붙이면 선언만하고 구현부(body부분)는 쓰지 않아도 TS가 인식하기로는 구현부는 다른 곳에 있구나 //라고 속일 수 있다. declare function add(x: number,..

제네릭 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다. 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. TS에서 제네릭은 클래스, 인터페이스, 함수에서 쓸 수 있음(제네릭 함수, 제네릭 인터페이스, 제네릭 클래스) 제네릭은 타입에 대한 함수라고 생각하면 된다는 ..제로초님 (선생님의 머리를 갖고싶어요) function add(x: T, y: T): T { return x + y } add(1, 2); add(1, 2); add('1', '2'); add('1', '2'); add(1, '2'); 제네릭 선언 위치 기억하기 function a() {} class B(..