0

我是打字稿的新手，我真的希望我的 mount 初始化设置为 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;
4

2 回答 2

0

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

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

  return process.env[key]
}

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

于 2022-02-27T21:23:02.630 回答
0

所有 process.env 值都是string | undefined

使用空值合并重写以解决问题

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

于 2022-02-28T09:24:53.990 回答