如何确保属性的值是预定义的 object 中的值之一？

Question

I am using react with typescript and would like to have to make sure the state type be limited to the values in an object like so

Consider

 const [proessStatus, setProcessStatus] = useState<ProcessState>();

The useState must accept as argument only the values from the ProcessState Object.

const ProcessState = {
    NOT_STARTED: 'NOT_STARTED',
    STARTED: 'STARTED',
    LOADING: 'LOADING',
    FINISHED: 'FINISHED'
}

Is there a way to ensure this in typescript through Interfaces or any other means.

Answer 1

Yes, use string-based enums please!

enum ProcessState {
  NOT_STARTED = 'NOT_STARTED',
  STARTED = 'STARTED',
  LOADING = 'LOADING',
  FINISHED = 'FINISHED'  
}

They are type-safe in their values (so validation happens at compile time). You can use the Enum object itself as a normal object at runtime. If you need additional runtime validation you can use Object.values(ProcessState) to get the valid values. And you can use it with the Record<SomeEnum, SomeValueType> type to create type safe maps etc.

Answer 2

Use enum and use it as the type of the argument of the function

enum ProcessState {
  NOT_STARTED = 'NOT_STARTED',
  STARTED = 'STARTED',
  LOADING = 'LOADING',
  FINISHED = 'FINISHED'  
}

function useState(p: ProcessState) {

   ...

}

useState(ProcessState.STARTED)