I have these below type defined,
import { ReadonlyDeep } from 'type-fest';
// We don't allow null. undefined is required instead.
export type SimpleArgs = (string | number | boolean | undefined)[];
export type BasicAsyncFunc<U extends SimpleArgs, R> = (...args: U) => Promise<ReadonlyDeep<R>>;
interface Memoized<U extends SimpleArgs, R> extends BasicAsyncFunc<U, R> {
cache_size: () => number;
clear_cache: () => void;
}
I get the SimpleArgs type. It can be an array of primitive values.
What is the signature of BasicAsyncFun and Memoized?
What does
interface Memoized<U extends SimpleArgs, R> extends BasicAsyncFunc<U, R> {
cache_size: () => number;
clear_cache: () => void;
}
mean?
In below defined memoized_async()
options: { ttl: number; size: number },
f: BasicAsyncFunc<U, R>,
): Memoized<U, R> => {
return Object.assign(f, {
cache_size: () => {
return Object.keys(cacheStorage).length;
},
clear_cache: () => {
cacheStorage = {};
},
});
};
What type of arguments does f expects? What's the return type?
I'm trying to dynamically import an icon from react-icons following the this Nextjs instructions but I get an error.
This is my code:
import React, { Suspense } from 'react';
import dynamic from 'next/dynamic';
interface IconProps {
name: string;
}
function Icon({ name }: IconProps) {
const MyIcon = dynamic(() => import('react-icons/fi/index.js').then((mod) => mod[name]), {suspense: true});
return (
<Suspense fallback={`Loading...`}>
<MyIcon />
</Suspense>
);
}
export default Icon
This is the error:
Argument of type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
Type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to type '() => LoaderComponent<{}>'.
Type 'Promise<IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to type 'LoaderComponent<{}>'.
Type 'IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
Types of parameters 'nextProps' and 'nextProps' are incompatible.
Type 'Readonly<{}>' is not assignable to type 'never'.ts(2345)
What am I doing wrong?
In JSX/TSX syntax from react, all inputs seems to be define with the same props declaration which is InputHTMLAttributes:
interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
accept?: string;
alt?: string;
autoComplete?: string;
autoFocus?: boolean;
capture?: boolean | string; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
checked?: boolean;
crossOrigin?: string;
disabled?: boolean;
form?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
height?: number | string;
list?: string;
max?: number | string;
maxLength?: number;
min?: number | string;
minLength?: number;
multiple?: boolean;
name?: string;
pattern?: string;
placeholder?: string;
readOnly?: boolean;
required?: boolean;
size?: number;
src?: string;
step?: number | string;
type?: string;
value?: string | ReadonlyArray<string> | number;
width?: number | string;
onChange?: ChangeEventHandler<T>;
}
I want to define a specific type for only an input of type number so that TypeScript complains if I use a checked or disabled prop on it:
<!-- invalid `checked` prop -->
<input type="number" step="any" min="0" max="100" value="22.33" checked={true} />
So is there already a type definition for that coming from React?
I know that I can just define it like the following but I would prefer to use an official source:
interface InputNumberProps {
type: 'number';
max?: number | string;
min?: number | string;
...
}
I think the simplest solution would be to wrap input into your own component and provide custom type definitions. As far as I know, there is nothing like that coming from official React types. This is done because HTML itself is not strongly typed and it is valid to do something like <input type="number" checked />
As for type definition something like that would suffice:
interface NumberInputProps {
type: "number"
value: number
min?: number
max?: number
}
interface TextInputProps {
type?: "text"
value: string
}
interface CheckboxInputProps {
type: "checkbox"
checked?: boolean
}
type InputProps = NumberInputProps | TextInputProps | CheckboxInputProps
const Input: React.FC<InputProps> = (props) => <input {...props} />
That is a lot of typings for sure (and this does not event include things like events, class names etc). Also, this requires even more JS code if you want to provide stronger types for something like number fields (converting strings into numbers etc.)
If you want to modify the original InputHTMLAttributes (which is a better solution than writing your own types from scratch) interface, overriding and/or omitting some of the fields there are helper types like Omit that would allow you to do so.
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "checked" | "min" | "max"> & (NumberInputProps | TextInputProps | CheckboxInputProps)
You can also split different input types into different components if you find writing too much logic in one component. Do whatever suits you
P.S. on the second note. This sounds like type over-engeneering
You can use and extends the official types:
export type InputProps = React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
>;
interface NumberInputProps extends Omit<InputProps, 'checked' | 'disabled'> {
value: number
}
Using this code you exclude checked and disabled properties and overrides value to allow only numbers instead string | ReadonlyArray | number
With this code (which is equivalent to a sample at MDN):
class MyArray<T> extends Array<T> {
static get [Symbol.species]() { return MyArray }
}
I get this error (with TypeScript 3.8.3):
Class static side 'typeof MyArray' incorrectly extends base class static side '{ isArray(arg: any): arg is any[]; readonly prototype: any[]; from<T>(arrayLike: ArrayLike<T>): T[]; from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[]; from<T>(iterable: Iterable<...> | ArrayLike<...>): T[]; from<T, U>(iterable: Iterable<...> | ArrayLike<...>, mapfn: (v: T, k: nu...'.
Types of property '[Symbol.species]' are incompatible.
Type 'typeof MyArray' is not assignable to type 'ArrayConstructor'.
Type 'typeof MyArray' provides no match for the signature '(arrayLength?: number | undefined): any[]'.
What could be wrong?
When trying to 'ng serve' after configuring angular with firebase, I got the error. Even though I googled this error message but could not find anything. In the error message, this issue is related to the library itself.
user#user-MacBookPro post % ng serve
10% building 3/3 modules 0 activeℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 2.15 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.78 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-02-10T01:58:36.888Z - Hash: 259e06990402b2940abe - Time: 3542ms
ERROR in node_modules/#angular/fire/angularfire2.d.ts:37:49 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
Type 'T[string]' is not assignable to type '(...args: any) => any'.
37 [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? K : never;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:40:49 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
Type 'T[string]' is not assignable to type '(...args: any) => any'.
40 [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? never : K;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:48:78 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? never : K; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? never : { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
Type 'T[string]' is not assignable to type '(...args: any) => any'.
48 [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:48:107 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? never : K; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? never : { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
Type 'T[string]' is not assignable to type '(...args: any) => any'.
48 [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:50:75 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? K : never; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T] : never]' is not assignable to type '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
50 [K in PromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:50:96 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? K : never; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T] : never]' is not assignable to type '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
50 [K in PromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ 「wdm」: Failed to compile.
This is a package.json file. This project is based on Angular8, firebase version 6.
{
"name": "post",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/fire": "^6.0.0-rc.1",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"firebase": "^7.8.1",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.24",
"#angular/cli": "~8.3.24",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"#angular-devkit/architect": "^0.900.0-0 || ^0.900.0",
"firebase-tools": "^7.12.1",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1"
}
}
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';
//angular-fire
import { AngularFireModule } from "#angular/fire";
import { AngularFirestoreModule } from "#angular/fire/firestore";
// in version 6, StorageBucket changes to BUCKET
import { AngularFireStorageModule, BUCKET } from "#angular/fire/storage";
// component list
import { AddpostComponent } from "../app/addpost/addpost.component";
import { MainComponent } from "../app/main/main.component";
import { PostComponent } from "../app/post/post.component";
// forms module for AddpostComponent
import { FormsModule, ReactiveFormsModule } from "#angular/forms";
import {ServiceService } from "./service.service";
#NgModule({
declarations: [
AppComponent,
AddpostComponent,
MainComponent,
PostComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
AngularFireStorageModule,
FormsModule,
ReactiveFormsModule
],
providers: [{ provide: BUCKET, useValue: 'gs://angular-firebase-rxjs.appspot.com' }, ServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }
This error is due to TypeScript type checking the definitions file of the AngularFire library.
Notice the errors are from node_modules/#angular/fire/angularfire2.d.ts:37:49.
To avoid this error you have to set some options in tsconfig.json.
tsconfig:
{
//...
compilerOptions: {
"skipLibCheck": true,
//...
}
}
skipLibCheck: Skip type checking of declaration files.
More info on the skipLibCheck option.
{
//...
compilerOptions: {
"skipLibCheck": true,
//...
}
}
this solution not advisable, its may give some build time error, i got error while build with SSR,
i can suggest you to update "rxjs": ,if your are using * version then update it to 9