TypeScript

[TS] TypeScript Object 다루기

//JAVASCRIPT let obj = {}; obj["name"] = "pitter"; 자바스크립트와 타입스크립트에서 쉽게 체감할 수 있는 눈에 띄는 차이점은 객체이다. 자바스크립트에서는 위와 같이 간단하게 객체를 선언하지만, 타입스크립트에서는 {}가 정확히 객체만을 의미하는 것이 아니라 사실 Non-nullable Any 타입정도로 생각할 수 있다. 타입스크립트에는 여러가지 객체 타입 선언 방법이 있으니 알아보자. object 타입 var object: object; //{}와 []가 할당 가능한 타입이다. object = { prop: 0 }; object = []; //아래 형태의 변수는 할당 불가능하다 object = 42; // Error object = "string"; // Error o..

[TS] Styled-Components에 TypeScript 적용하기

Styled-Components와 TypeScript를 함께 사용할 때 아래와 같은 에러가 발생한다. Property 'isSelected' does not exist on type 'Pick & { ...; } & ThemeProps' Styled-Components가 전달받은 프로퍼티에 타입이 지정되어 있지 않아 발생하는 에러이다. 크게 두 가지 해결법이 있다. 방법1 const SStyledBookmark = styled.div` color: ${({ isSelected, theme } : { isSelected : any, theme : any}) => ... 단순하게 프로퍼티에 타입을 명시해주면 된다. 하지만 중복되는 프로퍼티가 많다면 방법2를 사용하는 것이 좋다. 방법2 interface P..

[TS] React Typescript 변환하기

TypeScript TypeScript는 JavaScript의 변수에 형식을 지정한 파생 언어이다. 아래를 참고해 기본 구조를 먼저 익히자. TypeScript 가이드북 - TypeScript Guidebook 타입(Types)을 사용하면 JavaScript 애플리케이션을 개발할 때 정적 타입 검사 및 코드 리팩토링과 같은 생산성 높은 개발을 수행할 수 있습니다. 타입 설정이 필수는 아니지만, 설정할 경우 컴파일 yamoo9.gitbook.io 설치하기 npm install --save typescript @types/node @types/react @types/react-dom @types/jest # or yarn add typescript @types/node @types/react @types/r..