Recently I had to migrate a React Native personal project which was written in JavaScript to TypeScript. This Blog post will highlight the different areas and the changes that i had to make.

Project Files

Adding Prop Gypes

The main change that needed to be made was creating types or interfaces for the props of each of the components created. A possible solution exists to use the ‘any’ type. The benefits that are offered when a type is created for a prop are far more superior than the convenience provided when the ‘any’ type is used. These benefits include clarity for different parameters that each component expects and the type of those parameters.

interface IHomepageProp {
  dailyRemaining: number;
  weeklyRemaining: number;
  monthlyRemaining: number;
}
function HomePage(props: IHomepageProp)

Creating Interfaces for States

While not necessary it is also recommended to create an interface for the states that hold an object

interface ITransactionDetails{  
  payee: string,  
  date: string,  
  category: string,  
  amount: number  
}


const [transactionDetails, setTransactionDetails] = useState<ITransactionDetails>({  
  payee: "",  
  date: "",  
  category: "",  
  amount: 0  
});

Redux

The main changes that had to be done to my project were related to the Redux files used, this section will go over different changes that were necessary to be made:

Root Reducer

The root reducer is required to have a type as well. This type is used in the mapStateToProps function parameter type.

You can create a type for your root reducer using the below code:

export type RootState = ReturnType<typeof rootReducer>

Reducers

The state used in each reducer also requires a type and its important that the Initial state content matches this type.

export interface IAppDetails {
  categoryFrequency: string[];
  categoryIconList: string[];
  lastDailyBalanceJob: number;
  lastWeeklyBalanceJob: number;
  lastMonthlyJob: number;
}

export function AppDetailReducer(
  state: IAppDetails = initialState,
  action: IAppDetailActionTypes,
)

Actions

The actions used in each reducer also needs a type. In order to use all the action types in the Reducer a super type needs to be created that combines all the action types.

export interface IAddTransaction {
  type: BalanceActionTypes;
  transactionAmount: number;
}

export interface IAllocateMoney {
  type: BalanceActionTypes;
  allocationAmount: number;
}

export interface IBalanceState {
  available: number;
  unallocated: number;
  allocated: number;
}

export type IBalanceActionTypes = IAddTransaction & IAllocateMoney;

it is recommended to also use enums in order to initialzie the differt types of actions that each reducer has.

export enum BalanceActionTypes {
  REDUCE_BALANCE = 'REDUCE_BALANCE',
  ALLOCATE_MONEY = 'ALLOCATE_MONEY',
  ADD_BALANCE = 'ADD_BALANCE',
}

mapDispatchToProps and MapStateToProps

In order to make the current mapDispatchToProps and mapStateToProps functional within your application there are a few steps that is needed to be made:

the Root reducer type needs to be used as the type of state in the mapStateToProps

const mapStateToProps = (state: RootState) => {
  return {
    transactions: state.transactions,
    amount: state.communication.numeric,
    categories: state.categories,
    itemSelect: state.communication.itemSelected,
  };
};

assign the correct type to the input parameters of the dispatch functions

const mapDispatchToProps = (dispatch: any, ownProps: any) => {
  return {
    clearData: (data: IComponentCommunicationAction) =>
      dispatch(clearData(data)),
    reduceAvailable: (data: IAddTransaction) =>
      dispatch(addTransactionBalanceChange(data)),
    addBalance: (data: IAddTransaction) => dispatch(addBalance(data)),
    categoryTransactionAction: (data: ICategoryTransactionAction) =>
      dispatch(categoryTransactionAction(data)),
  };
};

add the dispatch functions and state variables to the prop in the following way

interface IHomepageProp {
  addDailyStatistics: (data: IAddStatistics) => {};
  amount: number;
}

Ending Notes

While this post does not cover all the changes that might be required to be made in all the projects migrating from JavaScript to TypeScript, it still offers the necessary steps needed to be taken initially to get you started on that task.