Develop Reference

Dynamically import one Icon using icon-name from react-icons in nextjs/typescript

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?

Property 'opacity' does not exist on type 'IntrinsicAttributes' throwing and error for view Opacity in React native

After writing this sentence, typescript file shows an error on below line.
React-Native 0.60+
There is a new opacity prop that you can pass in:
<View opacity={true ? 0.5 : 1}> </View>
Error stack: error property 'opacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes view opacity.
No overload matches this call. Overload 1 of 2, '(props: ViewProps | Readonly): View', gave the following error. Type '{ children: Element; opacity: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'opacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type '{ children: Element; opacity: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
How to resolve this warning, thanks in advance.

I resolved this error by followin code :
<View style={{ opacity: true ? 0.5 : 1 }}>
Happy Coding !

Styled components + typescript: "as" is not assignable to type IntrinsicAttributes

I have a monorepo that contains a design-system made with styled components. In this design system I have a Heading component that takes a 'level' prop to adjust the CSS of the heading.
Heading
export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
}
export const Heading: React.FC<HeadingProps> = ({ level = '1', children, ...rest }) => {
return (
<HeadingStyled level={level} {...rest}>
{children}
</HeadingStyled>
)
}
Usage
To use this Heading component I simply pass a level to it for the styling and the as prop to adjust what HTML is rendered.
<Heading as="h2" level="2">
Header 2
</Heading>
Problem
When I use this component I get a typescript error on the as prop
Type '{ children: string; as: string; level: "2"; }' is not assignable to type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.
Property 'as' does not exist on type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.
I have tried:
export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
as?: React.Element | JSX.Element | JSX.IntrinsicElements
}

You're close! JSX.IntrinsicElements is an interface whose keys are the labels of the HTML tags. It itself is not a union of all HTML tags.
That means that all you need to do is
interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
// ...
as?: keyof JSX.IntrinsicElements // Note the keyof!
}
Now as's signature is shown by TS as:
(JSX attribute) HeadingProps.as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 156 more ... | undefined
Which means your code will now work exactly as expected
<Heading as="h2" level="2"> // No TS errors! ✅
Header 2
</Heading>
TS playground link

in completion to #Aron's answer , this code working for me (styled-component + styled-system)
{ as?: ComponentType<any> | keyof JSX.IntrinsicElements | string | undefined }

TypeScript error with Symbol.species example from MDN

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?

Issue pluging-in an effect for state management

Managing state is giving errors in my Angular 8.0 app using NgRx 8.2.
export interface AppState {
loggedIn: boolean;
userInfo: IPrincipal;
}
export interface State {
state: AppState;
}
export interface IPrincipal {
email: string;
password: string;
}
I have written a simple Login service that returns the required information
Action has been defined like
export const login = createAction('[Login Initiatied] Login',
props<{ principal: IPrincipal }>()
);
export const loginSuccess = createAction('[Login Success] Login',
props<{ userProfile: IUserProfile }>()
);
export const loginFailure = createAction('[Login Failure] Login',
props<{ message: any }>()
);
Userprofile is just another interface with some more details
export interface IUserProfile {
user: IPrincipal;
first: string;
last: string;
}
When I am trying to plugin an effect
import * as AppActions from './actions/login.action';
login$ = createEffect(() =>
this.actions$.pipe(
ofType(AppActions.login),
map( action => action.principal),
exhaustMap( (principal: IPrincipal) =>
this.loginService.loginUser(principal.email, principal.password).pipe(
map(userProfile => of( AppActions.loginSuccess({ userProfile }))),
catchError(message => of( AppActions.loginFailure({ message })))
)
)
)
);
I tried several things but in my effects for the login$ I am getting these errors
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>>' is not assignable to type 'Observable<Action>'.
Type '{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' is not assignable to type 'Action'.
Property 'type' is missing in type '{}' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
It is somethind obvious I am missing, but just cant get my head around to see what I have missed.
map(userProfile => of( AppActions.loginSuccess({ userProfile })))
It is suppose to return an Observable of Action but it is complaining of not.
I was able to create successfully, by using the earlier version implementation by exporting a class of Action and utilizing that in effect.

You need to return an action from your effect so this line of code
map(userProfile => of( AppActions.loginSuccess({ userProfile })))
You can change to
map(userProfile => new AppActions.loginSuccess({ userProfile }))