How to fix "Property __ does not exist on type 'unknown' "

See also questions close to this topic

• can't make http interceptor works in angular

  I have the following interceptor

  export class JwtInterceptor implements HttpInterceptor, OnDestroy {
  
    authKey: string;
    subscription: Subscription;
  
    constructor(private store$: Store<RootStoreState.IAppState>) {
      this.subscription = this.store$.pipe(select(AuthStoreSelectors.authKey)).subscribe((key) => {
        this.authKey = key;
      });
    }
  
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      console.log('here', this.authKey)
      // add authorization header with jwt token if available
      if (this.authKey) {
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${this.authKey}`
          }
        });
        return next.handle(request);
      }
      return null;
    }
  
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
  }
  

  I do my http call like this

    constructor(@Inject(HttpClient) private httpClient: HttpClient) {}
  
    saveMission(params: apiModels.SaveMissionRequest): Observable<apiModels.SaveMissionResponse> {
      return this.httpClient.post<any>(`${environment.API_URL}/mission/save_mission`, params);
    }
  

  Now, I try to register my interceptor in angular so I update my app.module with

    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: JwtInterceptor,
        multi: true
      }
    ],
  

  But I have the following error in the console

  compiler.js:2430 Uncaught Error: Invalid provider for InjectionToken HTTP_INTERCEPTORS. useClass cannot be undefined. Usually it happens when: 1. There's a circular dependency (might be caused by using index.ts (barrel) files). 2. Class was used before it was declared. Use forwardRef in this case.

  It's imported correctly in the file, so I believe it's case 2, but if I use forwardRef, then I got a lot of error

  ERROR TypeError: jit_val_130 is not a constructor Loading icon set URL: /assets/icons/mdi.svg failed: jit_val_130 is not a constructor

  but this error never happened before I added this forward ref, so even if it looks like a svg error, it's probably sometrhing else that brake in app module.
• How to sort values on ngx-chart-line-chart tooltip

  Here is a line-chart example https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart.

  If you hover on that you'll see a tooltip:

  

  As you can see the values on tooltip is not sorted. Is there anyway to make the tooltip values sorted at all?
• Using Responsive Screens in Angular using bootstrap with multiple instances of the same component

  I am coding a responsive screen using bootstrap grid system (xs, sm, and md and up). The code below works as far as displaying the app-prize-list only once, depending on the screen size. However, the app-prize-list component is being initialized 3 times, once for each occurrence in the code, regardless of whether they will be shown based on the grid system.

  I can tell because the initialization hits the back end (database) and I can see the calls made are multiples of the components on the page. If I comment out one of the instances of app-prize-list then I see only two hits to the database. If I comment out two of them, then I see only one hit to the database. If don't comment out any of them then I see three hits to the database.

  I would expect the section that is not being displayed based on the screen size to be completely ignored. Is there another way to ensure that the right section (based on screen size) is displayed and that only the components that apply to that section are activated?
• property of vuex-class namespace didn't work thouth I had add namespaced:true in my module

  I use vue,typescript to build my project,in which I also use vue-class-componnet,vue-property-decorator,vuex-class.Both vue-class-component and vue-property-decorator work well,vuex-class not.There always has an error like "vuex.esm.js?2f62:993 [vuex] module namespace not found in mapState(): global/",in which global is one of my module state.

  firstly,I have export my module state like this:

  export default {
      namespaced:true,
      state,
      getters,
      mutations,
      actions,
  };
  

  and export my store like this:

  const store: Store<any> = new Vuex.Store({
  
    modules: {
      //添加自定义模块
      user
    }
  })
  
  export default store
  

  this didn't work at all. sencondly,I tried to let module state wrote in store,

  
  const store: Store<any> = new Vuex.Store({
  
    modules: {
      user:{
        namespaced:true,
        state:{
          foo:'this is foo'
        },
        getters:{
          getFoo(state){
            return state.foo;
          }
        }
      }
    }
  })
  

  It didn't help anything~The same error occurred.

  This is my directory structure:

  -src
   -store
    -global
     -index.ts
    -index.ts
   -views
    about.vue
  

  store/global/index.ts :

  import { Module, ActionTree, MutationTree, GetterTree } from 'vuex';
  import { GlobalState } from './types';
  import { RootState } from '../types';
  
  /**
   * state
   */
  export const state: GlobalState = {
    version: '1.0.0',
    token: '',
  };
  
  /**
   * getters
   */
  export const getters: GetterTree<GlobalState, RootState> = {
    getVersion(state: GlobalState): string {
      return state.version;
    },
    getToken(state: GlobalState): string {
      return state.token;
    }
  };
  
  /**
   * mutations
   */
  export const mutations: MutationTree<GlobalState> = {
    setVersion(state: GlobalState, payload: string) {
      state.version = payload;
    },
    updateToken: (state, payload: string) => {
      state.token = payload;
    }
  };
  

  store/index.ts

  import Vue from 'vue';
  import Vuex, { StoreOptions } from 'vuex';
  import { RootState } from './types';
  import { global } from './global';
  
  Vue.use(Vuex);
  const store: StoreOptions<RootState> = {
    state: {
      version: '1.0.0',
    },
    modules: {
      global,
    }
  };
  export default new Vuex.Store<RootState>(store);
  

  views/About.vue

  <template>
    <div class="demo2">
      <h1>{{txt}}</h1>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
  import Home from './Home.vue';
  import { State,Getter,Action,Mutation,namespace } from 'vuex-class';
  // import { UserInfo } from '../store/modules/user';
  // const namespace = 'global';
  const global = namespace('global')
  @Component({
    components: {
      Home,
    },
  })
  export default class About extends Vue {
    //props
    @Prop() private msg!:string
    @Prop() private sum!:number
    //data
    txt:string = 'hhhjj'
    dt:string ='ddd'
    //computed
    get getTxt(){
      return this.txt
    }
    //methods
    private add():void{
      this.sum ++
    }
    //watch 
    @Watch('txt')
    changeTxt(newTxt: string, oldTxt: string){
      console.log(`change txt: ${oldTxt} to ${newTxt}`)
    }
    @State("version") version!:string 
    @global.State("version") globalversion!:string 
    mounted(){
      console.log("version",this.version)
      console.log("globalversion",this.globalversion)
    }
  }
  </script>
  
  

  my package.json:

  {
    "name": "web",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "dev": "cross-env env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.config.js",
      "build:prod-fastLoan": "cross-env env_config=prod webpack --config build/webpack.pro.config.js",
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "tep": "node scripts/template"
    },
    "dependencies": {
      "@types/js-cookie": "^2.2.2",
      "autoprefixer": "^9.6.1",
      "axios": "^0.19.0",
      "clean-webpack-plugin": "^3.0.0",
      "core-js": "^2.6.5",
      "cross-env": "^5.2.0",
      "element-ui": "^2.11.1",
      "js-cookie": "^2.2.1",
      "json-server": "^0.15.0",
      "mini-css-extract-plugin": "^0.8.0",
      "optimize-css-assets-webpack-plugin": "^5.0.3",
      "postcss-loader": "^3.0.0",
      "style-loader": "^1.0.0",
      "vue": "^2.6.10",
      "vue-class-component": "^7.0.2",
      "vue-property-decorator": "^8.2.1",
      "vue-router": "^3.0.3",
      "vuex": "^3.0.1",
      "vuex-class": "^0.3.2",
      "webpack-dev-server": "^3.8.0"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "^3.10.0",
      "@vue/cli-plugin-typescript": "^3.10.0",
      "@vue/cli-service": "^3.10.0",
      "copy-webpack-plugin": "^5.0.4",
      "friendly-errors-webpack-plugin": "^1.7.0",
      "node-notifier": "^5.4.1",
      "node-sass": "^4.12.0",
      "portfinder": "^1.0.22",
      "sass-loader": "^7.2.0",
      "typescript": "^3.4.3",
      "vue-template-compiler": "^2.6.10",
      "webpack-cli": "^3.3.6"
    }
  }
  
  

  However, maybe the problem is that namespace cannot be found, should I need to define my own interface in the *.d.namespace file?And how?I tried to add the following code,but nothing change:

  declare module 'vuex-class' {
    function namespace(k:string):any
  }
  

  If there is anybody to help me with this problem,I would be glad,since I have searched on the website for solutions somemany times and found out nothing.
• TypeScript: Enum.Value is not comparable to some other Enum.Value

  I have placed an enum in a seperate file so I can use that enum across files

  Enums.ts

  export enum Category {
      NotDefined,        
      BackData,
      Testing,
      Simulated
  }
  

  In another file i try to use my enum. I am trying to write a simple if/else or switch.

  If i set the value of category == Category.Testing vscode is happy. If i try to set the value to something else e.g. "backData" as in the example below I get an error:

  Type 'Category.Testing' is not comparable to type 'Category.BackData' 
  

  Example code:

  import { Category } from '@app/model/Enums.ts';
  
  public async SubmitForm(): Promise<Boolean> {
      var category: Category;
      category = Category.BackData;
  
      switch (category) {
        case (Category.Testing): {
          ...
        }
        default: {
          ...
        }
      }
  
      if (category == Category.Testing) {
        ...
      } else {
        ...
      }
  }
  

  The error when setting the enum to another value that testing

  
• res in controller function fails due to being undefined

  I'm new to Sails (and a jr. dev to boot) and have been working through the Sailsjs in Action book. Given some previous experience with TypeScript I wanted to experiment with the framework in that capacity. However I've hit a road block when trying to return response statuses and information via my API.

  Every time I try to use the res in my controller I receive a: TypeError: Cannot read property 'ok' of undefined. Based on the book and the documentation, I'm under the impression that would get set automatically per this example from the docs:

  await User.create({name:'Finn'});
  
  return res.ok();
  

  and this example from the book:

  signup: function(req, res) {
      var options = {**grab request data**};
      User.create(options).exec(function(err, createdUser){
      if(err){
        return res.negotiate(err);
      }
      return res.json(createdUser);
  }
  

  So I feel like I'm missing something pretty obvious but I'm not sure what. The project compiles just fine and I've got the documented typescript libraries installed/configured. Even matching that function there returns the same TypeError to me.

  Another set of eyes would be greatly appreciated. Controller code below.

  declare const sails: any;
  
  import { boatInterface } from '../../interfaces/boat';
  
  module.exports = {
      friendlyName: 'new-boat',
      description: 'create a new boat model',
  
      inputs: {
        modelName:{
          required: true,
          type: 'string',
        },
        yearBuilt:{
            required: true,
            type: 'number'
        }
      },
  
  
      exits: {
  
        success: {
          description: 'New boat model was created successfully.'
        },
  
        invalid: {
          responseType: 'badRequest',
          description: 'The provided boat info was invalid.'
        },
  
        modelAlreadyCreated: {
          statusCode: 409,
          description: 'The provided boat model has already been 
          created.',
        },
  
      },
  
      fn: async function (req: any, res: any){  
          console.log('building boat');
  
          let boatRequest: boatInterface = {
              modelName: req.modelName.toLowerCase(),
              yearBuilt: req.yearBuilt
          }
  
          //confirming data has been formatted correctly
          console.log(boatRequest);
  
          let newBoat = await sails.models.boat.create(boatRequest)
          .intercept('E_UNIQUE', 'modelAlreadyCreated')
          .fetch();
  
          //confirming new boat exists
          console.log(newBoat);
          console.log("request successful");
  
          //res remains undefined and throws an error on attempted return
          console.log(res);
          return res.ok();
  
        }
  
  
  };
  

  Here's the error with some console logs included. Thanks in advance!

  building boat
  { modelName: 'kraken', yearBuilt: 1337 } <-- Request formats correctly
  { createdAt: 1566173040652,
    updatedAt: 1566173040652,
    id: 6,
    modelName: 'kraken',
    yearBuilt: 1337 } <-- new db entry is returned via fetch()
  request successful
  undefined <-- attempt to log the res returns undefined
  (node:3738) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'ok' of undefined
      at Object.<anonymous> (/Users/pitterpatter/Repos/learn/sails-learn/freeform/api/controllers/boat/new-boat.ts:67:20)
  
• How to calling Firestore Database in Fragment using FirebaseUi?

  So I'm gonna calling my database from Firestore using Recycler View with FirebaseUi in my fragment but somehow every time I opened my app, the app stop working.

  Here's my Fragment Contains Firestore Database.

  public class Fragment_HomeSpot extends Fragment {
  private FirebaseFirestore db = FirebaseFirestore.getInstance();
  private CollectionReference spotRef = db.collection("Spot");
  private SpotAdapter adapter;
  
  @SuppressLint("ResourceType")
  
  @Nullable
  @Override
  public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
      return inflater.inflate(R.id.recyclerview_layout,container,false);
  }
  
  @Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
  
  
      setUpRecyclerView();
  }
  
  
  private void setUpRecyclerView() {
  
      Query query = spotRef.orderBy("",Query.Direction.DESCENDING);
  
      FirestoreRecyclerOptions<Spot> options = new FirestoreRecyclerOptions.Builder<Spot>()
              .setQuery(query, Spot.class)
              .build();
  
      adapter = new SpotAdapter(options);
  
      RecyclerView recyclerView = Objects.requireNonNull(getView()).findViewById(R.id.recyclerview_layout);
      recyclerView.setHasFixedSize(true);
      recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
      recyclerView.setAdapter(adapter);
  }
  
  @Override
  public void onStart() {
      super.onStart();
      adapter.startListening();
  }
  
  @Override
  public void onStop() {
      super.onStop();
      adapter.stopListening();
  }
  }
  
• How to display an array of images from the firestore database in react native?

  hello how to show an array of images from the firestore database in react native? i tried this but no images are showing

  {this.props.user.map((images)=>{
  return (
    <View>
      <Image style={ {width: 350, height: 300}} source={{uri: images.photos}} />
    </View>
  );
  })}
  

  i am getting this warning at the bottom of the screen in yellow

  ''Warning: Failed prop type: Invalid prop 'source' supplied to 'ForwardRef(image)' ''
• Is Firestore is cost is too much for handling a large datbase

  I have to do application in which each user is assigned task on day to day basis. I have to show status of each task to their reportee everyday. Each reportee has 20-30 user under them they monitor task of their assigned user everyday. I have to create a minimum of 10 k task on daily basis. Each 10 k task will be viewed by user and their reportee. I am performing searching in these task also.

  My Firestore modelling is simple where I have two collection one for the user and other for task. Total nos of user including reportee are 300. Total nos of task for last 6 month is approx 3 lakh.

  Firestore says they charged for each document read even they are charging for each document get scan in searching. Please suggest is it gonna charge me a lot of I use firestore in this scenario