반응형

IT/Typescript 4

타입스크립트 정리

📖 타입스크립트를 사용해야 하는 이유 ⭐ Javascript 자바스크립트는 매우 유연한 언어라 에러를 사전에 보여주지 않기 때문에 코드에서 오류가 발생할 가능성이 높아집니다. // 예시) 🚫 숫자 배열 + false [1,2,3,4] + false → '1,2,3,4false' // 배열이 사라지고 string으로 바뀜 // 🚫 함수의 인자가 잘못 들어가도 실행됨 function add(a, b) { return a + b } add(1) → NaN //return값이 NaN일 뿐, 에러가 나지 않음 const a = { a: "A" }; a.hello(); // 선언 되지 않은 함수를 호출할 때: 실행 시 에러 발생(실행 전에 에러 감지 불가) ⭐ Tyescript 타입 안정성과 사전에 에러를 발생시켜..

IT/Typescript 2022.09.08

Styled Components & TypeScript

React에서 스타일을 지정하는 방법에는 여러 방법이 있지만 가장 많이 사랑받는 방법 중 하나가 바로 styled-components입니다. 그런데 Styled Components 라이브러리를 TypeScript로 전환하면서 같이 사용하기 위해서는 약간의 방법이 추가로 필요합니다. 1. 유형 설치 Styled Components 라이브러리는 유형과 함께 제공되지 않습니다. 확실한 유형이 지정된 저장소에서 설치해야 합니다. npm i --save-dev @types/styled-components 2. 스타일 작성하기 😊 단일 props 사용 시 CSS-in-JS 솔루션을 사용하는 주요 이점 중 하나는 사용자가 자신에게 필요한 값을 Props로 전달하고 그에 따라 CSS를 조정할 수 있다는 것입니다. 컴포..

IT/Typescript 2022.05.24

Typescript에서 React location의 state값 선언

리액트에서 Link에 state를 이용하여 이동하는 페이지에 특정값을 전달할 수 있습니다. 전달받은 페이지에서는 'useLocation' 항목을 이용하여 해당 값을 받아올 수 있는데 이 부분을 TypeScript를 적용하게 되면 오류가 발생하게 됩니다. 전달받은 값에 대한 타입이 지정되지 않았기 때문인데 이 부분을 쉽게 설명하고 해결하는 방법이 있어서 공유합니다. State를 이용하여 값 전달

IT/Typescript 2022.05.19

Object is possibly 'null' 오류 해결

이전에 스스로 공부하면서 만들었던 리액트 프로젝트를 타입 스크립트도 공부할 목적으로 타입 스크립트를 적용하였습니다. 타입 스크립트를 사용하기 전에는 단순히 값의 형태만 정의해주면 되는 건데.. 뭐가 이렇게 요즘 핫한 거지?라는 생각으로 접근을 했습니다만.. 실제로 타입스크립트를 적용하면서 처음에 제가 생각한 부분은 많이 단순한 생각이었다는 것을 처참히 느낄 수 있었습니다. 서론은 각설하고 React에서 useRef를 사용하였던 부분이 Error가 발생하여 이유를 찾아보았는데 처음 제가 useRef(null)로 선언한 값이 Object is possibly 'null'이라는 타입 스크립트 오류가 났습니다. 해결방법은 useRef에 type값을 any로 정의해주면 해결되었습니다. typescript를 쓰는 ..

IT/Typescript 2022.05.19
반응형
//