小编Álv*_*aro的帖子

有了这个文件夹结构

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80components/\n|  \xe2\x94\x94\xe2\x94\x80Employee/\n|    \xe2\x94\x94\xe2\x94\x80employee.tsx\n|    \xe2\x94\x94\xe2\x94\x80index.ts\n|  \xe2\x94\x94\xe2\x94\x80app.tsx\n

我正在导出类型和组件

员工.tsx

import React, { FC } from 'react'\n\nexport type EmployeeState = {\n  Name: string\n  EmployeeId: number\n}\n\ntype EmployeeProps = {\n  employees: EmployeeState[]\n}\n\nexport const Employee: FC<EmployeeProps> = ({ employees }) => {\n  return (\n    <ul>\n    {\n      employees.map((employee) => (\n        <li key={employee.EmployeeId}>\n          <h2>{employee.Name}</h2>\n        </li>\n      ))\n    }\n    </ul>\n  )\n} \n

然后从index.ts文件Employee夹导出

索引.ts

export { EmployeeState, Employee } from './employee'\n

当我尝试导入时app.tsx

应用程序.tsx

...\nimport …

我正在尝试使用连接到谷歌搜索控制台APIOAuth2

const {google} = require('googleapis');

const auth = new google.auth.OAuth2(
  YOUR_CLIENT_ID,
  YOUR_CLIENT_SECRET,
  YOUR_REDIRECT_URL
);

const searchconsole = google.webmasters({ version: 'v3', auth })

console.log(searchconsole.sites.list({}))

但我明白了：

'Error: No access, refresh token, API key or refresh handler callback is set.'

我找不到对此的可靠参考，我读到刷新令牌已被弃用，是否有可能从节点后端获取站点列表而无需与前端交互？

对于页面上的一个部分,我试图显示两个矩形div,它们在两个方形div之间堆叠,与两个堆叠div的高度一样大,这些div内部是img标签.

我正在使用此标记,因为在移动设备上我希望能够将它们放在带有overflow: hidden父级的未包装的弹性行上,这样我就可以使用滑动代码来转换X轴.我在使用这个标记使用flexbox创建这种桌面布局时遇到了问题(没有网格,需要支持IE11).有没有人用这个标记完成这个布局？谢谢.

 <div class="flex_container">
   <div class='flex_child square'>
     <img...>
   </div>
   <div class='flex-child rect'>
     <img...>
   </div>
   <div class='flex-child rect'>
     <img...>
   </div>
   <div class='flex-child square'>
     <img...>
   </div>
 </div>

鉴于此文件夹结构：

???components/
|  ??Elements/
|    ??Button/
|    ??Input/
|    ??index.ts
|  ??Home/
|    ??home.tsx

我想导出Button，Input因此我可以通过执行以下操作从主组件访问它们：

主页.tsx

import { Button, Input } from '@elements/'

我试过这个：

index.ts（在 Elements 文件夹中）

export { Button } from './Button/button';
export { Input } from './Input/input';

但它不起作用，我明白了：Cannot find module '@elements/' or its corresponding type declarations.即使你解析别名也有效。

配置文件

