Typescript/React: How to define interdependency properties in Interface

You want to define the interface with properties have constraint with each other

You want to define the interface with properties interdependency

You want to define inteface have values interdependency 

Please follow the example code bellow, for every cardType value we is required related fields:

interface ProductCardCommonProps {
}
interface ProductCardSimple extends ProductCardCommonProps {
cardType: 'simple',
price: number
}

interface ProductCardOptions extends ProductCardCommonProps {
cardType: 'options',
fromPrice: string,
toPrice: number
}

interface ProductCardForSale extends ProductCardCommonProps {
cardType: 'forSale',
originPrice: number,
salePrice: number
}

const ProductCard = (props: ProductCardSimple | ProductCardOptions | ProductCardForSale) => {
return (
<div className="col mb-5">
<Card className="h-100 text-center">
<Badge className="bg-dark position-absolute" style={{top: '0.5rem', right: '0.5rem'}}>Dark</Badge>
<Card.Img
variant="top"
src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg"
alt="..."
/>
<Card.Body className="p-4">
<Card.Title>Fancy Product</Card.Title>
<StarReview star={5} reviewCount={5} />
<Card.Text>
{
props.cardType === 'simple' ? `${props.price}đ` :
props.cardType === 'options' ? `${props.fromPrice}đ - ${props.toPrice}đ` :
<>
<span className="text-muted text-decoration-line-through">{`${props.originPrice}đ`}</span>
{` ${props.salePrice}đ`}
</>
}
</Card.Text>
</Card.Body>
<Card.Footer className="p-3 pt-0 border-top-0 bg-transparent">
<Card.Title>
<a className="btn btn-outline-dark mt-auto" href="#">View options</a>
</Card.Title>
</Card.Footer>
</Card>
</div>
)
}

==============================

Using


<ProductCard cardType='forSale' originPrice={40} salePrice={20} /> // valid

<ProductCard cardType='simple' originPrice={40} salePrice={20} /> // error





Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

TypeORM should using repository or query buider ?

TypeORM should using repository or query buider ? Both repository and query builder approaches can be used to query data in TypeORM, depending on the situation and your preference. The repository pattern in TypeORM provides a more intuitive and straightforward approach to interacting with the database. It allows you to define methods in the repository to perform CRUD (create, read, update, delete) operations on objects in the database. These methods can also be used to perform more complex queries, such as using JOIN or GROUP BY queries.  The repository pattern The repository pattern also allows you to focus on the object rather than the query. The query builder in TypeORM provides a more flexible approach to building database queries. It allows you to build complex queries by combining multiple statements and enables you to create more interactive queries with the database.  The query builder The query builder also allows you to have more control over creating queries and can optimize
Read more »

Type of children prop in React Typescript

Hình ảnh
Type of children prop in React Typescript In difference contexts, you can choose type of 'children' prop as following types: 1. Type JSX.Element: using only for single React Element  If 'children' is list React Element, we can define: children: JSX.Element | JSX.Element[]  export default ICustomPageContext; type Props = { title: string, children: JSX.Element, }; const Page = ({ title, children }: Props) => ( <div> <h1> { title } </h1> { children } </div> ); 2. Type ReactChild: using for single React Element, string, number If 'children' is list React Elements, list string, list number, we can define: children: ReactChild | ReactChild[]  type Props = { title: string; children?: | React.ReactChild | React.ReactChild[]; }; 3. Type ReactNode: using for multiple React Elements, strings, number. This is general type for 'children' If you cannot identify the specific type of 'children', you ju
Read more »

Why we should Avoid using UNSAFE componentWillMount, componentWillReceiveProps, componentWillUpdate

Hình ảnh
  Avoid using UNSAFE componentWillMount (UNSAFE_componentWillMount) Using componentWillMount for init state ? We can using `state initialization` or init state in constructor => we don't need using componentWillMount import React from " react "; class ExampleComponent extends React. Component { state = { currentColor: this . props . defaultColor , palette: " rgb " } ; } class ExampleComponent2 extends React. Component { constructor (props) { super (props); this . state = { currentColor: this . props . defaultColor , palette: " rgb " } ; } } Using componentWillMount for fetching external Data ? import React from " react "; class ExampleComponent extends React. Component { state = { externalData: null , } ; componentDidMount () { this . _asyncRequest = loadMyAsyncData (). then ( externalData => { this . _asyncRequest = null ; this . setState
Read more »