小编Jer*_*me 的帖子

想知道如何定义 API POST Nextjs 路由的主体类型以便从类型安全中受益？在 NextApiRequest 中，body 被定义为“any”并且 NextApiRequest 不是通用的

使用强制类型，但这根本不干净

运行 NextJs12 和 typescript 4.4.4

import { NextApiRequest, NextApiResponse } from "next";

interface IBody {
  test: string;
  value: number;
}

const handler = async (
  req: NextApiRequest, <-- whish to have something here like NextApiRequest<TQuery, TBody,..>
  res: NextApiResponse
): Promise<void> => {
  const { body } = req;
  console.log(body as IBody); <--this is not safe at all

  res.status(200).json({ text: "Hello" });
};

export default handler;

webpack-dev-server error cannot find module 'webpack-cli/bin/config/config-yargs在 yarn 工作区中安装 webpack、webpack-cli 和 webpack-dev-server 时出现错误“ '”。在 repo 中安装它们时没有这个问题。

我检查了根节点和子节点中的 node_modules。看来这个 config/config-yargs 文件安装在CHILD的 node_module 中，但没有安装在ROOT 中。

我必须手动将它从子级复制到根目录才能使其正常工作。

有没有办法正确安装它？

我的根 package.json ：

{
    "private": true,
    "workspaces": [
        "packages/server",
        "packages/front", <-- webpack has been installed her
    ],
    "name": "test",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

子 package.json 的一部分

{
"devDependencies": {
        "@babel/core": "^7.8.4",
        "@babel/preset-env": "^7.8.4",
        "@babel/preset-react": "^7.8.3",
        "@babel/preset-typescript": "^7.8.3",
        "typescript": "^3.7.5",
        "webpack": "^4.41.6",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
}

webpack.config.js

const …

使用 React-Router V6，我尝试强类型化正在使用的数据加载器函数params以及useLoaderData钩子。

到目前为止，我必须做以下难看的事情：

A- 对于useLoaderData，需要强制 returnType ：

const profil = useLoaderData() as TProfil;

export declare function useLoaderData<T>(): T;我想创建一个通用的钩子而不是导出会更干净declare function useLoaderData(): unknown;

B-对于数据加载器，接收到的参数的类型是什么？不得不强迫any，但这太丑了。如何强类型化并在某处声明 params 由来自路由定义中的参数名称的“id”组成？

const careerDetailDataLoader = async ({ params }: any): Promise<TProfil> => {
  const { id } = params;
  const res = await fetch(`http://localhost:4000/careers/${id}`);

  const data: TProfil = await res.json();
  return data;
};

<Route path=":id" element={<CareerDetailsPage />} loader={careerDetailDataLoader} />

使用 JSDoc 实现通用打字稿功能的最佳方法是什么？下面是我尝试过的方法，但我想有一个最好的方法，因为有一个信息说JSDoc types may be moved to TypeScript types.ts(80004)

我点击了“快速修复”，但这搞乱了功能。

/**
 * @description  execute in parallel promises by chunks
 * @type <ReturnType> : the type of data to be returned
 * @param arrayPromises : the array of promises to execute
 * @param chunks : the value of chunks
 * @returns : an array of returnType
 */
const runPromisesInParallelbyChunks = async <ReturnType>(
    arrayPromises: Array<() => Promise<ReturnType>>,
    chunks: number
): Promise<ReturnType[]> => {
    const result: ReturnType[] = [];
    let resu: …

尝试在 type-graphql 中创建表示 String、Number 和 Boolean 类的联合类型，但失败了。知道怎么做吗？

export const NonObjectType = createUnionType({
    name: "NonObjectType",
    types: () => [String, Boolean, Number] as const,
    resolveType: (value) => {
        console.log(value, typeof value);
        switch (typeof value) {
            case "string":
                return String;
            case "number":
                return Number;
            case "boolean":
                return Boolean;
            default:
                return undefined;
        }
    },
});

@ArgsType()
@InputType("FindSomeArgsUnitInputType")
export class GqlArgsFindSomeArgsUnit<T extends object>
    implements IFindSomeArgsUnit<T> {
    @Field(() => String, { defaultValue: "id" })
    column: keyof T;

    @Field(() => [NonObjectType], { defaultValue: [""] })
    values: Array<string …

[4月19日编辑]

我创建了一个CODESANDBOX来显示问题，当然，这不会发生在沙箱中。 此代码与我的代码之间的唯一区别是，我在 SANDBOX 示例中复制了 Button 组件的代码，而在我的应用程序中，Button 组件是从库（与应用程序属于同一纱线工作区）导入的。该库是使用 webpack 和 babel 构建的，不包括 React 和 Material-UI

externals: {
    react: "react",
    "react-dom": "react-dom",
    "react-router": "react-router",
    "react-router-dom": "react-router-dom",
    "@material-ui/core": "@material-ui/core",
    "@material-ui/icons": "@material-ui/icons",
    "@material-ui/lab": "@material-ui/lab",
    "@material-ui/styles": "@material-ui/styles",
    formik: "formik",
},

检查浏览器中的组件显示了沙箱和我的应用程序之间的样式差异：

在两侧，类以相同的方式应用于组件：

在沙箱中

在我的应用程序中

但在 sandBox 上，MuiButtonBase-root background-color被覆盖MuiButton-root background-color

而我的应用程序中恰恰相反。似乎MuiButton-root backGroundColor被覆盖了MuiButtonBase-root background-color

但是，如果我通过仅导入 并重新导出它而不更改任何内容（仅传递请求组件的特定道具）来RecreatedButton在应用程序中创建一个组件，则样式将正确应用，如沙箱示例中所示。Button component of my UI Library

这对我来说有点奇怪......

为什么会有这样的行为？

只需按组件导入和重新导出

   import {
        Button as LibraryButton,
        EButtonTypes,
        IButtonProps, …

如何覆盖 Scaffold SnackBar 的标准持续时间以在 MS 中应用我自己的持续时间。我看不到办法

is EventsToAddAlbumScreen.ShowSnackbarEventToAddAlbumScreen -> scaffoldState.snackbarHostState.showSnackbar(
                    message = event.message,
                    duration = SnackbarDuration.Short // <-- want to change this to 500ms for example
                )

亲爱的，

我试图找到如何使用服务器发送的 hhtp-only cookie 在客户端管理身份验证。

我不明白的是，由于前端无法访问 HTTP only cookie，前端如何知道用户（仍然）已通过身份验证？

到目前为止，找到的唯一解决方案是在身份验证成功时向客户端发送令牌。并将此令牌保存在客户端创建的第二个 cookie 中。

但在我看来，我在做同样的工作两次。

1- 在服务器端管理仅 HTTP cookie，尤其是到期日期 2- 在客户端也管理第二个 cookie 的到期日期。

如何避免这种情况？我想根据仅 HTTP 服务器 cookie 管理客户端的身份验证。如果有服务器cookie，则继续，否则重定向到登录页面。

我在服务器端使用 node/express 并对客户端做出反应。session存储在redis中，双方都是使用证书的HTTPS。

谢谢

我在我的Material-UI的水平滚动条上苦苦挣扎。尽管我阅读了文档并在此处浏览了一些主题，但找不到解决该问题的方法。水平滚动条从不显示。

这是我的代码的子集：

App.js

     <div style={{ height: '100vh', overflow: 'auto', width: '600px' }}>
        <TableHeader headerlabels={headers} datarows={resu} />
     </div >

TableHeader.js

const HeaderTableCell = styled(TableCell)`
&&{
    background-color:#092e68;
    color:white;
    top:0;
    position:sticky;
}
`;

const CustomTableCell = styled(TableCell)`
&&{
    background-color:white;
    color:#092e68;
}
`;


// key, label
const TableHeader = props => {
    const { headerlabels, datarows } = props
    return (
        <Table>
            <TableHead >
                <TableRow key={uuid.v4()} >
                    {headerlabels.map((label) =>
                        (<HeaderTableCell {...props} key={label}>{label}</HeaderTableCell>))}
                </TableRow>
            </TableHead>
            <TableBody >
                {datarows.map((value, id) =>
                    (
                        <TableRow key={id} >
                            {headerlabels.map((label) …