[Today I Learned] 1월 3주차 day4

TypeScript에서 Children을 사용하는 방법

type Props = {
  children: React.ReactNode;
};

function Layout({ children }: Props) {
  return (
    <>
      <Header />
      <div>{children}</div>
    </>
  );
}

typescript에서 styled-components 적용법

npm i —save-dev @types/styled-components      
npm i styled-components

import styled from "styled-components";

declare

어딘가에서 import가 가능하며, declare를 통해 해당 변수의 존재와 타입을 알릴 수 있다.
item.d.ts 파일을 생성 후 복붙

declare type items = {
	id : string;
    title: string;
    content: string;
}

typescript에서 useSelector,useDispatch 사용법

hooks.ts 파일을 만든 후 아래 코드 처럼 사용하기

import { TypedUseSelectorHook, useSelector } from "react-redux";
import type { RootState } from "../redux/config/configStore";

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;


// 따로 타입지정 없이 customhook 처럼 불러와서 사용 가능 
import {useAppSelector} from "../hooks"

const exp = useAppSelector((state) => state.status)