用于字符串长度的 TypeScript 自定义类型检查

Question

I'm writing a react component that needs a string prop with a length of less than 10 characters.

I want the compiler to throw an error if a user passes a string with a length greater than 10.

interface ComponentProps {
    word: StringLessThanTenChar
}

const Component: React.FC<ComponentProps> = props => {
  return <div>{props.word}</div>;
};

<Component word="thisIsAStringLongerThan10Chars" />

How do I create a custom type to check this and throw an error?

Answer 1

It's not possible to make a type which checks for string length. You should do this programmatically.

You could do it by a regex or by length. Something like this.

const string = 'lalalalalalalallallalalala'

const stringLength = strin.split('').length

Answer 2

1.First, it's not supported by typescript at this moment

Refer: Issue about Suggestion of Regex-validated string type

---

2.You can use regex to limit the length of string

For example:

/^.{0,10}$/i

Try it online: https://www.regextester.com/?fam=115411

---

3.You can use RegExp.prototype.test() to test if a value fit your regex in js

xxxx.test(yourValue)

Answer 3

import PropTypes from 'prop-types';

interface ComponentProps {
    word: StringLessThanTenChar
}

const Mycomponent = props => {
    return <>{props.word}</>
}

Mycomponent.propTypes = {
  word: chkLength
}

function chkLength(props:ComponentProps , propName:any, componentName = 'ANONYMOUS') {
  if (props[propName]) {
    let value = props[propName];
    if (typeof value === 'string') {
        if(value.length > 10) {
            new Error(propName + ' in ' + componentName + " is accept maximum 10 length of strings");
        }
    }
  }
  return null;
}