40,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
props 타이핑 방식의 차이점
안녕하세요!변수에 바로 타이핑하는 두번째 방법을 선호한다고 하셨는데요.이 방법으로 하면 뒷부분이 알아서 타입추론된다고 하셨는데 헷갈려서 질문드립니다.뒷부분이 알아서 타입추론된다는 것이P 제네릭이 타이핑된 propTypes, defaultProps들의 타입도 자동으로 추론된다는 것을 말하신 것일까요?interface P {} // 1번 const WordRelay = (props: P) {} // 2번 const WordRelay: FunctionComponent<P> = (props) => {} interface FunctionComponent<P = {}> { (props: P, context?: any): ReactElement<any, any> | null; propTypes?: WeakValidationMap<P> | undefined; contextTypes?: ValidationMap<any> | undefined; defaultProps?: Partial<P> | undefined; displayName?: string | undefined; }
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
안녕하세요
안녕하세요 궁금한 점이 있어 질문 드립니다.아래 두 코드가 있는데 둘 다 알수 없는 구조의 객체를 매개변수로 받는 함수입니다.첫번째는 매개변수의 값을 인덱스드 시그니처로 받았고 두번째는 객체 타입 그 자체로 받았습니다.첫번째 코드는 문제없이 통과 되고 두번째 코드는 o[key] 부분에 오류가 나는데 에러 내용을 봐도 잘 모르겠어서 질문 드립니다.제가 이해한건 object가 {}라고 하셨는데 {}는 전체타입(집합?)에서 null과 undefined를 제외한 나머지를 말한다 하셨습니다. 이때 object는 객체 뿐 아니라 문자열이나 숫자가 될수도 있기 때문에 에러가 난다 생각했습니다.다른 글을 보니 코드에서 에러가 발생한 이유는 string literal 타입만 허용되는 곳에 string 타입을 사용했기 때문이라는데 object의 키는 문자열 리터럴 타입인데 반복문을 도는 key는 스트링 타입이라 그런건가요?마지막으로 string으로 {}를 인덱싱 할수 없는데 왜 any 타입을 가지는 건지도 궁금합니다.감사합니다!function hasTwelveLetterKey(o: { [key: string]: any }) { for (const key in o) { if (key.length === 12) { return true; } } return false; }function hasTwelveLetterKey(o: object) { for (const key in o) { if (key.length === 12) { console.log(key, o); console.log(key, o[key]); // Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}' // No index signature with a parameter of type 'string' was found on type '{}'. return true; } } return false; }
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
useState lazy init
useState의 인자로 함수의 선언을 전달하면 lazy init이 작동하고, 함수의 호출을 전달하면 lazy init이 작동하지 않는것이button의 onClick으로 함수의 선언을 전달하면 잘 작동하지만,onClick으로 함수의 호출을 전달하면 리 렌더링될때마다 실행되는 것과 같은 원리인가요??
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
Content-type 종류
안녕하세요 강의를 보고 더 공부하다가 프로젝트를 진행하는 도중에 궁금한 것이 생겨 질문하게 됐습니다. 강의와는 조금 무관하지만 답변해주시면 정말 감사하겠습니다.!보통 저는 프로젝트를 할 때 Content-type application/json을 사용하였지만,최근에 Content-type application/vnd.collection+json 방식을 알게 됐습니다.혹시 실무에서는 어느 것을 더 선호하며 어떤 방법을 더 사용하나요?
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
안녕하세요.
안녕하세요 슬랙 클론코딩 공부 전 다른 책과 병행하여 한번 더 공부하고 있는데 책 내용중 모르는 것이 있어 질문 드립니다.as const 를 사용하면 문맥 손실(losing context)과 관련된 문제를 깔끔하게 해결할 수 있다고 나왔는데 이게 무슨 뜻인지 잘 모르겠습니다.코드는 첫번째 코드에서 두번째 코드로 수정되는 상황이었습니다.function panTo(where: [number, number]) { } const loc = [10, 20]; panTo(loc); // Error // Argument of type 'number[]' is not assignable to parameter of type '[number, number]'. Target requires 2 element(s) but source may have fewer. function panTo(where: readonly [number, number]) { } const loc = [10, 20] as const; panTo(loc)타입 스크립트가 loc를 number[]로 추론하여 매개변수와 타입이 맞지 않아 아래와 같이 수정했는데 as const가 붙으면 readonly가 붙고 그게 더 좁은 타입이라 매개변수에도 readonly를 붙여준다는 것까진 이해했습니다. as const를 사용하여 문맥 손실과 관련된 문제를 해결한다는 것이 무슨 뜻인지 궁금합니다!! 제가 생각하기에는 한변 변수에 넣어줬기 때문에 [10, 20]이란 값을 직접적으로 사용하지 못하고 그거에 대한 타입을 추론하여 함수에 값이 아닌 타입으로만 검사를 하는 것을 보고 문맥 손실이 일어났다 하는 것이라 추론했습니다.감사합니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
함수를 매개변수로 전달시
jQuery 타입 분석 Q&A 3분대에서,(this : TElement , index : number , oldhtml : JQuery.htmlString)=> JQuery.htmlString이라는 매개변수 자리에function () {return '<div>hello</div>'}를 전달하셨는데, 인수로 쓰이는 함수는 매개변수 개수가 똑같을 필요가 없다고 하셨습니다.개인적인 추측으로는 반공변성과 관련이 있다고 생각이 드는데 , 질문에서 첫번째 함수가 두번째 함수의 서브타입이기 때문에, 첫번째 함수 자리에 두번째 함수를 대입할 수 있다고 이해해도 될까요?그렇다면 이 예제에서 만약 전달하고 싶은 함수의 매개변수가 4개라면, 반공변성에 의해 어긋나서, 전달하지 못한다고 생각해도 될까요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
브랜딩 기법 질문드립니다.
type Awaited<T> = T extends null | undefined ? T : // special case for `null | undefined` when not in `--strictNullChecks` mode T extends object & { then(onfulfilled: infer F, ...args: infer _): any } ? // `await` only unwraps object types with a callable `then`. Non-object types are not unwrapped F extends ((value: infer V, ...args: infer _) => any) ? // if the argument to `then` is callable, extracts the first argument Awaited<V> : // recursively unwrap the value never : // the argument to `then` was not callable T; // non-object or non-thenable여기서 object & { then }도 브랜딩 기법을 사용한 건가요? duck typing과 브랜딩의 차이점이 궁금합니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
안녕하세요 제로초님 질문 있습니다.
import axios from 'axios';이렇게 똑같이 했는데 옆에 빨간 문구로모듈 '"c:Users/tjdckd?OneDrive/\~~/ts-all-in-one/axios"'에는 기본 내보내기가 없습니다. 라고 뜨고axios에 커서를 올렸는데 axios가 선언은 되어있지만 해당 값이 읽히지는 않았습니다 라고 뜹니다. 어떻게 해결해야 되나요?구글에 검색을 해봤는데 제가 잘 못 찾는건지 해결을 못하고 있습니다..
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
안녕하세요. 질문 있습니다.
안녕하세요.강의와 관련된 내용은 아니지 추가 공부중 이해하기 어려운 부분이 혼자 고민해봐도 확실한 답을 찾지 못해 질문 드립니다. 먼저 책 내용은 아래와 같았습니다.위와 같은 이유로 라이브러리는 공통 함수 시그니처를 함수 타입으로 제공하기도 한다. 또한 공통 콜백 함수를 위한 타입 선언을 제공하는 것이 좋다. 예를 들어 리액트는 함수의 매개변수에 명시하는 MouseEvent 타입 대신 함수 전체에 적용할 수 있는 MouseEventHandler 타입을 제공한다.만약 같은 타입 시그니처를 반복적으로 작성한 코드가 있다면 함수 타입을 분리해 내거나 이미 존재하는 타입을 찾아보자. 라이브러리를 직접 만든다면 공통 콜백에 타입을 제공해야한다. 그리고 관련된 타입은 아래와 같이 있었습니다.type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"]; type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>; onAuxClick?: MouseEventHandler<T> | undefined; onAuxClickCapture?: MouseEventHandler<T> | undefined; onClick?: MouseEventHandler<T> | undefined; onClickCapture?: MouseEventHandler<T> | undefined; onContextMenu?: MouseEventHandler<T> | undefined; onContextMenuCapture?: MouseEventHandler<T> | undefined; onDoubleClick?: MouseEventHandler<T> | undefined; onDoubleClickCapture?: MouseEventHandler<T> | undefined; onMouseDown?: MouseEventHandler<T> | undefined; onMouseDownCapture?: MouseEventHandler<T> | undefined; onMouseEnter?: MouseEventHandler<T> | undefined; onMouseLeave?: MouseEventHandler<T> | undefined; onMouseMove?: MouseEventHandler<T> | undefined; onMouseMoveCapture?: MouseEventHandler<T> | undefined; onMouseOut?: MouseEventHandler<T> | undefined; onMouseOutCapture?: MouseEventHandler<T> | undefined; onMouseOver?: MouseEventHandler<T> | undefined; onMouseOverCapture?: MouseEventHandler<T> | undefined; onMouseUp?: MouseEventHandler<T> | undefined; onMouseUpCapture?: MouseEventHandler<T> | undefined;제가 이해한건 onClick, onDoubleClick에 관련된 이벤트를 모두 만들지 않고 MouseEventHandler 하나로 타입을 지정 가능하도록 했다 라는 뜻으로 이해했는데 맞을까요?그리고 공통 콜백 함수를 위한 타입 선언을 제공하는 것이 좋다 라는 문장은 저 MouseEventHandler 타입을 개발자에게 제공하여 편하게 사용하는 것이 좋다, onClick, onDoubleClick 같은 속성에 들어갈 함수를 위한 타입을 제공하는 것이 좋다 로 이해했는데 맞을까요??마지막 문장은 해당 부분을 중괄호() 로 이해 했는데 맞을까요?? 같은 타입 시그니처를 반복적으로 작성한 코드가 있다면(MouseEventHandler 타입인 함수들) 함수 타입(MouseEventHandler)를 분리해내거나 이미 존재하는 타입(MouseEventHandler)를 찾아보자. 라이브러리를 직접 만든다면 공통 콜백에 타입을 제공(MouseEventHandler)해야한다. 제 질문 자체가 이상하면 솔직히 말해주시면 감사합니다ㅠㅠ 감사합니다!!
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
[직접 라이브러리 타이핑하기 > connect-flash 직접 타이핑 하기] 모듈명.d.ts로 할 경우 에러가 발생합니다.
"직접 라이브러리 타이핑하기 > connect-flash 직접 타이핑 하기" 안녕하세요, 제로초 님,강의에서 보여주신것과 달리 저는d.ts파일 만들 때,d.ts파일을 담는 폴더 아래,직접, 모듈이름 connect-flash으로 connect-flash.d.ts, d.ts 파일을 만들면,해당 모듈의 import 부분에서 에러가 발생합니다.에러 발생 => 구조 : (d.ts파일담는 폴더 > connect-flash.d.ts )반면,모듈명 connect-flash을 폴더명으로 지정하고하위에, 기존 connect-flash.d.ts 파일명을 index.d.ts로 변경하면 에러가 사라집니다.에러 사라짐=> 구조 : (d.ts파일담는 폴더 > connect-flash폴더> index.d.ts )tsconfig.json의 compilerOptions 에서 다음처럼 설정했습니다. "typeRoots": [ "./node_modules/@types", "./src/@types" ] case01) 에러가 발생하는 경우 입니다.*@types : d.ts 파일을 담는 폴더명@types > connect-flash.d.ts case02) 에러 사라집니다.@types > connect-flash > index.d.ts 혹시 tsconfig.json의 설정 문제일까요,학습적으로 궁금한 부분이라 문의 드렸습니다:]
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
제네릭을 활용한 Response 타이핑 7:40초 질문(아래 질문에 추가질문)
안녕하세요 제로초님.아래 질문에대한 답변 달아주신것 확인하였습니다. respone에대한 타입인것은 index파일에서 확인은 했는데한가지 의문이애초에 AxiosResponse의 제네릭 이외에는 T가 활용되지 않는 것 같은데T를 제거하고 AxiosResponse<Create> 만 넘기는것과 무엇이 다른것인지 궁금합니다!다른파트에서 사용해야해서 규격을 맞추기위해 첫번째 제네릭 인자를 굳이 받는건지 다른 이유가 있는건지가 궁금합니다 ㅎ.ㅎ
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
안녕하세요 제로초님 질문있습니다!
안녕하세요. 제로초님 저는 redux toolkit으로 axios error처리 하려고 합니다!. 플로우는 createAsyncThunk에서 login액션으로 왔을 때 catch로 error를 잡아준 뒤 reducer에서 .addCase(login.rejected, (state, action: PayloadAction<any>) => { state.loginError = action.payload; })loginError로 에러 메시지가 들어오게 하는것입니다.먼저catch에서는 export const login = createAsyncThunk( ... } catch (error) { if (axios.isAxiosError(error)) { console.error((error as AxiosError<{message: string}>).response?.data.message) } return rejectWithValue(error.message); << Object is of type 'unknown'. } 강의대로 요렇게 해주었는데 rejectWithValue에서이러한 경고문이 발생합니다.또한 reducer에서interface InitialState { loginError: string | null; } const initialState: InitialState = { loginError: null, }; const userSlice = createSlice({ ... .addCase(login.rejected, (state, action: PayloadAction<any>) => { state.loginError = action.payload; })이부분에서InitialState에서 loginError는 어떠한 에러 타입을 지정해주어야 하며 login.rejected에서 에러가 들어올 경우 PayloadAction에는 어떠한 타입을 지정해주어야 하는지 궁금합니다! 즉 return rejectWithValue(error.message);에서는 어떻게 error.message를 보내주어야 하며 reducer에서 loginError에는 어떠한 초기값을 설정하고payloadAction에서도 어떠한 타입을 지정해주어야 하는지 궁금합니다!
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
안녕하세요.
안녕하세요. 웹 스톰에서 this에 커서를 올리면 사진과 같이 타입이 뜨는 것이 아니라 this가 선언된 함수 자체가 뜨는데 설정에서 바꿔줄수 있을까요?강의 중 f12로 설명해주시는건 다른 질문 답변 보고 command + b 나 command + option + b 또는 command + shift + b 를 통해서 정의, 구현, 타입선언으로 각각 이동 가능하다는 걸 알았는데 현재 이 문제는 해결 못하고 있습니다.vscode로는 강의와 같게 zQuery가 잘 출력 되는걸로 봐서 IDE쪽 설정 같아서 강의 듣는 시간보다 더 많은 시간을 썼는데 결국 해결하지 못해 질문 드립니다. 감사합니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
Mac OS 에서는 F12 버튼 뭘로 입력하면 될까요?
5분 16초 즈음에 해당 타입이 선언되어 있는 리스트를 팝업 창 으로 보여주고 있는데요. 윈도우 에서는 F12 버튼을 클릭하면 보이는 걸로 알고 있는데, Mac OS 에서는 fn + F12 버튼을 클릭하면 해당 타입이 사용중인 File 로 이동되어 버리더라구요. 해당 타입이 선언되어 있는 팝업 형식으로 보려면 어떻게 해야 할까요??
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
모듈 관련 질문입니다.
안녕하세요.tsconfig 중에 noResolve라는 항목에 대해서 공부하다가 이해가 가지 않는 점이 있어 질문남깁니다.1) d.ts 파일들을 보다보면 triple slash references 가 사용되어 있는것을 흔하게 볼 수 있습니다.제가 공부한 바로는 namespace(내부모듈) 을 작성할 때 참조경로를 컴파일러에게 알려주는 역할로서 사용한다고 이해 했는데 맞게 이해 한걸까요?2) noResolve 옵션은 triple slash references 을 무시한다고 공식문서에 나와있는데 그러면 해당 옵션이 어떻게 쓰이는지 궁금합니다. 활성화 되었을 때 참조관계가 무시되고 컴파일이 제대로 안될 것 같은데 그럼 무조건 런타임시 오류가 나지 않나요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
as 대신 satisfies 연산자를 쓰는것은 어떨까요??
이번 타입스크립트 4.9 beta 에서 satisfies 연산자가 추가되었는데요. 아직 베타버전 이긴 하지만, as 대신 satisfies 연산자를 사용하면 as 를 사용하지 않아도 괜찮지 않을까요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
제네릭을 활용한 Response 타이핑 7:40초 질문
안녕하세요 강의를 듣다가 질문이 생겨 문의드립니다axios.post 설명 중 interface Created {}가 이해되지 않아 질문 드립니다 import axios, {Axios, AxiosError, AxiosResponse} from "axios"; interface Post {userId: number, id: number, title: string, body: string} interface Created {} interface Data {title: string, body: string, userId: 1} (async () => { try { const response = await axios.get<Post, AxiosResponse<Post>>( "https://jsonplaceholder.typicode.com/posts/1" ); //post<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>; const response2 = await axios.post<Created, AxiosResponse<Created>, Data>('https://jsonplaceholder.typicode.com/posts', { title: 'foo', body: 'bar', userId: 1 }) console.log(response.data.id) console.log(response2) } catch (error) { if(axios.isAxiosError(error)) { //커스텀 타입가드 // {message: "서버 장애입니다. 다시 시도해주세요"} console.error((error.response as AxiosResponse<{message: string}>)?.data.message) } } } })(); [index.d.ts] 내의 axios.get의 경우 Post가 있어 타입을 확인할 수 있다는 것은 이해했습니다. 하지만 interface Post와 달리 interface Create는 빈 객체는 axios.post에서 무슨 역할인지 이해되지 않습니다. 개인적인 생각으로는 [index.d.ts]에서 T는 any니까 Create는 단순히 자리만 채우고 실제 타입 역할은 interface Data가 수행하는 것 같았습니다 제대로 이해한 게 맞나 싶어 문의드립니다그리고 올려주신 강의 늘 잘 듣고 있습니다. 늘 어려운 부분, 이해되지 않는 부분을 쉽게 설명하셔서 감사합니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
export = $?
query index.d.ts 파일에는export = jQuery;jQuery만 export하고 있는데 $ 변수를 외부에서 사용할 수 있는 이유가 무엇일까요?예상으로는declare const $: JQueryStatic;이 부분 때문일 것 같은데 맞을까요? 또한 jQuery를 사용할 때 import를 굳이 하지 않아도 사용할 수 있는 이유가 무엇일까요?