小编Mat*_*hen的帖子

我在这里找到了一个解决方案: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": …

如果我有以下带有 defaultProp 的按钮

export interface IButton {
  variant: 'action' | 'secondary';
}

export const Button = styled('button')<IButton>`
  background-color: #fff;

  ${props =>
    props.variant === 'action' &&
    css`
      color: blue;
    `};

  ${props =>
    props.variant === 'secondary' &&
    css`
      color: gray;
    `};
`;

Button.defaultProps = {
  variant: 'action',
};

有办法打字吗？当尝试使用它时

<Button>Hello</Button>

Typescript 抱怨没有传递变量，有没有办法使用样式组件输入 defaultProps？

当我使用以下样式的组件时

import styled from 'styled-components';

const CarouselContainer = () => {
    return styled.div`
        & .slick-prev, .slick-next {
            position: absolute;
            z-index: 1;
            top: 50%;
        }
        & .slick-prev::before, .slick-next::before {
            font-size: 35px;
        }
        & .slick-prev {
            left: 5%;
        }
        & .slick-next {
            right: 5%;
        }
        & .slick-slide {
            height: 371px;
            position: relative;
        }
        & .slick-slide img {
            height: 371px;
            object-fit: cover;
            object-position: 0 0;
        }
        @media all and (min-width: ${providedProps => providedProps.theme.minWidthMediumDevice}) {
            & .slick-slide {
                height: unset;
                position: unset;
            }

            & …

https://www.typescriptlang.org/docs/handbook/declaration-merging.html

上述链接提供了有关与接口合并的声明的信息。我希望能够使用具有通用组件的界面来做到这一点。我目前正在使用 Typescript 3.0.3。

这做我想要的，但我不明白为什么我不能用声明合并做同样的事情。

interface MyRouteComponentProps<P, C extends StaticContext = StaticContext> extends RouteComponentProps<P, C> {
    loadCandidateFromQueryParam: (candidateId: number) => void
}

class CandidateDetailContainer extends React.Component<MyRouteComponentProps<RouteMatchProps>, {}> {

    public componentWillMount() {
        this.props.loadCandidateFromQueryParam(Number(this.props.match.params.candidateId));
    }

为什么这不起作用？

interface RouteComponentProps<P, C extends StaticContext = StaticContext> {
    loadCandidateFromQueryParam: (candidateId: number) => void
}

class CandidateDetailContainer extends React.Component<RouteComponentProps<RouteMatchProps>, {}> {

它似乎完全覆盖了 RouteComponentProps 的整个定义，而不是合并它们。我收到与从未使用过的 P 和 C 相关的错误（如果合并了定义，那么我希望这些错误会消失，因为它们在主定义中使用）。然后我收到一个关于“匹配”字段不存在的错误。同样，原始定义中存在的另一个字段。

作为参考，这里是我试图合并的原始定义。

export interface RouteComponentProps<P, C extends StaticContext = StaticContext> {
  history: H.History;
  location: H.Location;
  match: match<P>;
  staticContext: C | …

我对使用TypeScript和Webpack还是比较陌生，但是不幸的是，我的类型声明似乎一直无法解决，因此一直遇到问题。

简单来说，我的项目是一个ASP.NET MVC React应用程序，它使用NPM，TypeScript和Webpack来管理JavaScript依赖项。我遇到的问题是，尽管我的项目可以成功编译，但我180 errors看起来像这样。

TS2717    (TS) Subsequent property declarations must have the same type. 
Property 'webview' must be of type
'DetailedHTMLProps<WebViewHTMLAttributes<HTMLWebViewElement>,
HTMLWebViewElement>', but here has type
'DetailedHTMLProps<WebViewHTMLAttributes<HTMLWebViewElement>,
HTMLWebViewElement>'.

Run Code Online (Sandbox Code Playgroud)

这是错误控制台的图片：

现在，如果我通过单击类型并按“转到定义”仔细看一下，可以清楚地看到我的项目为同一类型定义了两个引用，如下所示：

问题在于，这两个文件似乎都是我的项目tsconfig.json文件的要求，因为如果没有它们，它们将无法编译。

我的tsconfig.json看起来像这样：

{
  "compilerOptions": {    
    "module": "commonjs",    
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "lib": [ "es5", "es2017", "dom"]
    "removeComments": true,
    "typeRoots": [
      "/node_modules/@types",
      "/Types/"
    ]

  },
  "compileOnSave": false,
  "exclude": [
    "/node_modules/",
    "/bin",
    "/obj"
  ]
}

我的package.json文件如下所示：

{
  "name": "fungalai",
  "version": "1.0.0",
  "dependencies": {
    "react": "16.4.2",
    "react-dom": "16.4.2" …

首先让我开始，我是 TypeScript 的新手，我的眼睛不习惯错误类型和/或编译问题

这是我的第 73 行

this.ranks = new Array(13).fill(0).map(function (_) { return []; });

这是我的tsconfig

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2015",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["es2015", "DOM"],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. …

我有一个非常基本的有状态组件,我正在使用重构来向我的组件添加多个HOC(在我的示例中,我仅使用一个来简化).由于某些原因,打字稿给我一个关于我的道具进入我的组件的错误.我怎样才能摆脱这个错误？

这是我的代码:

import * as React from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';

interface IStoreState {
  readonly sessionState: {
    authUser: { email: string; }
  }
}

interface IAccountPageProps { 
  authUser: { email: string } 
}

const AccountPage = ({ authUser }: IAccountPageProps ) =>
    <div>
      <h1>Account: {authUser.email}</h1>
    </div>

const mapStateToProps = (state: IStoreState) => ({
  authUser: state.sessionState.authUser,
});

export default compose(
  connect(mapStateToProps)
)(AccountPage);

而我得到的错误是:

Argument of type '({ authUser }: IAccountPageProps) => Element' …

我有Electron + Angular应用程序。我想将Typescript用于Electron，所以我有main.ts文件，并想使用“ tsc main.ts”将其编译为main.js。但是，出现以下错误：

node_modules/@types/selenium-webdriver/remote.d.ts：139：29-错误TS2304：找不到名称“地图”。

仍然会生成main.js，并且当我运行电子时无需使用tsc命令。但是，我希望它由一个脚本运行而没有任何错误。

我的tsconfig.json包含：

{
 "compileOnSave": false,
 "compilerOptions": {
  "baseUrl": "./",
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "module": "es2015",
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
    "node_modules/@types"
   ],
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

我已经尝试了目标和库配置的各种组合（例如es6），但没有成功。

有人可以帮忙吗？非常感谢！

在 TypeScript 外部模块声明（整个.d.ts文件或declare module另一个文件中的块）中，默认情况下，即使未标记 ，也会导出所有符号export。Luke Pighetti发现添加export { ... }语句可以抑制这种行为，以便仅export导出标记的符号。

例子my-module.d.ts：

export const a = 1;
declare const b = 2;
export {};

consumer.ts:

import { a } from "./my-module";  // OK
import { b } from "./my-module";  // Error

此行为可能有用。这是故意的，还是我应该报告而不是鼓励人们依赖的 TypeScript bug？