SolidJS•2y ago

Type conditional Syntax between props

Hey folks, is there any way to check if IOperation['content'] is of type string since JSX.Element extends from string too ? But like in a way that we know for sure that IOperation['ctx'] will def be defined ?

export interface IOperation {
  content: JSX.Element
  ctx?: (value: number) => void
}

/// ...
// `operation.ctx` possibly null here 
if (tyepof operation.content !== 'number') return operation.ctx(operations.indexOf(operation))
// ...

export interface IOperation {
  content: JSX.Element
  ctx?: (value: number) => void
}

/// ...
// `operation.ctx` possibly null here 
if (tyepof operation.content !== 'number') return operation.ctx(operations.indexOf(operation))
// ...

I'm just asking a type conditional syntax here to make IOperation['ctx'] not optional only if content is of type number

1 Reply

bigmistqke•2y ago

mb something like

type IOperation = {
  content: number,
  ctx: (value: number) => void)
} | {
  content: Exclude<JSX.Element, number>, 
  ctx?: (value: number) => void)
}

type IOperation = {
  content: number,
  ctx: (value: number) => void)
} | {
  content: Exclude<JSX.Element, number>, 
  ctx?: (value: number) => void)
}

? it's called discriminatory unions if it's props u could also do function overloading

function Comp (props: {content: Exclude<JSX.Element, number>, ctx?: (value: number) => void}): JSX.Element
function Comp (props: {content: number, ctx: (value: number) => void}): JSX.Element
function Comp (props: {content: JSX.element, ctx?: (value: number) => void }){
  ...
}

function Comp (props: {content: Exclude<JSX.Element, number>, ctx?: (value: number) => void}): JSX.Element
function Comp (props: {content: number, ctx: (value: number) => void}): JSX.Element
function Comp (props: {content: JSX.element, ctx?: (value: number) => void }){
  ...
}

Gaming

Programming

Type conditional Syntax between props