小编juh*_*uha的帖子

与 Typescript 反应:“never[]”类型的参数不可分配给“StateProperties”类型的参数 | (() => StateProperties)'

我正在练习打字稿。对于后端,我使用了 node express typescript,对于前端,我使用了 react typeScript。我从后端获取数据并尝试在我的浏览器上呈现它。我收到一个错误:property 'name' does not exist on type 'never'. TS2339。我认为这个错误来自打字稿。这是错误可视化

这是我的后端设置

import express = require("express");
import cors = require("cors");
const app = express();
app.use(cors());
const port = 8080;
app.get("/", (req, res) =>
  res.send([
    {
      name: "John",
      age: 36
    },
    {
      name: "alex",
      age: 27
    }
  ])
);

app.listen(port, () => console.log(`server running port ${port}`));
Run Code Online (Sandbox Code Playgroud)

这是我的 React 组件

    import React, { useEffect, useState } from "react";

interface StateProperties {
  name: string;
  age: number;
} …
Run Code Online (Sandbox Code Playgroud)

express typescript reactjs react-tsx

7
推荐指数
1
解决办法
4870
查看次数

打字稿:“从不”类型上不存在“title”属性

我正在练习 React 原生打字稿。我从jsonplaceholer API获取数据并添加到我的组件状态。映射状态并尝试在我的手机上呈现后。但是我在终端上收到打字稿错误:property "title" does not exist on type 'never'.

这是我的应用组件

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, Image } from "react-native";

export default function App() {
  const [state, setstate] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/photos");
    const data = await response.json();
    setstate(data);
  };

  return (
    <ScrollView style={styles.body}>
      <View style={styles.container}>
        {state.map(list => {
          return <Text>{list.title}</Text>; …
Run Code Online (Sandbox Code Playgroud)

typescript react-native expo

3
推荐指数
1
解决办法
1262
查看次数

反应打字稿:eslint 最大长度自动修复不起作用

我正在尝试设置 React typescript 的 eslint 设置,其中代码的最大长度为 80,如果代码超过 80,那么它将断行,代码将自动转到下一行。但似乎我的 eslint max-lenght 自动修复不起作用。我只是去警告,当我点击快速它只是禁用整个组件。目前,我的代码看起来像这样,我一直向右滚动以查看所有代码。附注。我删除了更漂亮的扩展名。

这是我的 .eslintrc.js 设置

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  parserOptions: {
    jsx: true,
    useJSXTextNode: true
  },
  plugins: [
    '@typescript-eslint',
    "react",
    "react-hooks"
  ],
  settings: {
    react: {
      version: "999.999.999" // no latest option, 999.999.999 as a hack
    }
  },
  rules: {
    semi: ["warn", "always"],
    indent: "off",
    "@typescript-eslint/indent": ["warn", 2],
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/interface-name-prefix": 0,
    "@typescript-eslint/no-empty-interface": 0,
    "react/jsx-uses-vars": 1,
    "quotes": "off",
    "@typescript-eslint/quotes": ["warn", "backtick", …
Run Code Online (Sandbox Code Playgroud)

typescript eslint

3
推荐指数
2
解决办法
9357
查看次数

标签 统计

typescript ×3

eslint ×1

expo ×1

express ×1

react-native ×1

react-tsx ×1

reactjs ×1