![](https://velog.velcdn.com/images/eun7263/post/7a0924d4-089f-4a37-8d5d-c426bbb4fecf/image.jpg)
import styled from "styled-components"
**interface** ContainerProps {
bgColor: string;
}
const Container = styled.div**<ContainerProps>**`
width: 200px;
height: 200px;
background-color: ${props => props.bgColor}
`;
// 속성 맨끝에 ?을 붙이면 required이 아니라 optional 된다.
interface CircleProps {
bgColor: string;
borderColor?:string;
}
function Circle({ bgColor, borderColor, text = "default text" }: CircleProps) {
return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor}>{text}</Container>
}
export default Cirle
interface PlayerShape {
name: string;
age: number;
}
const sayHello = (playerObj: PlayerShape) => `Hello ${playerObj.name} you are ${playerObj.age} years old.`
sayHello({ name: "eunajae", age: 28 })
sayHello({ name: "wonbin", age: 22 })