본문 바로가기
반응형

📍 Front-End/🜸 TypeScript10

타입스크립트 유틸리티 타입 (Utility Types) 타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 정적 타입을 부여하여, 코드를 더 안전하고 유지보수하기 쉽게 만들어줍니다. 이 글에서는 타입스크립트의 유틸리티 타입들에 대해 소개해보겠습니다. 1. PartialPartial는 제네릭 타입 T의 모든 프로퍼티를 옵셔널로 만듭니다. 즉, T의 모든 프로퍼티가 있을 수도 있고 없을 수도 있는 상태로 만들어줍니다.interface User { id: number; name: string; email: string;}const updateUser = (id: number, userUpdate: Partial) => { // 일부 프로퍼티만 업데이트 가능};// 올바른 호출updateUser(1, { id:1 });updateUser(.. 2024. 6. 23.
자바스크립트(타입스크립트)에서 숫자 세자리(천단위)마다 콤마 찍기 자주 쓰면서 왜 자꾸 까먹는걸까 export function formatNumberWithCommas(price: number) { return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 2023. 1. 12.
Typescript 타입스크립트 에러 Object is possibly 'null' 에러 useEffect(() => { const container = document.querySelector('.container'); container.addEventListener('scroll', listener); return () => { container.removeEventListener('scroll', listener); }; }); 대충 이런 상황에서 container 변수에 빨간 줄이 뜨면서 object is possibly 'null'이라는 에러가 출력됐다 원인 개발하는 입장에서 저 container에 dom이 들어간다고 확신하지만, 타입 스크립트 입장에서는 아닌가 보다,,ㅎ null값이 들어갈 수도 있다고 판단이 되어 뜨는 오류! 해결 옵셔널 체인징을 이용하자! useEffect.. 2022. 11. 22.
[Typescript] 타입스크립트에서 json 파일 import 안될 때 문제 다국어 지원을 위해 react-i18n을 쓰는데 설정을 해주는 과정에서 json 형태의 언어팩을 불러오지 못하는 이슈가 있었다 역시나 친절하게 해결방법을 알려준다 원인 tsconfig 파일에서 resolveJsonModule이 설정되어 있지 않았다 해결 tsconfig 파일로 가보자! esModuleInterop과 moduleResolution은 잘 설정되어 있었는데 resolveJsonModule 설정이 없어서 추가했다 참고로 resolveJsonModule 옵션을 사용하기 위해서 esModuleInterop과 moduleResolution 설정은 필수다! { "compilerOptions": { // code "esModuleInterop": true, // ES6 모듈 사양을 준수하여 Comm.. 2022. 6. 12.
반응형