How to define prop type which takes only true

1

Hi

I am trying to write bindings for Textinput in the text-input.d.ts
indent preformatted text by 4 spaces

    interface TextInputAutosizeProps
        extends TextInputCoreProps,
            Omit<TextareaAutosizeProps, 'children' | 'ref' | 'type'> {
        autosize: true;
        maxRows?: number;
        rows?: number;
    }

The bindings I have written so far

    module TextInput = {
       type textInputType = [#Email | #Number | #Password | #Tel | #Text | #Url]
       type unitPosType = [#Inside | #Outside]
       type trueType = [#True]
      @genType.import(("@myorg", "TextInput")) @react.component
      external make: (
        ~amount: bool=?,
        ~autosize: bool=?,
        ~changed: bool=?,
        ~disabled: bool=?,
        ~hasFocus: bool=?,
        ~invalid: bool=?,
        ~maxLength: int=?,
        ~maxRows: int=?,
        ~readonly: bool=?,
        ~rows: int=?,
       ~size: int=?,
       ~type_: @string
       ...
     )=> React.element = "TextInput" 
     }

How to annotate autosize prop type. Please help

2

This can be done using @as attribute.

see https://rescript-lang.org/try?code=C4TwDgpgBMBQACBnCA7AJlCAPYEBOKAhgDZQAWAlgFxQAUwANFPIYrQFaID2KABsHgCuEXgEooAfSYUUwcQF4AfFEEoKwKPKgAiSttixiEDQDNNdLKKVQsAWmWVaAJlFA

1 Like
3

https://rescript-lang.org/try?code=LYewJgrgNgpgBAFRgDwC4EkB2AHCq4C8cA3gFBxwACoksAFHQETUCeIATgOaMA0cjSNFlypGASjFV2MAIYBjVADo5IYNhCYYmVOTgpUMdphlQ4wGQGsYALjh1dFAH4zQEbbYBGIEFAIB+Hgc4ZzwQAGcASwAvGyoZMLoAKzCNAANUdggYVMkAfUCASAB6IrhFcphUOT0q3UkCAD44ACVZBUUYWGAtfCIBfWE8RlIAX1JSWHxpTDBDAGFVdU1tQjt6poAeQQwcPDgXEDdUAgAzEzD4IoagA

Here is a playground link implementing what Hongbo mentioned :slight_smile:

(In future please try use code-blocks using easy for syntax highlighting or playground links are also great)

Markdown syntax for code blocks is like this:

```rescript
// put some rescript code here, that will have nice syntax highlighting and mono-font
```

4

If you always want to set autosize to true the previous examples are the way to go.
But if you want to distinct between not having it set and true you could use an abstract type like this:

module Autosize: {
  type t
  let autosize: t
} = 
{
type t = bool
let autosize = true
}

// and in your binding you'd use
// ~autosize: Autosize.t=?

This way you can either not set the prop or set it to true. But there is no way to set it to false.

I have seen similar APIs where false would be ignored by the component. So it doesn’t really make sense to use false, but nothing would break. I usually type these kind of props as bool because it’s just simpler and the overhead to type it “correctly” is not justified most of the time in my opinion.

2 Likes
5

@Hongbo

Thanks for the feedback the trick works if I use only js. But I am using @genType to convert to typescript the resultant type is
readonly autosize: unknown

with the above mentioned solution

6

@woeps

Thanks the solution. Using your solution the resultant type in the gen.tsx was

readonly autosize: Autosize_t;

export abstract class Autosize_t { protected opaque!: any }; /* simulate opaque types */

on the typescript side the type it was expecting was

readonly autosize: true;

7

Hi all,

For anyone looking for solution its here

1 Like