Practice

<Form>

Dark/Light Mode

If Javascript :

const user = {
	first : 1,
	second : 2
}
console.log(user.third)

=> undefined

But Typescript

const user = {
	first : 1,
	second : 2
}
console.log(user.third)

=> ERROR!!!!!!!!!!!!

설치

//처음 설치할 때
npx create-react-app 'AppName' --template typescript

//styled-components는 typescript로 만들어진 라이브러리가 아니기에 추가 설정 필요
npm i --save-dev @types/styled-components //ts에게 styled-components가 무엇인지 설명
npm i styled-components

interface

<aside>

object의 shape을 typescipt가 알 수 있게 해줌. object의 props(shape)를 정의함.

</aside>

//interface로 object의 shape 결정
interface Person {
	name : string;
	age : number;
}

//props로 들어간 personObj 의 type 은 Person
const Glory = (personObj: Person) => {
  console.log(personObj.name, personObj.age);
}

//Glory 함수에 Person type의 object를 만들어서 넣음
Glory({name: "Glory", age: 30});

styled-components 에 사용

interface CircleProps { 
  bgcolor: string;
}

//styled-components를 사용할 때 interface 사용
//<>안에 type을 정의하여 props의 shape을 알려줌
const Container = **styled.div<CircleProps>`**
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: ${(props) => props.bgcolor};
`;