ES6很棒，它减少了代码数量，但是打字稿无法正常工作。

如果我想为我的参数实现类型检查，而该参数已经被破坏了多个层次，那岂不是一团糟吗？我认为使用界面一开始就进行检查就足够了，您认为呢？或者，您可以对所有内容进行类型检查，但不要过度使用es6以提高可读性。

<div>
      {response.results.map(({id, name, stock: {day: dayStock, month: monthStock}}) => {
        return(
          <div>
            <p>Item: {name}</p>
            <p>Day Stock: {dayStock}</p>
            <p>Month Stock: {monthStock}</p>
            <br />
          </div>
        )
      })}
    </div>

打字机游乐场：https : //codesandbox.io/s/v06ml2y130

我有一个接收两组数据的组件，它是一个 react-beautiful-dnd DragDropContext，如下所示

 render() {
    let index = -1;
    const dataSetOne = this.props.store!.getdata(1);
    const dataSetTwo = this.props.store!.getData(2);
    const allData = this.props.anotherStore!.getAllData();

    return (
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable droppableId="SIDE_MENU" direction="vertical" type="sections">
            {(provided, snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                onScroll={(e) => e.currentTarget.scrollTop}
              >
                {dataSetOne!.map((a, i) => {
                  index = i;
                  const currentData:any= allData.filter(/*logic*/)
                  return (
                    <MyDraggableComp
                      key={a.id!}
                      aes={a}
                      index={index}
                      data={currentData}
                    />
                  );
                })}
               {dataSetTwo.length > 0 ? (
                <MyDraggableComp
                  key="SOMEKEY"
                  aes={null}
                  index={index + 1}
                  data={dataSetTwo}
                />
                ) : null}
                {provided.placeholder}
              </div>
            )} …

我正在尝试使用 TypeScript 创建一个 React 应用程序。我做了 yarn create react-app (name) --use-pnp --typescript。

TS linter 一直说找不到模块 'react'.ts(2307) 我试过纱线添加 @types/react、纱线添加、重新启动 VScode 等。

import React, { Component } from 'react';
import './App.css';

interface IAppState {
}

interface IAppProps {
}

class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppState) {
  super(props);
  this.state = {
  };
  }


  render() {
    return (
      <div className='App'>
        <h1>Image classification with ML5.js</h1>
      </div>
    );
  }
}

export default App;

我的 package.json

