Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Const variable as type - Typescript

$
0
0

During learning Typescript I faced problem when I used constant variable with the value of action which I use to reducer (created to prevent typo - I have read somewhere it is good practice).

const INPUT_CHANGE: string = "INPUT_CHANGE";const INPUT_BLUR: string = "INPUT_BLUR";

I also have created type to define reducer action:

type InputReducerAction =  | { type: INPUT_CHANGE; value: string; isValid: boolean }  | { type: INPUT_BLUR };

And here is my reducer:

const inputReducer = (state: InputReducerState, action: InputReducerAction) => {  switch (action.type) {    case INPUT_CHANGE:      return {        ...state,        value: action.value,        isValid: action.isValid,      };    case INPUT_BLUR:      return {        ...state,        touched: true,      };    default:      return state;  }};

When I have everythink like above INPUT_CHANGE and INPUT_BLUR in InputReducerAction are marked as error:

'INPUT_CHANGE' refers to a value, but is being used as a type here. Did you mean 'typeof INPUT_CHANGE'?ts(2749)

'INPUT_BLUR' refers to a value, but is being used as a type here. Did you mean 'typeof INPUT_BLUR'?ts(2749)

Problem disappear when I use double quotes for this constants, like so

type InputReducerAction =  | { type: "INPUT_CHANGE"; value: string; isValid: boolean }  | { type: "INPUT_BLUR" };

But my const variables are useless right now. What I have done wrong or missed?

During writing this question I got idea to use enum:

enum INPUT_ACTION {  INPUT_CHANGE = "INPUT_CHANGE",  INPUT_BLUR = "INPUT_BLUR"}type InputReducerAction =  | { type: INPUT_ACTION.INPUT_CHANGE; value: string; isValid: boolean }  | { type: INPUT_ACTION.INPUT_BLUR };const inputReducer = (state: InputReducerState, action: InputReducerAction) => {  switch (action.type) {    case INPUT_ACTION.INPUT_CHANGE:      return {        ...state,        value: action.value,        isValid: action.isValid,      };    case INPUT_ACTION.INPUT_BLUR:      return {        ...state,        touched: true,      };    default:      return state;  }};

and using it in reducer and type. Errors disappear BUT is it good idea or can I do this in a better way


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>