SimCoding

'!.' 연산자 - Non-null assertion operator "!." 연산자는 피연산자가 null, undefined가 아니라고 단언 해주는 문법입니다. 타입스크립트의 문법에러를 해결하기 위해 주로 사용됩니다. 하지만, 타입단언은 타입에 강제성을 부여하는 만큼 위험 부담이 있습니다. 실제로 eslint에서는 Non-null assertion을 사용할 경우 the strict null-checking mode의 이점을 활용할수 없기 때문에, 사용을 권장하지 않습니다. // 사용예시 const a = {b : 1} a!.b

[TS] Property 'name' does not exist on type 'EventTarget' > EvenTarget에 name 속성이 존재하지 않아서 발생하는 타입오류 > 해결 : TypeAssertion을 이용해 해결 할 수 있다.

[TS] Object is of type 'unknown'.ts(2571) (error object) > try-catch문의 error의 타입과 관련해서 발생하는 error > 해결방법 : 아래와 같이 type narrowing기법을 이용해 해결 할 수 있다.

안녕하세요. 이번 포스팅에서는 useState를 사용해 선언한 변수를 props를 통해 전달 할 때, 타입지정하는 방법에 대해 알아봅시다. 아래 예시코드를 통해, 타입지정 방법을 확인해보세요. // App.tsx function App() { const [aboutScroll, setAboutScroll] = useState(false); return ( ); } export default App; // About.tsx interface AboutProps { setAboutScroll: Dispatch; aboutScroll: boolean; } const About: React.FunctionComponent = ({ aboutScroll, setAboutScroll }) => { return ( ..

[TS] Value must be omitted for boolean attributes 에러 해결방법 props가 아래와 같은 형태로 작성되어 있을 경우, 'Value must be omitted for boolean attributes' 에러가 발생할 수 있습니다. 해결방법 : 아래와 같이 작성해 주시면 오류가 해결됩니다.

TypeScript & StyledComponents 에서 props타입 지정하기. 안녕하세요. 이번 포스팅에서는 TypeScript를 사용할때, StyledComponent에 props타입을 지정하는 방법에 대해 알아보겠습니다. TypeScript에서는 타입을 지정하지 않고, 임이의 props를 사용할 경우 오류를 뱉습니다.. 아래 사진처럼요.. 그렇다면 props에 대한 타입은 어떻게 지정하면 되는 걸까요 !? 예시코드를 통해 StyledComponent를 통해 props에 타입 지정하는 방법을 확인해 봅시다. > 타입 직접 지정. // const Container = styled.div` const Container = styled.div< { age : number ..

[TS] React TypeScript 에서 children에 대한 타입정의 예시 import React, { ReactChildren, ReactChild } from 'react'; interface AuxProps { children: ReactChild | ReactChildren; } const Aux = ({ children }: AuxProps) => ({children}); export default Aux;

Typescript 에서 DOM 조작하기 , HTML 조작하기. 안녕하세요. 오늘은 타입스크립트에서 DOM을 조작하기 위한 방법에 대해 포스팅 하려고 합니다. 간단한 예시를 통해 DOM조작 방법을 확인해 보겠습니다. html 예시 : 아래와 같은 html이 있을 때, 타입스크립트로 돔을 조작해보겠습니다. hello, gwang ! link button 타입스크립트에서 DOM 조작하기 : type narrowing을 이용한 DOM조작. let title = document.querySelector('#title'); // innerHTML속성을 제어하기 위한 2가지방법 // 아래 세가지 방법 모두 가능하지만 'instanceof'를 사용하는게 가장 일반적이라고 합니다. if(title !== null) 제..