Web/TypeScript4 TypeScript Assertion - 특정 타입을 확신할 수 있는 경우 타입스크립트를 사용하다보면 아래와 같은 상황을 자주 볼 수 있다. const foo = useQueryParams("foo") // {title: string} | undefinedreturn ( {foo.title} // Error: undefined일 수 있음) 그리고 다음 방법 중 하나를 사용하곤 한다. const foo = useQueryParams("foo") // {title: string} | undefined/* 1. Early Return 사용 */if (!foo) { return null}/* 2. Optional Chaining 사용 */return ( {foo?.title} ) 하지만 사용하는 페이지에서 무조건 foo가 있다는 것을 확신할 수 있다면 (없으.. 2024. 6. 18. TypeScript - is keyword type narrowing을 위한 아래와 같은 코드는 타입스크립트가 그 의도를 이해하지 못한다.const isString = (value: any) : boolean => { return typeof value === "string" } const test = (str: any) => { if (isString(str)) { // 'str'이 'string' 타입임을 알지 못함 str.toupperCase() // 런타임 에러 발생 } } 이때 함수가 boolean 값을 return 하는 경우, 리턴 타입에 is 키워드를 사용하여 해당 scope내에서 지정한 타입으로 내로잉 할 수 있다.const isString = (value: any) : value is strin.. 2024. 5. 29. TypeScript 공식 라이브러리 tslib란 무엇인가 유명 오픈 소스들을 살펴보다 문득 tslib라는 라이브러리에 대한 궁금증이 생겼다. 하지만 구글링을 아무리 해봐도 이에 대한 정보를 찾기 쉽지 않았다. 그래도 스택오버플로우와 함께 머리를 쥐어 싸면서 어느 정도 깨달음을 얻을 수 있었다. 다른 사람들은 나와 같은 시행착오를 겪지 않았으면 하는 마음에 이에 대한 깨달음을 공유해보고자 한다. 등장 배경 TypeScript는 사용자가 작성한 코드를 JavaScript로 변환하면서 몇 가지 도우미 함수(helper functions)를 삽입할 수 있다. 예를 들어, 클래스 상속, 제너레이터, async/await, spread 연산자 등을 자바스크립트 ES5 버전으로 변환할 때 도우미 함수가 필요하다. 이때 도우미 함수들은 각 모듈에 복사되어 자바스크립트 번들의.. 2024. 1. 10. 모노레포에서 Typescript 사용중 발생한 vscode 에러 어느 날 갑자기 vscode에서 아래와 같은 에러가 발생했다. The JS/TS language service immediately crashed 5 times. The service will not be restarted. This may be caused by a plugin contributed by one of these extensions: styled-components.vscode-styled-components. Please try disabling these extensions before filing an issue against VS Code.This workspace contains a TypeScript version. Would you like to use the workspac.. 2023. 8. 20. 이전 1 다음
