类型不可分配给类型 'IntrinsicAttributes & MoralisProviderProps'

Question

我是打字稿新手，我真的希望将安装时的初始化设置为 true，有谁知道为什么它只让我将其设置为 false？这是错误：

Type '{ children: Element; appId: string | undefined; serverUrl: string | undefined; initializeOnMount: true; }' is not assignable to type 'IntrinsicAttributes & MoralisProviderProps'.
  Types of property 'appId' are incompatible.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.ts(2322)

MoralisProvider 的类型签名是

const MoralisProvider: ({ children, appId: _appId, serverUrl: _serverUrl, jsKey, dangerouslyUseOfMasterKey, plugins, environment, getMoralis, options: { onAccountChanged }, 
initializeOnMount, }: MoralisProviderProps) => JSX.Element

组件安装的代码

import MoralisProvider
import type { AppProps } from 'next/app';
import { MoralisProvider } from 'react-moralis';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MoralisProvider
      appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID}
      serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_ID}
      initializeOnMount
    >
        <Component {...pageProps} />
    </MoralisProvider>)
}

export default MyApp;

Answer 1

所以它只是期望一个字符串，因此使用模板文字解决了打字稿警告：

      appId={`${process.env.NEXT_PUBLIC_MORALIS_APP_ID}`}
      serverUrl={`${process.env.NEXT_PUBLIC_MORALIS_SERVER_URL}`}

Answer 2

Typescript 突出显示的问题不是与 initializeOnMount 相关，而是与 appId 相关。使用 process.env 返回一个对象，其值可能存在也可能不存在。您可能希望在安装之前提取这些值并断言它们存在。您可以使用简单的东西，例如

const getSetupEnv = (key: string): string => {
  if (!process.env[key]) {
    throw Error("handle me")
  }

  return process.env[key]
}

棘手的部分是知道如果抛出异常该怎么办，但这取决于项目的其余部分。

Answer 3

所有 process.env 值都是 string | undefined

使用nullish合并重写来解决

import MoralisProvider
import type { AppProps } from 'next/app';
import { MoralisProvider } from 'react-moralis';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MoralisProvider
      appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID ?? "AppId Undefined Fallback"}
      serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_ID ?? "ServerUrl Undefined Fallback"}
      initializeOnMount
    >
        <Component {...pageProps} />
    </MoralisProvider>)
}

export default MyApp;

提示

使用MoralisProviderProps注入应用程序的问题。创建一个 types/next.d.ts 文件，然后按如下方式填充它：

import type { NextComponentType, NextPageContext } from "next";
import type { AppInitialProps } from "next/app";
import type { Router } from "next/router";
import type { MoralisProviderProps } from 'react-moralis';

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>;
    router: Router;
    __N_SSG?: boolean | undefined;
    __N_SSP?: boolean | undefined;
    __N_RSC?: boolean | undefined;
    pageProps: P & {
       moralisProps: MoralisProviderProps;
    };
  };
}

如果您只想将 appId 和 serverUrl 作为 props 传入，则创建一个自定义类型以传递给 _app

import type { NextComponentType, NextPageContext } from "next";
import type { AppInitialProps } from "next/app";
import type { Router } from "next/router";
import { MoralisProvider } from 'react-moralis';

export declare const customAppProps: {
  appId: string | undefined;
  serverUrl: string | undefined;
} = {
  appId: process.env.NEXT_PUBLIC_MORALIS_APP_ID,
  serverUrl: process.env.NEXT_PUBLIC_MORALIS_SERVER_ID
};

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>;
    router: Router;
    __N_SSG?: boolean | undefined;
    __N_SSP?: boolean | undefined;
    __N_RSC?: boolean | undefined;
    pageProps: P & {
      customProps: typeof customAppProps;
    };
  };
}

然后将 _app 填充为注意

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MoralisProvider
      appId={pageProps.customProps.appId}
      serverUrl={pageProps.customProps.serverUrl}
      initializeOnMount
    >
        <Component {...pageProps} />
    </MoralisProvider>)
}

export default MyApp;

——这对于全局上下文提供者特别有用，例如 apollo 客户端的规范化缓存对象或用于身份验证的会话或 jwt 的状态