Practicing Typescript: Restricting props
6457 단어 typescript타입스크립트typescript
Restricting props
// App.tsx
import { RandomNumber } from './components/restriction/RandomNumber'
function App() {
return (
<div className='App'>
{/* Can also be set as isNegative and isZero */}
<RandomNumber value={10} isPositive />
</div>
)
}
type RandomNumberType = {
value: number
}
// Use of & to specify restrictions
// Never type: Ex) When isPositive isNegative and isZero cannot be set or used together
type PositiveNumber = RandomNumberType & {
isPositive: boolean
isNegative?: never
isZero?: never
}
type NegativeNumber = RandomNumberType & {
isNegative: boolean
isPositive?: never
isZero?: never
}
type Zero = RandomNumberType & {
isZero: boolean
isPositive?: never
isNegative?: never
}
type RandomNumberProps = PositiveNumber | NegativeNumber | Zero
export const RandomNumber = ({
value,
isPositive,
isNegative,
isZero
}: RandomNumberProps) => {
return (
<div>
{value} {isPositive && 'positive'} {isNegative && 'negative'}{' '}
{isZero && 'zero'}
</div>
)
}
Author And Source
이 문제에 관하여(Practicing Typescript: Restricting props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jha0402/Practicing-Typescript-Restricting-props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)