I am using Dexie with Gatsby, I try to create database in db.ts with the code below, but there is error class constructors must be invoked with 'new' pointing to the line super('newDB'). Any help for solving the error?
export class NewDB extends Dexie {
store0!: Table<Store0>;
constructor() {
super('newDB');
this.version(1).stores({
store0: '++id',
});
}
}
export const db = new NewDB();
Related
I am using MobX 6+ in my project and I have a class with an #observable annotated field that contains class type.
I initialize the type with:
class MyClass {
#observable myObservableField = ClassToInitialize;
problemHere() {
....
const MyType = this.myObservableField;
const TypeInstance = new MyType(); // <-- Error is thrown at this line
....
}
}
class ClassToInitialize {
constructor() {
....
}
}
However I get the following error:
Uncaught TypeError: Class constructor IgnoreRegion cannot be invoked without 'new'
After investigating the issue, it appears to happen due to MobX wrapping the field in a proxy function.
In order to solve the issue, use shallow:
class MyClass {
#observable.shallow myObservableField;
....
}
I am programming a game with React, TypeScript by using the Web Speech API. I use SpeechRecognition and SpeechSynthesisUtterance there is no problem with that but when I test the code with jest I get some type and reference errors like this:
TypeError: SpeechRecognition is not a constructor
and this one
ReferenceError: SpeechSynthesisUtterance is not defined
here is the code
const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
const recognition: any = new SpeechRecognition();
and that is how I use the other api
const utter: any = new SpeechSynthesisUtterance(newSelection);
utter.lang = 'tr-TR';
as I said before, app runs correctly but when I test it got this errors.
That's OK. When you do testing, your runtime doesn't support SpeechRecognition object. It doesn't have it. To fix the issue you must use it only after checking for existence, like here:
if ('SpeechRecognition' in window) {
const x = new SpeechRecognition();
}
However, this is not the best approach, it's repetitive. I would advise creating the simple class that would wrap SpeechRecognition object inside himself and do this checking.
Something like this:
class MySpeechRecognizer {
private readonly _instance: SpeechRecognition | undefined;
constructor() {
if ('SpeechRecognition' in window) { this._instance = new SpeechRecognition() }
}
start() {
if (this._instance) {
this._instance.start()
}
}
}
I have gone through the git for SecureLS, but I find it difficult to define SecureLS in React.
var ls = new SecureLS({ encodingType: 'aes' })
How can I define like this in React.js class component?
With React class components, you can create instances of class within componentDidMount method in class components and store it in class variable
class App extends React.Component {
componentDidMount() {
this.ls = new SecureLS({ encodingType: 'aes' })
}
}
Now you can use ls anywhere in your class with this.ls
P.S. Do keep in mind context issues whenever you use this.ls in class functions. The this inside class functions must refer to the class instance
Actually I am a Android Native Developer. I am new to React-Native. In Java i keep the users data and others data in Singleton Class and access from other activities. Then how i achieve this process in React native for access data's from other components or any alternative of singleton in React native.
I just try this but i received the error like getInstance() not defined.
class AppDelegate {
log = "This is AppDelegate";
static myInstance = null;
static getInstance() {
if (AppDelegate.myInstance == null) {
AppDelegate.myInstance = new AppDelegate();
}
return this.myInstance;
}
}
Thank you.
React is UI library, this isn't its responsibility. The question affects any JavaScript application, not only React.
JavaScript modules and ES modules in particular are evaluated only once under normal circumstances, this makes exports singletons:
// exported for extensibility
export class AppDelegate {...}
// a singleton
export default new AppDelegate;
Singleton class is potentially an antipattern in JavaScript. If there's a need for one object, it could be written as object literal.
Imports are cached, so if you export a class, the class will be cached, if you export an instance, the instance will be cached
If you need a singleton don't use a class at all.
Export the methods as a function instead.
// File app-delegate.js
let privateIstanceValue;
export const method1 = () => //do something;
export const method2 = () => //do something again;
Import using import * as
import * as appDelegate from './app-delegate.js';
I'm trying to get started using TypeScript and Backbone, with all of my classes in separate files, using RequireJS. I have a model and a collection:
EntityModel.ts:
/// <reference path="../modules/backbone.d.ts"/>
export class EntityModel extends Backbone.Model{
}
EntityCollection.ts
/// <reference path="../modules/backbone.d.ts"/>
import em = module("../models/EntityModel");
export class EntityCollection extends Backbone.Collection{
model = em.EntityModel;
}
I get an error message:
public member 'model' of exported class has or is using private type 'em'
I just want to tell it what type of model to use for my collection, but seem to be falling at the first hurdle!
Found the answer: http://typescript.codeplex.com/discussions/405800
Export your imports!
export import em = module("../models/EntityModel");
export class EntityCollection extends Backbone.Collection{
model = em.EntityModel;
}