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(..
타입스크립트 4.8 업데이트에 추가된 타입 {} Object (대문자로 시작) -> 이 두가지 타입은 모든 타입을 가리키며 모든 값을 받을 수 있다. (null과 undefined는 제외) unknown도 any와 마찬가지로 모든 값을 받을 수 있는데 unknown이 4.8버전부터 {} | null | undefined 와 같이 성립되기 때문에 조건문에 들어갔을 때 아래와 같이 된다. const z: unknown = "hi"; //모든 타입이 들어가기 때문에 hi도 들어갈 수 있다. if (z) { z; //z의 타입이 {}이다. 파라미터로 들어온 z 는 unknown인데 true일때는 {}인 것 } else { z; //unknown } 실제로 객체 타입은 object가 있는데 string의 원시값을..
//타입 좁히기(타입 가드) { function numOnStr(a: number | string) { // if (typeof a === "string") { // a.split(","); // } else { // a.toFixed(1); // } a.toFixed(1); // number면 쓸 수 있지만 string일수도 있기 때문에 Error } numOnStr("123"); numOnStr(1); } -> 매개변수 타입이 number라면 toFixed 메서드를 사용할 수 있지만 string일수도 있기 때문에 내부에서 바로 쓰게되면 빨간 줄로 에러가 뜬다. TS에러 메세지가 여러 줄이 뜰 때에는 결국에는 마지막 줄을 보면 된다. 마지막 줄에 원인이나 해결방법이 나와있다. 위에 a.toFixed를 ..
CHAPTER 1 this에 대한 오해들 function identify() { return this.name.toUpperCase(); } function speak() { let greeting = 'hello, I am' + identify.call(this); console.log(greeting); } let me = { name: 'alex', }; let you = { name: 'rachel', }; identify.call(me); identify.call(you); //me & you 의 이름 대문자변환 speak.call(me); //hello, I amALEX speak.call(you); //hello, I amRACHEL -> indentify()와 speak() 두 함수는 객체..
- Total
- Today
- Yesterday
- fs모듈 넥스트
- D 플래그
- getServerSideProps
- 항해99프론트
- 항해99추천비추천
- 부트캠프항해
- aspect-ratio
- && 셸 명령어
- float 레이아웃
- ~ ^
- 프리온보딩 프론트엔드 챌린지 3월
- 프리렌더링확인법
- 타입스크립트 장점
- nvm 설치순서
- 원티드 프리온보딩 FE 챌린지
- grid flex
- getStaticPaths
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 원티드 3월 프론트엔드 챌린지
- 항해99프론트후기
- tilde caret
- text input pattern
- 틸드와 캐럿
- 형제 요소 선택자
- 타입스크립트 DT
- is()
- nvm경로 오류
- Prittier
- reactAPI
- 원티드 FE 프리온보딩 챌린지
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |