36,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
type error 를 변수로 없애신 부분에 대해서 질문있습니다!
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 없이 받아들이는건지 궁금합니다
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
함수의 공변성과 반공변성에 대한 이유 설명
질문은 아니지만 다른 분들도 쉽게 보시고 이해하실 수 있도록 해당 수업의 질문으로 남기도록 하겠습니다.설명에 앞서 그냥 강사님께서 하신 말씀처럼 외우는게 제일 나을수도 있습니다. 그냥 저처럼 이해하지 못하면 못 넘어가는 사람들을 위해 남깁니다.공변성과 반공변성에 대하여 매개변수와 리턴타입의 대입가능성에 대해 설명하고자 합니다. 강의에서 사용된 예제를 사용하겠습니다.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에 대해서만 타입 검사를 해주려고 처음 대입할때 매개변수의 범위와 리턴값의 범위를 저렇게 제한했다고 보시면 된다는 뜻입니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
추상클래스를 상속받은 구현클래스에서 private 접근 불가관련 해서 질문 있습니다.
추상 클래스에서 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'.
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
interface를 사용할 때 private 사용방법은?
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;
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
bind에서의 this, thisArg, ...args 타입분석 3개인 이유 ..
안녕하세요. 얼마 전 bind 타입 분석을 하다가 궁금점이 풀리지 않아 질문 내역을 보았습니다. 22년 9월 13일 제목: 13:50 파라미터 질문 (해결)이란 글의 질문과 같이 bind 인자로 받는 this 가 이해를 할 수 없었습니다. 현영님께서 답변을 달아주신 것을 봤지만 이해가 되지 않더라고요 이게 가능한건가?.. 싶었습니다.현재 타입스크립트버전 "typescript": "^5.1.6"lib.es5.d.ts 에 보면 bind는 아래와 같이 정의 되어있는데요interface CallableFunction extends Function { bind<T>(this: T, thisArg: ThisParameterType<T>): OmitThisParameter<T>; bind<T, A extends any[], B extends any[], R>(this: (this: T, ...args: [...A, ...B]) => R, thisArg: T, ...args: A): (...args: B) => R; }mdn에서 bind 메서드를 확인해보니 func.bind(thisArg[, arg1[, arg2[, ...]]])이러한 구문을 갖고 있는 것을 확인했습니다. 인자의 수가 안맞고 this라는 것은 찾아볼 수 없었는데요. 그래서 ECMAScript bind를 찾아보니 함수가 다음과 같이 정의 되었다는 것을 알게되었습니다.20.2.3.2 Function.prototype.bind ( thisArg, ...args ) This method performs the following steps when called: 1. Let Target be the this value. 2. If IsCallable(Target) is false, throw a TypeError exception. 3. Let F be ? BoundFunctionCreate(Target, thisArg, args). 4. Let L be 0. 5. Let targetHasLength be ? HasOwnProperty(Target, "length"). 6. If targetHasLength is true, then a. Let targetLen be ? Get(Target, "length"). b. If targetLen is a Number, then i. If targetLen is +∞𝔽, then 1. Set L to +∞. ii. Else if targetLen is -∞𝔽, then 1. Set L to 0. iii. Else, 1. Let targetLenAsInt be ! ToIntegerOrInfinity(targetLen). 2. Assert: targetLenAsInt is finite. 3. Let argCount be the number of elements in args. 4. Set L to max(targetLenAsInt - argCount, 0). 7. Perform SetFunctionLength(F, L). 8. Let targetName be ? Get(Target, "name"). 9. If targetName is not a String, set targetName to the empty String. 10. Perform SetFunctionName(F, targetName, "bound"). 11. Return F.bind가 수행되면 bound 된 함수를 반환해주는데 그 과정에서 1번에서 target은 this 값으로 설정이 되고3번에 BoundFunctionCreate (target, thisArg, ...args) 로 설정되어 this가 들어가는 것으로 확인했습니다. 이 과정을 거쳐 bound된 함수를 반환해주는데 타입스크립트에서 정의된 this, thisArg, ...args 가 위 내용에 대한 타입 정의가 아닐까 싶습니다. 이전 답변에 궁금증이 해소되지않아 찾아봤는데 시간나실때 확인부탁드립니다![ECMAScript bind 링크] ECMA bind 위에 링크 걸어두었습니다. 항상 좋은 강의와 정보제공 감사드립니다.:)
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
forEach(arr: number[], callback: (el: number) => undefined) 콜백타입에서 궁금한 점이 있습니다.
declare function forEach(arr:string[],callback:(el:string)=>undefined):void let target:string[]=[]; forEach(['a','b','c'],el=>target.push(el))number 타입의 값이 아닌 string 값을 사용해보고자 아래 처럼 작성해보고 undefined 타입을 void 또는 string으로 변환하고자 했는데 아래와 같은 오류문구가 출력되었습니다.Type 'number' is not assignable to type 'undefined'저는 string으로 타입을 모두 지정해줬고, 당연히 string값은 undefined에 할당할 수 없다고 생각했는데 왜 number 타입으로 출력되는지 궁금합니다.Array.push() 라는 메서드 자체가 number 타입을 반환하는 메서드인건가요...??
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
안녕하세요. 호기심 질문이 있어서요!
궁금한 부분 질문인데 혹시 인덱시드 시그니쳐 설명 해주실때type A = { [key:string]: number }이렇게 하셨는데요 type대신 interface로 해도 잘 작동 되더라고요.질문type말고 interface로 해도 상관 없나용?
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
이거 오타인가요?
타입으로니 -> 타입으로맞나요? 완전 복잡한 타입 분석하기(Promise와 Await편) 입니다.
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
void의 두가지 유형에 대해
void의 두가지 유형을 배웠습니다.1. 함수 선언식의 괄호 바로 옆에 붙는 :void 는return하는 값이 없다.2. void를 반환하는 형식의 타입( () => void ) 는어떤 값을 return 하던 신경 쓰지 않겠다. 여기서 2번 같은 경우 강의에서는 콜백함수, 객체의 메소드 정의에 대해서 적용된다고 말씀하셨는데 혹시나 해서 단순한 화살표 함수에도 2번 같은 방식으로 하니까 타입 지정이 되더라고요. 그냥 화살표 함수의 케이스는 전부 2번에 해당한다고 봐도 되나요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
abstract 와 implements 의 차이
이 두 문법의 차이를 잘 모르겟습니다.implements 사용시 구현까지 강제되고 abstract 사용시 시그니쳐까지만 작성하면 된다정도의 차이인가요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
생성자 함수 타입 abstract new (...args: any) => any
function test<T extends abstract new (...args: any) => any>(param: T): void{} class A { a: string = 'hi' } test(A); // 성공 test(new A()); // 실패abstract new (...args: any) => any이 생서자 함수타입이라고 하셨는데 클래스 A의 생성자 함수(constructor)는 prototype 하위에 있고 A의 인스턴스는 __proto__ 내부에 constructor이 있는걸로 알고있는데 왜 클래스만 통과되고 인스턴스는 통과하지 못하는지 궁금합니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
class 타입 (생성자, 인스턴스)
강의 [10:03]에 const a: A 부분의 A가 인스턴스라고 말씀 해주셨는데 a변수에 클래스 그 자체를 넣어도 할당이 됩니다.// type = A const a: A = new A(); // Success const a2: A = A; // Success인스턴스 ⊂ 클래스 의 관계인데 이게 어떻게 가능한지 잘 이해가 안갑니다.. // type = typeof A const b: typeof A = new A(); // Fail const b2: typeof A = A; // Success
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
filter item is T vs item is S
filter<S extends T>(callbackFn: (item: T) => item is T): S[]; // item is T // filter<S extends T>(callbackFn: (item: T) => item is S): S[]; // item is S const c: Array<string | number> = [1, '2', 3]; const a7 = c.filter((item): item is number => typeof item === 'number');위 코드에서 콜백함수의 반환 타입가드를 item is T로 하든 item is S로 하든 a7 변수는 number[] 로 추론되는데왜 lib.es5.d.ts에선 item is S로 하는지 궁금합니다.단순히 T의 부분집합 S를 필터링 해준다는 의미부여를 하기 위함인지 기능적으로도 차이가 있는건지 알고 싶습니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
인덱스드 시그너치와 함수속성
interface userType<T> { readonly [key: number]: T; join(separator?: string): string; } 위 코드처럼 인덱스드 타입의 키 타입을 Number로 하면 오류가 발생하지 않지만 아래와 같이 string으로 바꾸면 join 속성에서 "Property 'join' of type '(separator?: string | undefined) => string' is not assignable to 'string' index type 'T'.(2411)View Problem (⌥F8)" 오류가 발생합니다.join은 함수의 매개변수와 반환타입을 가지고 있는데 왜 이런 오류가 발생하는걸까요?interface userType<T> { readonly [key: string]: T; join(separator?: string): string; }
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
제네릭 extends 함수로 한 경우
function test<T extends (a: number, b: string) => boolean>(callback: T): void { return; } const callback = (a: number) => {return true}; const callback2 = (a: string) => {return true}; const callback3 = () => {return true}; test(callback); // OK test(callback2); // ERROR test(callback3); // OKplayground에서 위 코드 입력시 callback2에서만 오류가 나고 나머진 통과됩니다.제네릭에선 a, b 옵셔널이 아닌 두 매개변수를 정했는데 왜 빈값 혹은 1개만 넣어도 충족되는지 궁금합니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
tsconfig설정에 따른 트리쉐이킹
target: es5 ,module: commonjs 위 값으로 tsconfig 설정시 commonjs 모듈을 따르는 es5 자바스크립트로 변환되는걸로 알고 있습니다.그런데 과거 실무에서 웹팩 번들러 분석시 위와같이 설정하면 commonjs의 require형식때문에 트리쉐이킹이 제대로 되지 않았던걸로 기억하는데 혹시 연관 관계가 있는것 맞을까요?트리쉐이킹을 정상적으로 할려면 module을 es6 혹은 esnext등으로 설정해야 하는지 궁금합니다
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
FlatArray의 ReadonlyArray의 요소 추론
type FlatArray<Arr, Depth extends number> = { "done": Arr, "recur": Arr extends ReadonlyArray<infer InnerArr> ? FlatArray<InnerArr, [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20][Depth]> : Arr }[Depth extends -1 ? "done" : "recur"];이 flat 함수 타입의 type에서 "recur": Arr extends ReadonlyArray<infer InnerArr>요소의 타입을 추론한다 이 부분이 이해가 잘 안갑니다.interface ReadonlyArray<T> { /** * Calls a defined callback function on each element of an array. Then, flattens the result into * a new array. * This is identical to a map followed by flat with depth 1. * * @param callback A function that accepts up to three arguments. The flatMap method calls the * callback function one time for each element in the array. * @param thisArg An object to which the this keyword can refer in the callback function. If * thisArg is omitted, undefined is used as the this value. */ flatMap<U, This = undefined> ( callback: (this: This, value: T, index: number, array: T[]) => U | ReadonlyArray<U>, thisArg?: This ): U[] /** * Returns a new array with all sub-array elements concatenated into it recursively up to the * specified depth. * * @param depth The maximum recursion depth */ flat<A, D extends number = 1>( this: A, depth?: D ): FlatArray<A, D>[] } infer InnerArr에 해당하는 ReadonlyArray의 T 제네릭을 추론할 수 있는 부분이 ReadonlyArray interface 안에 전혀 없어보입니다...! ㅠ
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
class 타입 선언하며 js
강의 실습 내용입니다!const b: A = new A('123')에서 A const a: typeof A = new A('123')에서 typeof A 모두 js 라고 생각합니다.그런데 어떤 원리로 ts 가 이 js 문법들을 없애버리나요 ....? 이 말은 ts가 js에 개입한다는 뜻 아닌가요 ...?
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
{}, Object, object 타입에 대한 질문입니다!
{}, Object 타입이 모든 타입을 말하는데이게 왜 ts 에서 이렇게 개발을 했을까요 ....?혹시 js 에서 배열도 객체, string도 객체 이런거랑 관련 있을까요 ????2. object 타입을 지양하라고 말씀해주셨는데 구체적인 그 이유는 무엇인가요 ????3. 강의 예시에서 // unknown = {} | null | undefinedif (z) { z; // {} 이다. 왜 ? null, undefined가 떨어져 나가니까.} else { z;}이 부분에서 else 문안에 있는 z는 왜 여전히 unknown 인가요 ??? 위의 if 문 안의 z가 null, undefined이 떨어져 나가는 것처럼 else 문 안의 z도 {} 등(내부 로직을 모르니 ...)도 떨어져 나가야되는게 맞지 않나요 ???
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
lib.es5.d.ts bind 업데이트
안녕하세요!bind 강의를 듣는데 실제로 현재 bind 내부 type을 보기 위해 ctrl을 찍고 lib.es5.d.ts 파일로 들어가 봤습니다.그런데 다음과 같이 강의 내용과 달라진 것 같습니다. 제가 우연히 약 23년3월달 전(정확히 모르겠습니다)의 lib.es5.d.ts 파일을 가지고 있는데 해당 강의 내용과 같네요 ㅠ