Search code examples
javascriptreactjstypescriptapolloapollo-client

can't 'convert' typescript definition in javascript


I am trying to rewrite this Apollo typescript repository to javascript. I try to learn typescript but there is one thing called 'type casting' or 'type assertion' which makes me confuse.

let me explain it with code:

//cache.tsx

import { InMemoryCache, ReactiveVar, makeVar } from "@apollo/client";
import { Todos } from "./models/Todos";
import { VisibilityFilter, VisibilityFilters } from "./models/VisibilityFilter";

export const cache...{
...
...
}


export const todosVar: ReactiveVar<Todos> = makeVar<Todos>( //how i can 'convert' this type caster value to vanilla js?
  todosInitialValue 
);

export const visibilityFilterVar = makeVar<VisibilityFilter>(  //how i can 'convert' this type caster value to vanilla js?
  VisibilityFilters.SHOW_ALL
)

other 2 files which are used by this cache.tsx are:

//todos.tsx

export interface Todo {
  text: string;
  completed: boolean;
  id: number
}

export type Todos = Todo[];

and

VisibilityFilter.tsx


export type VisibilityFilter = {
  id: string;
  displayName: string;
}

export const VisibilityFilters: { [filter: string]: VisibilityFilter } = {
  SHOW_ALL: {
    id: "show_all",
    displayName: "All"
  },
  SHOW_COMPLETED: {
    id: "show_completed",
    displayName: "Completed"
  },
  SHOW_ACTIVE: {
    id: "show_active",
    displayName: "Active"
  }
}

How can I avoid typescript type checking in this situation and more important, how can I use ReactiveVar and makeVar imports properly?


Solution

  • Just remove the generic like this:

    From:

    makeVar<Todos>(
    

    To:

    makeVar(
    

    Change this:

    export const todosVar: ReactiveVar<Todos> = makeVar<Todos>( //how i can 'convert' this type caster value to vanilla js?
      todosInitialValue 
    );
    
    export const visibilityFilterVar = makeVar<VisibilityFilter>(  //how i can 'convert' this type caster value to vanilla js?
      VisibilityFilters.SHOW_ALL
    )
    

    To this:

    export const todosVar = makeVar(todosInitialValue);
    export const visibilityFilterVar = makeVar(VisibilityFilters.SHOW_ALL);
    

    How to avoid typescript checking - replace your extensions from .ts and .tsx to .js and .jsx respectively.