// TS: "name"이 존재하지 않는다고 코드가 실행되기 전에 에러가 뜬다.
// JS: 코드가 실행되고 undefined가 뜬다.
const user = {
firstName: "angela",
lastName: "Davis",
role: "Professor",
};
console.log(user.name);
const plus = (a: number, b: number) => a + b;
plus(1, 1);
plus("1", 1); // number가 아니기 때문에 Error
파일을 만들 때 TS 설치 방법
npx create-react-app my-app --template typescript
yarn create-react-app my-app --template typescript
기존 파일에 TS 설치 방법
npm install --save typescript @types/node @types/react @tpyes/react-dom @types/jest
js > ts / jsx > tsx
로 변경한다.TS는 라이브러리나 패키지가 뭔지 모르기 때문에 d.ts를 install 해줘야한다.
npm i styled-components
npm i --save-dev @types/styled-components
import styled from "styled-components";
import React, { useState } from "react";
// Container가 받는 Props를 타입을 설명해주는 방법
// 여기서는 borderColor이 Optional이 아니라서 Container에 무조건 써줘야한다.
interface ContainerProps {
bgColor: string;
borderColor: string;
}
// Container가 받는 Props를 TS에게 설명해준다.
const Container = styled.div<ContainerProps>`
width: 200px;
height: 200px;
background-color: ${(props) => props.bgColor};
border-radius: 100px;
border: 1px solid ${(props) => props.borderColor};
`;
// Props에게 타입을 설명해주는 방법
// 여기에서는 borderColor이 Optional라서 App.tsx에서 borderColor props를 보내주지 않아도 에러가 뜨지 않는다.
interface CircleProps {
bgColor: string;
borderColor?: string;
}
// bgColor의 타입은 CircleProps의 object 라고 말해주고 있다.
// TS는 CircleProps 안에 bgColor 가 있다는 걸 알게 됨
export default function Circle({ bgColor, borderColor }: CircleProps) {
// number로 시작하면 타입이 number이라고 타입 추론을 하고, number가 아닌 다른 값을 setCounter 해주면 에러가 뜬다.
// 대부분 우리가 state를 만들 때, state의 타입은 변하지 않기 때문에 웬만하면 따로 type를 지정해주지 않아도 된다.
const [counter, setCounter] = useState(1);
// 만약 기존의 타입말고 다른 타입을 갖길 원할 때 하는 방법
const [value, setValue] = useState<number | string>();
// default 값을 보내는 법 : borderColor가 있다면 borderColor를 사용하고, 만약 undefined 라면 bgColor를 borderColor로 사용해라.
return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor} />;
}
interface PlayerShape {
name: string;
age: number;
}
const sayHello = (playerObj: PlayerShape) =>
`Hello ${playerObj.name} you are ${playerObj.age} years old.`;
sayHello({ name: "JC", age: 13 });
sayHello({ name: "JC", age: 13, health: 10 }); // interface에 health가 존재하지 않기 때문에 Error