inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

react-native-keyboard-aware-scrollview 직접 타이핑하기

안녕하세요.

해결된 질문

349

Milkyway

작성한 질문수 35

0

안녕하세요 슬랙 클론코딩 공부 전 다른 책과 병행하여 한번 더 공부하고 있는데 책 내용중 모르는 것이 있어 질문 드립니다.

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]이란 값을 직접적으로 사용하지 못하고 그거에 대한 타입을 추론하여 함수에 값이 아닌 타입으로만 검사를 하는 것을 보고 문맥 손실이 일어났다 하는 것이라 추론했습니다.

감사합니다.

 

typescript

답변 1

0

제로초(조현영)

[10, 20] 은 타입스크립트가 [number, number]가 아니라 string[]으로 넓게 추론합니다. 이걸 문맥 손실이라고 표현한 겁니다. as const를 붙이면 정확하게 number, number로 잡으므로 문맥 손실을 막은 겁니다.

0

Milkyway

답변 감사합니다!!

타입 오버라이딩

0

78

2

React19에서 useRef 타입 정의의 변화

0

128

2

jQuery를 $로 한 번 더 감싼 형태

0

58

1

typescript interface를 jsdoc으로 주석달 때

0

234

2

declare module시 import 위치

0

198

2

declare global 로 선언된 타입을 확장하는게 아닌 좁히는것도 가능할가요?

0

148

2

typescript 강의를 보고 개발을 하다가 강의와 다른 내용인데 물어볼곳이 여기밖에 없어서 질문 드립니다.

0

237

1

강의에 필요한 사전준비와 예제 코드 첨부

1

311

1

local.ts 예제코드 첨부 합니다.

1

230

1

redux 예제코드 가져와서 강의 보면서 따라하는데

1

248

1

react 함수 컴포넌트 타이핑은 있는데 클래스 컴포넌트 타이핑 예제 코드가 없네요.

1

287

1

axios 1.6.0 버전으로 보고 있는데영

4

393

1

Module '"axios"' has no default export 에러 나시는분들

0

881

1

안녕하세요, 제로초님 타입스크립트 axios 분석 강의보고 궁금한점이 있어서 질문드립니다

1

389

1

안녕하세요. 제로초님 당신의 강의 매니아 입니다. typescript 모듈 관련 질문이 있어서요.

0

269

1

axios catch 에서 error 타입에 대해 as 없이 이렇게 사용하면 어떨까요?

0

406

1

global 선언 시 export {}

0

298

1

initialState가 제네릭 S인 이유가 잘 이해가 되지 않습니다.

0

310

1

declare module vs declare namespace

0

478

1

declare namespace vs namespace

0

500

2

"axios": "1.4.0" 버전 axios type 코드가 강의와 다릅니다!

0

561

1

Redux type 설정 과정에서 발생한 오류 질문 (ts[2345])

1

383

2

index.d.ts 에서 global declare 선언을 했을 때와 하지 않았을 때의 차이

0

409

1

미들웨어가 커링패턴으로 이루어진 이유

0

442

1