{
  "compilerOptions": {
    "outDir": "../public",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": …

我在 ES6 上使用了最简单的上下文提供程序，但我无法将其转换为在 TypeScript 项目上使用。我搜索的每个网站在实现 context api 方面都有完全不同的看法。

它只是一个布尔变量和一个设置它的函数，我一直遇到 TypeScript 的问题。

我是否需要更改整个方法才能使其在 TypeScript 上运行？

上下文.js

import React from 'react'
import Reducer from './reducer'

export const LoadContext = React.createContext()

export const LoadProvider = ({ children }) => {
  const [state, dispatch] = React.useReducer(Reducer, {
    load: true
  })

  const setLoad = (load) => dispatch({ type: 'set_load', load })

  return (
    <LoadContext.Provider value={{ load: state.load, setLoad }}>
      {children}
    </LoadContext.Provider>
  )
}

export const useLoadContext = () => React.useContext(LoadContext)

减速器.js

export default (state, action) …

我正在尝试使用 Exceljs 以表格式呈现 Excel 文件，但在打开文件之前收到此警告：

We found a problem with some content in \xe2\x80\x99test.xlsx\xe2\x80\x99. Do you want us to try to recover as much as we can? If you trust the source of this workbook, click Yes.

如果我单击“是”，它会“恢复”文件并且一切都很完美，但我总是在打开之前收到该警告。

仅当我执行多个选项卡时才会发生这种情况，因为单个选项卡工作正常。

import Excel from 'exceljs'\n\nconst tabs = {\n  'FIRST TAB': [\n    { URL: 'https://google.com', FOO: 10 },\n    { URL: 'https://apple.com', FOO: 12.5 }\n  ],\n  'SECOND TAB': [\n    { URL: 'https://google.com', FOO: 10 },\n    { URL: 'https://apple.com', FOO: 22.5 …

之前在这里提出的一个问题，与这个问题的标题完全相同，得到的回答是“你不应该使用那个，而是使用这个”，我想知道它的作用，而不是我还能做什么，这是关于理解不是简单的复制粘贴。

我的问题很简单，这三种方法在创建 Promise 时有什么区别？

const API = (item, fail) =>
  new Promise((resolve, reject) => {
    if (fail) reject(item + ' ...with an error');
    setTimeout(() => resolve(item), 1000);
  });

(async () => {
  const pro1 = Promise.resolve(API('I am inside resolve'));
  const pro2 = Promise.resolve(API('I am inside resolve', true));

  const pro3 = Promise.resolve().then(() => API('I am thenable'));
  const pro4 = Promise.resolve().then(() => API('I am thenable', true));

  const pro5 = new Promise((resolve) => resolve(API('I am a new promise')));
  const pro6 = new Promise((resolve) …

我有一棵树，我正试图递归渲染

tree 变量只是一个例子，它可以根据应用程序获取的数据变得更大。

即使我不知道嵌套将如何获得，我如何才能让 TypeScript 对这棵树上的类型感到满意？

const tree = {
  people: ['Managing Director'],
  children: {
    people: ['Operations Director', 'Head of Client Services'],
    children: {
      people: ['Senior Developer']
    }
  }
}

interface IList {
  people: string[],
  children: string[]
}

interface IData {
  data: IList[]
}

const List: FC<IData> = ({ data }) => (
  <ul>
    {data.people.map((person) => ( <li>{person}</li> ))}
    {!data.children ? null : <List data={data.children} />}
  </ul>
)

function App() {
  return (
    <>
      <List data={tree} />
    </>
  )
} …

我正在尝试设置文件上传的类型，但我不敢相信我必须定义文件对象上的每个属性

export type FileProps = {
  path: string 
  lastModified: number
  slice: () => void
  stream: () => void
  text: () => void
  arrayBuffer: ArrayBuffer
  name: string
  size: number
  type: string
}

const [files, setFiles] = useState<FileProps[]>([])

我上传了一些文件并将它们存储在状态中，但是当我尝试添加到表单时

const formData = new FormData()

for (const file of files) {
  formData.append('files', file)
}

我收到文件错误

我有一个使用常规 JS 的节点 Web 应用程序项目。

我正在尝试使用jsconfig.json. 我尝试使用节点默认值，Subpath imports即使它确实有效，vscode intellisense 也停止工作。

我发现你可以使用jsconfig.json所以我设置了这个文件

{\n  "compilerOptions": {\n    "target": "es6",\n    "module": "commonjs",\n    "baseUrl": "./",\n    "paths": {\n      "@controllers/*": ["node/controllers/*"],\n    },\n  },\n  "exclude": ["node_modules"]\n}\n

在我的上package.json我添加了

"type": "module",\n

我的文件夹结构是

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node\n\xe2\x94\x82    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80controllers\n\xe2\x94\x82         \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 foo.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 server.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 jsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

但是当我尝试导入时server.js

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node\n\xe2\x94\x82    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80controllers\n\xe2\x94\x82         \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 foo.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 server.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 jsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

foo.js

export const foo = \'Hello server\'\n

我明白了

node:internal/process/esm_loader:74\n …

我试图onInput在我创建的通用输入组件上使用，每次添加 DOM 事件时，我都会与 TypeScript 发生一些冲突。

这是我的组件，Input.tsx：

import React, { ChangeEvent, FormEvent } from 'react'

import { InputStyled } from './Input-style'

type InputProps = {
  name: string
  value: string | number
  type?: string
  placeholder?: string
  onInput?: (e: FormEvent<HTMLInputElement>) => void
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
}

export const Input = (props: InputProps) => (
  <InputStyled
    type={props.type ? props.type : 'text'}
    name={props.name}
    id={props.name}
    placeholder={props.placeholder}
    value={props.value}
    onInput={props.onInput}
    onChange={props.onChange}
   />
)

我遇到的问题是，当使用该onInput事件时，它说Property 'value' does not exist on type 'EventTarget' …

我正在尝试发送元素上的单击事件，但 TypeScript 不喜欢any并发出警告，因此我正在尝试，React.MouseEvent<HTMLElement>但随后它抛出了错误。

`Property 'id' does not exist on type 'EventTarget'.`

const closeWindow = (e: React.MouseEvent<HTMLElement>) => { 
  if (e.target.id === 'modal-window') ...
}

return (
  <div id='modal-window' onClick={closeWindow}>
    <div id='modal-content'>...</div>
  </div>
)

我不明白为什么这不起作用

const addRate = (e: { charCode: KeyboardEvent }) => {
 if (e.charCode >= 48) {
      ...
 }
}

我明白了：

'Operator '>=' cannot be applied to types 'KeyboardEvent' and 'number'.ts(2365)'

但e.charcode确实是 aKeyboardEvent并且这在我的应用程序的其他地方有效

const addString = (e: { target: HTMLInputElement }) => ....