36,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
타입스크립트 교과서 p122 forEach 메서드 질문
[1, 2, 3].forEach((item, index, array) => { console.log(item, index, array); }); [1, 2, 3].forEach((item, index) => {}); [1, 2, 3].forEach((item) => item); 책에 forEach 메서드의 콜백 함수는 callbackfn 타입입니다.콜백 함수의 매개변수에 타입을 표기할 필요가 없고, 매개변수도 전부 옵셔널입니다.라고 쓰여있습니다. 질문)forEach 메서드의 매개변수가 옵셔널이라는 것을 어떻게 아는거죠?옵셔널이라면 thisArg?: 이런식으로forEach(callbackfn: value?:number, index ?:number ...) 이런식으로 쓰여있어야 하는거 아닌가요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
타입스크립트 교과서 p116 , 코드에러남
class Person { name: string; age: number; married: boolean; } constructor(name: string, age: number, married: boolean){ this.name = name; this.age = age; this.married = married; } sayName(){ console.log(this.name); } const zero = new Person('zero', 28, false)p 116 쪽 클래스를 사용한 코드 그대로 적었는데, 이거 예시여서 에러나는 코드 그냥 넣으신 건가요??2.20 절에서 다시 배운다고 써있는데, 그때 다시 보면 될까요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
타입스크립트 교과서 p112 , 코드가 안읽힙니다..
// 1번 코드 function test<T>(a: T) { type R<T> = T extends string ? T : T; const b: R<T> = a; // Type 'T' is not assignable to type 'R<T>'. }[책 내용중...]여기서 문제는 R<T> 타입이 T가 될거라고 생각하는 것타입스크립트는 제네릭이 들어 있는 컨디셔널 타입을 판단할 때 값의 판단을 뒤로 미룬다.즉, 변수 b에 매개변수 a를 대입할 때까지도 타입스크립트는 R<T>가 T라는 것을 알지 못한다.그래서 T를 R<T>에 대입할 수 없다는 에러가 발생하는 것이다.따라서 이떄도 타입스크립트가 판단을 뒤로 미루지 못하도록 배열로 제네릭을 감싸면 된다//2번 코드 function test<T extends [T] extends [string] ? string : never>(a: T) { type R<T> = [T] extends [string] ? T : T; const b: R<T> = a; }질문)1번 코드의 경우, 판단을 미뤄서 에러가 발생한다는 것은 이해가 되었습니다.그래서 해결책으로 나온게 2번 코드인데,2번 처럼 작성하면 함수 몸체 {} 의 코드가 순서대로 실행된다는거고,1번 코드의 경우는 type R<T> = T extends string ? T:T;이 부분은 마지막에 실행되고 const b: R<T> =a; 이게 먼저 실행된다는걸까요??
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
타입스크립트 교과서 p83
type J = {} & string; // type J = {} & string책에 {} 와 string의 교집합이 string 이라고 나와있는데, 다음과 같이 {} & string 이렇게 나오는데 tsconfig에서 설정을 건드려야 할까요?? 혹시몰라 playground 에서 해도 이렇게 나오네요
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
타입스크립트교과서 p39 쪽 코드가 이해가 안되요
const func: (amount: number, unit: string) => string = (amount, unit) => amount + unit; gpt 이용해서 물어봐도 잘 이해가 안되서 질문남겨요! 이해가 안되는 부분은string = (amount, unit) 이 부분인데, 책 p40을 보면함수 리터럴 타입에서는 반환값의 표기법이 다르다는 점을 기억하세요. 콜론, 대신 => 를 사용한다고 써있네요 질문을 쓰다보니 이해가 되는것 같은데,func 함수는number 타입인 amount와 string 타입인 unit 을 받아서 string 타입을 반환한다이게 맞을것 같은데, 혹시 맞을까요?..
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
class 에서 ts의 private vs js의 private field( # )
안녕하세요 ts 강의랑 책 모두 보고 있는중인데요.강의에서는(클래스의 새로운기능들 4분 10초쯤) protected와 구분하기 쉬운 이유로 ts의 private 를 추천하시는데 책에서는 (ebook 기준 294쪽 쯤) js의 private field( # ) 를 추천하셔서요. 어떤것이 맞는건지 질문드립니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
ts -> js 로 변환할 때 타입선언을 남겨두는걸 추천하는 이유
섹션1의 enum, keyof, typeof 강의에서enum 은 js로 바꾸면 사라지고 객체 as const 방식은 사라지지 않는데이걸 사라지게 할지 남겨둘지 모르겠다면 남기는걸 추천한다 하신 부분이요.왜 그걸 추천하시는건지 궁금합니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
기초가 부족할때 어떤 연습을 좀더 하면 좋을까요?
안녕하세요 예전에 타입스크립트 강의를 듣다 실제로 사용을 하나도 안해서 까먹은 상태인데요.그때도 그렇고 지금도 그렇고 타입분석 들어가는 강의부터는 도저히 스스로 분석이 안되고 설명해주시는것만 끄덕거리면서 이해하고 넘어가기만 하고 있습니다.사실 이 상태로 다음 강의로 넘어가면 안될거 같은 불안감이 있어서요.이전에 찍으셨던 타입스크립트 리액트 적용강좌를 듣고 토이프로젝트를 해볼지강의를 다시 들으면서 복기를 할지 어떤식으로 연습을 하면 좋을까요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
OmitThisParameter 두번째 조건부 질문입니다!
안녕하세요! 완전 복잡한 타입 분석하기(bind 편) 5:25을 보다가 궁금한 점이 생겨서 질문드립니다. 아래는 OmitThisParameter인데요type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T두번째 조건부 타입에서 ...args 에 왜 this는 포함되지 않는건가요?T extends (...args: infer A) => infer R ? (...args: A) => R : T제 개인적인 생각은 'T가 첫번째 조건부 타입에서 this 매개변수가 있다는 것이 확인 되었으니까, T는 (this, ...args) => any 이렇게 생겼을 것이다 라고 컴파일러가 추론(?)해서 바로 ...args만 추출하는건가??' 인데 제 생각이 맞는 건지 아니면 다른 이유인지 궁금해서 질문 드립니다!
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
제네릭에 never가 들어올 때 분배법칙
분배법칙의 작동방법 이해가 어려워 타입스크립트 교과서를 보던 중 모르는 부분이 생겨서 질문드립니다!해당 내용은 타입스크립트 교과서 p.111에 있는 내용인데요type R<T> = T extends string ? true : false; type RR = R<never>; 이 코드의 설명 부분이 아래와 같이 되어 있습니다.RR 타입이 true가 아니라 never인 이유는 T가 never가 되면서 분배법칙이 일어났기 때문이다.never는 공집합과 같으므로 공집합에서 분배법칙을 실행하는 것은 아무것도 실행하지 않는 것과 같다.따라서 결과는 never다.설명이 잘 이해가 되지 않아 질문 드립니다!분배법칙이 일어났다는 것은 never가 never|never로 유니언으로 분리되서 각각 타입검사를 하게 되는건가요?그렇다면 never extends string ? true : false 가 되어서 분배 되어 각각 타입검사를 해서 true | true 가 되고 최종적으로 true 가 되어야하지 않나요?공집합에서 분배법칙을 실행하는 것은 아무것도 실행하지 않는 것이라는 말이 무슨 말인지 잘 모르겠습니다..
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
forEach 콜백함수 리턴값 타입이 void인 이유?
declare function forEach(arr: number[], callback: (el: number) => undefined): void; let target: number[] = []; forEach([1, 2, 3], el => { target.push(el) }); // 에러 void 형식은 undefined 형식에 할당할 수 없다. forEach([1, 2, 3], el => target.push(el)); // 에러 number 형식은 undefined 형식에 할당할 수 없다첫번째 forEach의 콜백함수 리턴값 타입이 왜 void인걸까요? return undefined가 생략되어 있으니, undefine라고 추론하지 않고 타입스크립트가 void라고 추론한 이유가 궁금합니다.. 챗 지피티에 물어보니 forEach 함수의 특성에 기인한다고 되있는데, 이게 맞는 정보인지 잘 모르겠습니다..
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
9:11에서 저는 왜 에러가 안날까요?
declare function forEach( arr: number[], callback: (el: number) => undefined ): void; let target: number[] = []; forEach([1, 2, 3], (el) => { target.push(el); }); forEach([1, 2, 3], (el) => target.push(el));두번째 forEach에서는 제로초님과 같은 에러('number' 형식은 'undefined' 형식에 할당할 수 없습니다.)가 나는데 첫번째 forEach는 에러 ('void' 형식은 'undefined' 형식에 할당할 수 없습니다.)가 안납니다. 설정의 차이일까요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
11:48초 부분 질문입니다.
interface A { talk: () => void; } const a: A = { talk() { return 3; } // 타입스크립트는 메서드의 void니까 리턴값 3을 무시해버린다. } const b = a.talk(); // b의 타입이 void가 된다. console.log(b) // 3플레이 그라운드에서 돌려보니 b의 타입만 void 로 추론하고b의 값은 3으로 찍히던데 리턴값을 아예 무시하는건 아닌가요? 타입스크립트 내부에서만 타입추론할때 무시한다는 뜻이겠죠?!
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
[#readonly, #ThisType] 책, 타입스크립트 교과서 문의사항 있습니다
안녕하세요,타입스크립트 교과서를 읽으면 2가지 질문사항이 있습니다.1. " readonly 수식어가 붙은 배열이 더 넓은 타입이다 "2. 3.4 thisType강의와 더불어 책으로도 출퇴근하며 읽는데, 좋은 책 써주셔서 감사드립니다!1. " readonly 수식어가 붙은 배열이 더 넓은 타입이다 "' 2.13 객체 간에 대입할 수 있는 지 확인하는 법을 배우자' 챕터 중" readonly 수식어가 붙은 배열이 더 넓은 타입이다 "let a: readonly string[] = ['hi','readonly'] let b: string[] = ['hi','normal']"어떤 원리로 인해 수식어 'readonly'가 타입의 범위를 더 넓게 만들 수 있는걸까요?"제 생각에서는, readonly일 경우는 읽기전용이라 기능이 '좁고' readonly가 없는 경우는 기능이 많아 '넓고' 라는 생각에서 벗어나질 못하고 있어서요!이펙티브 타입스크립트에서 이와 관련해서 readonly 수식어가 붙은 것을 더 넒은 타입으로 설명하고 있습니다.(readonly 수식어가 넓은타입으로 만들어준다는 내용이 있는것은 아니지만 비슷한 내용이라 추가해봤습니다.)number[ ]는 readonly number[ ]보다 기능이 많기 때문에, readonly number[ ]의 서브타입이다 (이펙티브 타입스크립트, p95)기능이 많고 적음에 따라서, 타입간 포함관계/호환성(타입을 집합으로 이해하고 있습니다)기준은 아니라고 생각하는데요, number[ ]가 readonly number[ ]보다 기능을 더 많이? 갖고 있는걸, readonly number[ ]의 기능(내용)을 extends했기 때문에, number[ ]가 서브타입, readonly number[ ]가 슈퍼타입으로 설명하려는거 아닐까 그렇게 판단했습니다.즉, readonly 수식어가 붙은 경우, 더 넓은 타입, 슈퍼타입이 되는 것과 같은 맥락을 하는데요,슈퍼타입은 서브타입에 비해 일반적이고, 포괄적인 의미라고 이해하고 있는데, 어떻게 제한적인 뉘앙스에readonly 수식어가 타입을 넓혀주는, 즉 타입을 넓게 해주는 역할을 하는건지, 설명이 궁금합니다:] 3.4 ThisTypetype Obj = { data:Data, methods:Methods & ThisType<Data & Methods> }객체 Obj의 타입을 위와 같이 정의하는 코드 중에, 아래 부분 질문 드립니다.methods:Methods & ThisType<Data & Methods> Data는 data객체를 , Methods는 method 객체를 타입 정의한 것,this 객체 타입을 정의하기 위해, 객체 안에 있는 두개의 객체(data객체, methods객체)를 모두 담는 새로운 타입을 정의하기 위해, & 연산자를 사용했다고 이해했습니다.마지막으로 중복된 코드를 사용하지 않기 위해, ThisType이란 유틸리티 타입을 사용한것이라고 이해했습니다.그런데, 다시 Methods를 & 연산자로 다시 병합한 이유가 궁금합니다아래와 같이 그냥 ThisType<Data & Methods> 하지 않고, Methods와 & 연산자로 다시 교집합 하는 의미는 무엇일까요methods:Methods & ThisType<Data & Methods> 이미 ThisType이란 유틸리티 타입으로 타입 Data와 Methods를 정의했는데,다시 Methods를 &연산자와 사용하는걸까요?
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
enum 도 타입인가요?
enum 과 readonly도 타입으로 봐야 하는 것인 가요 아니면 객체나 const 같은 것으로 봐야하는 것인가요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
공변성과 반공변성
제가 공변성과 반공변성을 공부하는데 너무 큰 어려움이 있었어서, 원리가 너무 궁금해서 나름대로 결론을 내려보았습니다.저는 개인적으로 함수의 동작 과정인,input - process - output 의 방향대로,타입을 만족하기 위하여 이런 순서로 검사하는게 아닐까... 생각해보았습니다. function a(x: string | number): number { return 0;}type B = (x: string) => number | string;let b: B = a;강의 속 코드를 가져와봤습니다. 제가 하고 싶은 말의 요지는,다음 순서를 만족하기 위해서 타입의 크기 비교가 달라진다는 것이지요.1) b의 매개변수 타입을 검사2) a의 매개변수 타입을 검사3) a의 리턴 타입을 검사4) b의 리턴 타입을 검사 검증해보기 위해서,b("1") 이라는 코드를 입력하면, b("1") 실행 :먼저 b의 타입인 B의 매개변수가 검사되어,(x: string) 를 만족하는지 확인 (b = a이므로)b("1")에 의해 a("1")가 실행 :따라서 a의 매개변수 타입이 검사되어,(x: string | number) 를 만족하는지 확인. a("1")의 결과인 0 :a의 리턴 타입을 검사하여,number를 반환하는 지 확인. b("1")의 결과인, a("1")의 결과인 0 :b의 리턴 타입을 검사하여,number | string을 반환하는 지 확인. 타입스크립트가 실제로 이런 식으로 추론하는지는 알지 못하지만, 흥미로운 생각인 것 같아서 나누어보았습니다.개인적인 의견이고,옳지 않은 내용이 있다면 삭제하겠습니다!
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
ReadonlyArray<T>에서 T가 어떤 타입인지 찾으실때 질문있습니다.
ReadonlyArray<T>에서 T가 어떤 타입인지 찾으실때 질문있습니다.ReadonlyArray의 타입을 살펴볼려고하면 이렇게 여러가지 타입이 있습니다. 어디로 들어가서 확인해야하는지를 알 수 있는 방법이 있을까요? ReadonlyArray 이외에도 es5에 있던 타입들이 오버로드되서 esNext에도 있는 것들을 보면 어느 파일으 것을 확인해야 할지를 잘 모르겠습니다. 하나씩 다 보면서 찾는게 맞는건가요??
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
Promise에서 then타입 질문 있습니다.
Promise에서 then 메서드 타입을 분석할때가 잘 이해되지 않아서 질문 남깁니다. p1을 아래와 같이 만들면 const p1 = Promise.resolve(1) // Promise<number> .then((a) => a + 1) // Promise<number> .then((a) => a.toString()); // Promise<string>마지막.then((a) => a.toString()); 에서 T가 number가 되는것은 이해했지만 then의 타입을 보면 interface Promise<T> { then<TResult1 = T, TResult2 = never>( onfulfilled?: | ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: | ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null ): Promise<TResult1 | TResult2>; }TResult1 = T 부분이 이해가 안됩니다. T가 number 타입이니 TResult도 number 타입이 되야하는것처럼 보입니다. TResult가 T와 같은 타입이라면 then을 사용할 때 value와 return 타입이 항상 같이야 한다는 것이므로 잘못해석한 것인줄은 알지만 TResult1 = T 를 어떻게 해석해야 할지 잘 모르겠습니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
Omit 타입에서 K extends keyof any에 대해서 질문있습니다.
Omit에서 K extends keyof any로 키값만 들어올 수 있도록 제한을 주었는데 이전 강의때 말씀해주셨던 타입은 정확할수록 좋다는 말씀이 생각나서 질문드립니다. 키 값중에서도 T의 키값이 들어와야 더 정확하다고 생각해서 K extends keyof T 가 더 올바르다고 생각하는데 any로 쓴 이유가 있을까요??type E<T, U> = T extends U ? never : T; type P<T, K extends keyof T> = { [P in K]: T[P]; }; type O<T, K extends keyof T> = P<T, E<keyof T, K>>;
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
reduce 타입을 만들다가 질문이 생겼습니다.
reduce 타입을 만들면서 initialValue는 옵션값이기때문에 값을 ?: 를 이용해서 만들었습니다. 그래서 있을때 없을때 모두 제대로 타입추론을 하는 것을 확인하였습니다.interface Arr<T> { reduce(callBackFn: (a: T, b: T) => T, init?: T): T; reduce<S>(callBackFn: (a: S, b: T) => S, init?: S): S; } const a: Arr<number> = [1, 2, 4, 5, 3]; const myReduce1 = a.reduce((a, b) => (a += b)); // 15 const myReduce2 = a.reduce((a, b) => (a += b), 10); // 25 const b: Arr<number | string> = [1, 2, "4", "5", 3]; const myReduce3 = b.reduce<number>((a, b) => { return typeof b === "number" ? (a += b) : a; }); // 6 const myReduce4 = b.reduce<number>((a, b) => { return typeof b === "number" ? (a += b) : a; }, 10); // 16 빌트인 reduce로 검사를 해보았는데 빌트인 reduce에서는 accumulator의 타입이 다른 경우 reduce 오버로딩되면서 init이 꼭 있어야 하는 타입으로 이해 했습니다. // 정답 // reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: readonly T[]) => T): T; // reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: readonly T[]) => T, initialValue: T): T; // reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: readonly T[]) => U, initialValue: U): U; const c = [1, 2, "4", "5", 3]; const solReduce1 = c.reduce<number>((a, b, idx, arr) => { return typeof b === "number" ? (a += b) : a; }, 10); // 16 // error const solReduce2 = c.reduce<number>((a, b, idx, arr) => { return typeof b === "number" ? (a += b) : a; }); // 6 하지만 JS에서는 accumulator타입이 달라도 초기값없이 정상 작동하는 반면 TS에서는 초기값을 꼭 있어야 하는것인지 제가 잘못 이해하고 있는것인지 궁금해서 질문 남깁니다. error msg : TS2554: Expected 2 arguments, but got 1. lib.es5.d.ts(1480, 103): An argument for 'initialValue' was not provided. 질문 정리제가 작성한 reduce 타입이 올바르게 작성된 것인지TS에서는 빌트인 reduce를 사용할 떄 accumulator타입이 다를경우 init 값 없이 사용할 수 있는지입니다.감사합니다.