标签: react-tsx

我在尝试运行测试文件时遇到错误（我正在使用反应打字稿）

  \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here's what you can do:\n     \xe2\x80\xa2 If …

我有一个React项目,我正在从JS转换为TS.我遇到的一个问题是TSX React假设功能组件中定义的所有属性都是必需的道具.

// ComponentA.tsx
class ComponentA extends React.Component<any, any> {
  render() {
    /* Type '{ equalWidth: true; children: Element[]; }' is not assignable to type '{ children: any; className: any; equalWidth: any; }'.
     * Property 'className' is missing in type '{ equalWidth: true; children: Element[]; }'.' */
    return <ComponentB equalWidth />
  }
}

和

// ComponentB.js
const ComponentB = ({ children, className, equalWidth }) => {
  return (...)
}

有没有办法向TS发信号通知JSX组件道具都是可选的？

在settings.json有可能只能格式化*.ts文件有：

"[typescript]": {
    "editor.formatOnSave": true
}

但我无法让它为*.tsx文件工作。

我正在使用 Visual Studio 代码。如何在 .tsx 文件上启用 emmet？

我想要一个简单的

.foo + tab

扩展到

<div className="Foo"></div>

但是，我尝试的任何内容似乎都没有触发上述所需行为的 emmet。

这是我的 VSC 设置：

  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "typescriptreact",
    },

刚开始将 TypeScript 与 React 结合使用。当我导入来自 .tsx 文件的组件时，默认情况下它假定它是 .js 文件。该错误表明该目录中没有 About.js 文件或 Contact.js 文件。此外，TS linter 不允许我将 .tsx 添加到文件路径的末尾。如何解决这个问题？我使用了“npx create-react-app project_name --typescript”。这是我的代码

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './views/Home'
import About from './views/About'
import Contact from './views/Contact'
import Navbar from './components/Navbar'
import Footer from './components/Footer'

const App: React.FC<{}> = () => {
  return (
    <BrowserRouter>
      <Navbar title="Website" links={['About', 'Contact']} color="blue"/>

      <Route exact path="/" component={Home}/>
      <Route path="/home" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>

      <Footer/> …

我在这里找到了一个解决方案:Webpack和Typescript图像导入

但我得到的错误是:

[ts]
Types of property 'src' are incompatible.
  Type 'typeof import("*.png")' is not assignable to type 'string | undefined'.
    Type 'typeof import("*.png")' is not assignable to type 'string'.

我想我需要以某种方式投射导入,但无法弄清楚如何.我在React做这个.我看到该src属性被定义为string | undefined,这就是错误弹出的原因.

这是代码:

import * as Logo from 'assets/images/logo.png';

HTML:

<img src={Logo} alt="" />

并根据上述解决方案定义:

declare module "*.png" {
  const value: string;
  export default value;
}

Tsconfig:

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "lib": ["es5", "es6", "dom"],
    "module": "commonjs",
    "noImplicitAny": false,
    "outDir": "./dist/",
    "sourceMap": …

这是我将 NextJS 项目转换为 TypeScript 时遇到的问题。在我的 中_app.tsx，我遇到了类型错误：Binding element 'pageProps' implicitly has an 'any' type. ts(7031)。该错误可能如下所示：

我知道 StackOverflow 上已经有这个问题的答案，但我写这篇文章是为了让将来的人可以更容易地遇到这个问题。

我正在将 js 迁移到 ts 并且我的修改后的代码出错：

第 26:8 行：解析错误：“>”预期

import React from "react";
import { Route, Redirect, RouteProps } from "react-router-dom";
import {render} from "react-dom"
import {AppProps} from "../App"

function querystring(name: string, url = window.location.href) {
  name = name.replace(/[[]]/g, "\\$&");

  const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i");
  const results = regex.exec(url);

  if (!results) {
    return null;
  }
  if (!results[2]) {
    return "";
  }

  return decodeURIComponent(results[2].replace(/\+/g, " "));
}
export default function UnauthenticatedRoute({ component: C, appProps, ...rest }:
                                                 RouteProps …

版本“typescript”：“^3.9.5”“@types/react”：“^16.9.36”，属性“FC”在类型“typeof React”上不存在我完全没有想法。

在包含 React 的 .tsx 文件中，我不断收到错误：

类型“typeof React”上不存在属性“FC”。

和

我在每个包含 React 的 .tsx 文件中都得到了这个。

我知道它必须是我的 Visual Studio 配置和项目配置的某种组合。

有人知道要检查哪些内容只会影响某些工作站吗？我可以在不泄露公司信息的情况下提供尽可能多的信息。

我正在练习打字稿。对于后端，我使用了 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}`));

这是我的 React 组件

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

interface StateProperties {
  name: string;
  age: number;
} …