首页 > 解决方案 > 将 typescript 特定语句转换为 javascript

问题描述

我想通过 keycloak 服务器为我的 nextjs 前端进行身份验证。我找到了这个关于如何做到这一点的好例子。不幸的是,该示例是用打字稿编写的,我正在尝试对其进行调整,以便可以在用 javascript 编写的应用程序中使用它。由于我对 TS 了解不多,我不知道如何转换以下两个 TS 语句,以便它们在 JS 中运行:

import type { AppProps, AppContext } from 'next/app'

interface InitialProps {cookies: unknown}

因为接口导入类型不能在 JS 中使用。

我希望有人可以在这里帮助我。干杯

标签: javascriptreactjstypescriptnext.js

解决方案


在普通的 js/React 中,它会是这样的

import cookie from "cookie";
import { SSRKeycloakProvider, SSRCookies } from "@react-keycloak/ssr";

const keycloakCfg = {
  url: "http://localhost:8080/auth",
  realm: "Test",
  clientId: "react-test",
};

function MyApp({ Component, pageProps, cookies }) {
  return (
    <SSRKeycloakProvider
      keycloakConfig={keycloakCfg}
      persistor={SSRCookies(cookies)}
    >
      <Component {...pageProps} />
    </SSRKeycloakProvider>
  );
}

function parseCookies(req) {
  if (!req || !req.headers) {
    return {};
  }
  return cookie.parse(req.headers.cookie || "");
}

MyApp.getInitialProps = async (context) => {
  // Extract cookies from AppContext
  return {
    cookies: parseCookies(context?.ctx?.req),
  };
};

export default MyApp;


推荐阅读