[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편대시보드

 const func: (amount: number, unit: string) => string = (amount, unit) => amount + unit; gpt 이용해서 물어봐도 잘 이해가 안되서 질문남겨요! 이해가 안되는 부분은string = (amount, unit) 이 부분인데, 책 p40을 보면함수 리터럴 타입에서는 반환값의 표기법이 다르다는 점을 기억하세요. 콜론, 대신 => 를 사용한다고 써있네요 질문을 쓰다보니 이해가 되는것 같은데,func 함수는number 타입인 amount와 string 타입인 unit 을 받아서 string 타입을 반환한다이게 맞을것 같은데, 혹시 맞을까요?..

안녕하세요 ts 강의랑 책 모두 보고 있는중인데요.강의에서는(클래스의 새로운기능들 4분 10초쯤) protected와 구분하기 쉬운 이유로 ts의 private 를 추천하시는데 책에서는 (ebook 기준 294쪽 쯤) js의 private field( # ) 를 추천하셔서요. 어떤것이 맞는건지 질문드립니다.

섹션1의 enum, keyof, typeof 강의에서enum 은 js로 바꾸면 사라지고 객체 as const 방식은 사라지지 않는데이걸 사라지게 할지 남겨둘지 모르겠다면 남기는걸 추천한다 하신 부분이요.왜 그걸 추천하시는건지 궁금합니다.

안녕하세요 예전에 타입스크립트 강의를 듣다 실제로 사용을 하나도 안해서 까먹은 상태인데요.그때도 그렇고 지금도 그렇고 타입분석 들어가는 강의부터는 도저히 스스로 분석이 안되고 설명해주시는것만 끄덕거리면서 이해하고 넘어가기만 하고 있습니다.사실 이 상태로 다음 강의로 넘어가면 안될거 같은 불안감이 있어서요.이전에 찍으셨던 타입스크립트 리액트 적용강좌를 듣고 토이프로젝트를 해볼지강의를 다시 들으면서 복기를 할지 어떤식으로 연습을 하면 좋을까요?  

안녕하세요! 완전 복잡한 타입 분석하기(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만 추출하는건가??' 인데 제 생각이 맞는 건지 아니면 다른 이유인지 궁금해서 질문 드립니다!

분배법칙의 작동방법 이해가 어려워 타입스크립트 교과서를 보던 중 모르는 부분이 생겨서 질문드립니다!해당 내용은 타입스크립트 교과서 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 가 되어야하지 않나요?공집합에서 분배법칙을 실행하는 것은 아무것도 실행하지 않는 것이라는 말이 무슨 말인지 잘 모르겠습니다..

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 함수의 특성에 기인한다고 되있는데, 이게 맞는 정보인지 잘 모르겠습니다..

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' 형식에 할당할 수 없습니다.)가 안납니다. 설정의 차이일까요?

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으로 찍히던데 리턴값을 아예 무시하는건 아닌가요? 타입스크립트 내부에서만 타입추론할때 무시한다는 뜻이겠죠?!

안녕하세요,타입스크립트 교과서를 읽으면 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를 &연산자와 사용하는걸까요?  

enum 과 readonly도 타입으로 봐야 하는 것인 가요 아니면 객체나 const 같은 것으로 봐야하는 것인가요?

제가 공변성과 반공변성을 공부하는데 너무 큰 어려움이 있었어서, 원리가 너무 궁금해서 나름대로 결론을 내려보았습니다.저는 개인적으로 함수의 동작 과정인,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을 반환하는 지 확인. 타입스크립트가 실제로 이런 식으로 추론하는지는 알지 못하지만, 흥미로운 생각인 것 같아서 나누어보았습니다.개인적인 의견이고,옳지 않은 내용이 있다면 삭제하겠습니다!

ReadonlyArray<T>에서 T가 어떤 타입인지 찾으실때 질문있습니다.ReadonlyArray의 타입을 살펴볼려고하면 이렇게 여러가지 타입이 있습니다. 어디로 들어가서 확인해야하는지를 알 수 있는 방법이 있을까요?  ReadonlyArray 이외에도 es5에 있던 타입들이 오버로드되서 esNext에도 있는 것들을 보면 어느 파일으 것을 확인해야 할지를 잘 모르겠습니다. 하나씩 다 보면서 찾는게 맞는건가요??

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 를 어떻게 해석해야 할지 잘 모르겠습니다.  

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>>;

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 값 없이 사용할 수 있는지입니다.감사합니다.

type A = { name: string }; type B = { age: number }; type AB = A | B; type C = A & B; const ab: AB = { name: 'zerocho' }; const obj = { name: 'zerocho', age: 29, married: false }; const c: C = obj;여기서 c 변수 부분에객체를 직접 넣었을때는 속성 검사를 해서 type error 가 나지만, 변수에 할당해주고 그걸 적용시키면 type error 가 나지 않는다 라고 설명해주셨는데 const c: C = { name: 'zerocho', age: 29, married: false };이렇게 직접 할당하는것과 어떠한 차이점이 있어서 저렇게 적용 되는지 잘 이해가 안갑니다 검사 하는 방식이 어떻게 다른건지 설명해주시면 감사하겠습니다! obj 이라는 변수에 할당 했을 때 A & B 면 속성이 name, age 이외의 것들이 들어가면 error가 발생할 줄 알았는데 type 으로 선언하지 않은 married가 error없이 들어갔습니다. &, | 같은경우 저 조건을 충족 하기만하면 이후에 추가적인 속성이 들어가도 기본적으로 type error 없이 받아들이는건지 궁금합니다

질문은 아니지만 다른 분들도 쉽게 보시고 이해하실 수 있도록 해당 수업의 질문으로 남기도록 하겠습니다.설명에 앞서 그냥 강사님께서 하신 말씀처럼 외우는게 제일 나을수도 있습니다. 그냥 저처럼 이해하지 못하면 못 넘어가는 사람들을 위해 남깁니다.공변성과 반공변성에 대하여 매개변수와 리턴타입의 대입가능성에 대해 설명하고자 합니다. 강의에서 사용된 예제를 사용하겠습니다.function a(x: string | number): number{ return 0; } type B = (x: string) => number | string; let b: B = a; b("asdf") // B타입에 맞음 정상 b(123) //B타입에 맞지 않는 매개변수 이므로 //typescript가 오류를 잡아줄 수 있음먼저 매개변수에 대한 이야기입니다. 변수 b의 B 타입으로 정의되었습니다. 즉, 매개변수로는 x: string만 오도록 강제할 것입니다. 이는 b("asdf")로 사용했을 때 a("asdf")를 사용한 것과 같은 상황이니 문제가 없습니다. 하지만 반대면 어떨까요?function a(x: string): number{ return 0; } type B = (x: string | number) => number | string; let b: B = a; b("asdf") // 타입 B에 대해서도 정상 //a함수가 실행될때도 정상 b(123); // B타입상으로만 보면 정상임 //그러나 실제로 a함수가 실행될 때 오류 //따라서 이런 상황이 발생하지 않도록 //타입스크립트는 타입B에 함수 a를 할당할 수 없도록 함만약 이 상황이라면 변수 b는 B타입이기 때문에 매개변수로 number도 사용하능 합니다. 즉 타입상으로는 b(123)이 가능하다는 것이죠, 하지만 이 경우 a(123)이 실행되는 것과 같은데 a의 매개변수로는 string만 가능하기 때문에 문제가 발생합니다.정리하자면 실제로 대입된 함수의 매개변수가 허용하지 않는 타입을 넣으면 안 되기 때문에, (대입되는 함수의 매개변수)는 (타입의 매개변수)와 같거나 더 넓어야합니다.리턴값도 비슷한 원리입니다.function a(x: string | number): number{ return 0; } type B = (x: string) => number | string; let b: B = a; let result = b("asdf"); //result의 타입은 B타입에 의해 number|string 으로 추론됨 //실행결과 실제 타입은 number로 추론과 일치타입스크립트 입장에서 b("asdf")의 예상 결과는 number | string 이겠죠. b는 타입 B 니까요. 그리고 실제로 b("asdf")는 실제로 a("asdf")를 실행하는 것과 같으니 실제로는 number가 리턴됩니다. 타입스크립트는 number | string를 예상하고 있고, 거기에 number가 온 것이니 문제가 없습니다.반대 상황을 봅시다.function a(x: string | number): number | string { return 0; } type B = (x: string) => number; let b: B = a; let result = b("asdf"); //타입 B만 보고 추론하면 result는 number임 //근데 실제 실행결과로 result는 string이 될 수도 있음타입스크립트는 b("asdf")의 결과로 number 만을 기대할 것입니다. 근데 실제로 a("asdf")는 number | string 이에요. 그러면 원래는 b의 실행결과로는 number만 예상하고 있었는데 실제 결과로 number | string 이면 문제가 있겠죠?정리하자면 실제로 대입된 함수가 리턴한 값이 타입의 리턴값에 포함되지 않으면 안 되기 때문에, (대입되는 함수의 리턴값)는 (타입의 리턴값)와 같거나 더 좁아야합니다.위 모든 원칙은, 타입스크립트가 실제로 대입된 함수의 타입은 신경쓰지 않고, 현재 정의된 타입이 뭔지만 신경쓰기 위해서 존재한다고 생각하시면 이해가 편하실수도 있을 것 같네요... 타입스크립트의 타입검사기 입장에서 let b: B = a;이후에 b를 쓸 때, a에 대해서 신경1도 안쓰고 B에 대해서만 타입 검사를 해주려고 처음 대입할때 매개변수의 범위와 리턴값의 범위를 저렇게 제한했다고 보시면 된다는 뜻입니다.

추상 클래스에서 private으로 선언한 것은 추상클래스를 상속받아 구현하는 실제 클래스에서도 접근이 안되고 protected로 바꾸라고 하던데어짜피 구현은 추상클래스를 상속받은 구현클래스에서 해야하는데 접근 할 수 없다면 추상클래스에서 private가 어떤 역할을 하는건지 모르겠습니다.// 추상 클래스 abstract class AbstractClass { private readonly a: string = "init"; protected b: number = 1; c: string = "기본값이 public"; abstract method(a: string): void; method2() { console.log(this.a); console.log(this.b); console.log(this.c); } } class realClass extends AbstractClass { method(a: string) { console.log(this.a); //error console.log(this.b); console.log(this.c); } }  type error msg : TS2341: Property 'a' is private and only accessible within class 'AbstractClass'.

impolements러 interface를 받아 class를 만들때 private이 안되는 오류를 보여주셨는데요interface를 사용하지 않고 그냥 class안에서 type을 지정하는 방법, abstract class를 이용하는 방법 모두 이해됬습니다. 하지만 interface를 사용하면 private, protected 사용이 불가한 것인지 잘 모르겠어서 질문을 올립니다.   구글링해본결과 class내에 속성으로 만들고 getter, setter를 이용하는 것으로 우회하는 방법을 사용하더라구요.(https://stackoverflow.com/questions/37791947/how-to-define-a-private-property-when-implementing-an-interface-in-typescript) 이렇게 했을 때 private의 기능인 class 밖에서는 호출 할 수 없다고 위반되는 결과가 나옵니다.  어떤식으로 해결 해야 할까요? interface Interface { readonly a: string; b: number; } class TSClass implements Interface { private readonly _a: string = "init"; get a() { return this._a; } protected _b: number = 1; get b() { return this._b; } set b(v: number) { this._b = v; } c: string = "기본값이 public"; method() { console.log(this._a); console.log(this._b); console.log(this.c); } } class inheritClass extends TSClass { method() { console.log(this._a); // error console.log(this.a); // 가능.. console.log(this._b); console.log(this.b); console.log(this.c); } } new inheritClass()._a; // error new inheritClass().a; // 가능... new inheritClass()._b; // error new inheritClass().b; // 가능.. new inheritClass().c;