{
  "name": "image-recognition",
  "version": "0.1.0",
  "private": true,
  "installConfig": {
    "pnp": …

我收到错误 TS2322：类型“未知”无法分配给类型“国家/地区[]”

页/国家/index.tsx

完整代码： https: //gitlab.com/fResult/countries-workshop/-/blob/bug/src/pages/Countries/index.tsx

import * as ApiCountries from \'../../services/APIs/countries.api\'\n\nfunction Countries() {\n  const findCountriesCallback = useCallback(() => ApiCountries.findAll(), [])\n  const { execute: fetchCountries, value: countries } = useAsync(findCountriesCallback)\n\n  useEffect(() => {\n    ;(async () => await fetchCountries())()\n  }, [fetchCountries])\n\n  return (\n    <InfiniteScroll\n      items={countries}     // I don\'t understand why `countries` is `unknown` type\n      renderEmptyList={() => (\n        <div className="text-light-text dark:text-dark-text">\n          No Content\n        </div>\n      )}\n      keyExtractor={({ alpha3Code }) => alpha3Code}\n      renderItem={renderItem}\n      className="flex flex-col mt-8 md:flex-row md:flex-wrap gap-14 justify-between"\n …

我正在尝试使用 TS 来试验自定义 Hooks（两者都很新）。这useOption应该采用 anumber或 a boolean，并返回value具有相同类型的 和更改器函数。这是因为选项应该是<input>“范围”类型，并且一个<input>选项应该是复选框（但这可以使用其他输入类型进行扩展）。所以我有一个<Options />这样的组件：

const Options = () => {
  const [pieces, setPieces] = useOption(10);
  const [speed, setSpeed] = useOption(5);
  const [sound, setSound] = useOption(false);

  return (
    <div className='Options'>
      <input
        type='range'
        value={pieces}
        onChange={setPieces}
        min='5'
        max='25' />
      <p>{pieces}</p>
      <input
        type='range'
        value={speed}
        onChange={setSpeed}
        min='1'
        max='10' />
      <p>{speed}</p>
      <input
        type='checkbox'
        value={sound}
        onChange={setSound} />
      <p>{sound ? 'Sound on' : 'Sound off'}</p>
      <button
        className='start-btn'
        onClick={handleClick}>Start game</button>
    </div> …

我目前正在创建一个天气应用程序，您可以在其中存储您最喜欢的位置，这些位置被推送到数组中，而数组又存储在本地存储中。

现在，我想在不同的组件中显示数组的值，但在我的代码中，我不断地发现对象可能为空的错误。

export const FavoritesList: React.FC<any> = () => {
  // const storageFavorites = localStorage.getItem('favorites');
  const lsOutput = document.getElementById('lsOutput');
  for (let i = 0; i < localStorage.length; i++) {
    const key: any = localStorage.key(i);
    const value: any = localStorage.getItem(key);
    // console.log(value);
    value.forEach(
      (item: any) => (lsOutput.innerHTML += `<li>${item}</li><br/>`)
    );
  }
  return (
    <div>
      <ul id="lsOutput"></ul>
    </div>
  );
};

它特别指向 lsOutput.innerHTML

我究竟做错了什么？我目前已将所有内容分配为任意，只是为了首先尝试使其工作。预先非常感谢您！

嗨，我已经在我的项目中安装了 recharts 和 @types/recharts。现在，当我尝试将任何图表导入组件时，出现此错误：

编译失败。

/Users/rmanreza/Projects/portfolio/node_modules/recharts/types/cartesian/YAxis.d.ts TypeScript 错误 /Users/rmanreza/Projects/portfolio/node_modules/recharts/types/cartesian/YAxis.d.ts(1, 13): '=' 预期。TS1005

1 | 从“反应”导入类型 { FunctionComponent, SVGProps }; | ^ 2 | import { BaseAxisProps, AxisInterval } from '../util/types'; 3 | 接口 YAxisProps 扩展 BaseAxisProps { 4 | yAxisId?: 字符串 | 数字;

这是 package.json 的样子：

*

{ "name": "portfolio", "version": "0.1.0", "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.30", "@ testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/recharts": "^1.8.19", "axios": "^0.21.1", "formik": "^2.2.6", "react": "^16.13.1", "react- dom": "^16.13.1", "react-icons": "^3.11.0", "react-router": "^5.2.0", …

我为路径添加打字稿配置：

{
 //.....

 "moduleResolution": "node",
{
  "baseUrl": "app",
  "paths": {
  "@app/*": ["*"],
  "@folder/*": ["folder/*"],

  //Other paths
},

}

为 webpack 添加配置：

  resolve: {
  extensions: [".tsx", ".ts", ".js", ".jsx", ".css", ".json"],
  alias: {
    "@app":path.resolve(__dirname + "../", "app"),
    "@services":path.resolve(__dirname + "../app", "folder")
  },
  modules: [
    "node_modules", path.resolve(process.cwd(), "app")
  ],
  plugins: [
    new TsConfigPathsPlugin({
      configFile: "../tsconfig.json"
    }),
  ],
},

这是我的 .eslint 文件：

"settings": {
"import/resolver": {
  "node": {
    "paths": [
      "app"
    ],
    "extensions": [
      ".ts",
      ".tsx",
      ".jest.tsx",
      ".d.ts"
    ]
  }
}

之后我尝试导入这样的东西：

import …

我将存档名称从“index.ts”更改为“style.ts”，之后总是在 tsconfig.json 中返回此错误：

“找不到文件‘/src/components/AboutContainer/index.ts’。该文件位于程序中，因为：默认匹配包含模式‘**/*’”

这是我的 tsconfig.json：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}