网站搜索

node.js - SPFx Webpart - node_modules/@types/ [prop types] 和 [react] index.d.ts：gulp 构建时出现大量 "error TS1005"

所以我正在构建一个 SPFx Web 部件，其中一个功能是显示链接预览。我使用了这个库来完成这个任务。我不得不更改包“styled-components”的版本，并更新我的“react”(16.4.18)和“react-dom”(16.0.9)以使其工作。在进行这些更改并运行gulp build后，我收到了以下错误列表：

[10:21:13] [tsc] typescript version: 2.4.2
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(27,38): error TS1005: '=' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,46): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,75): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(29,99): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,54): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,78): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,81): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,97): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,122): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,130): error TS1128: Declaration or statement expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(31,138): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,48): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,49): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,50): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,68): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(44,69): error TS1005: ')' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,30): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,54): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/prop-types/index.d.ts(46,57): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2297,27): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2298,14): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2298,28): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2299,9): error TS1109: Expression expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2300,9): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2301,9): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2302,5): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2302,12): error TS1005: ')' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,49): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,76): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2314,99): error TS1005: ';' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2315,13): error TS1128: Declaration or statement expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,13): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,17): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,44): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2316,45): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,17): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,21): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,51): error TS1005: ',' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2318,52): error TS1005: ':' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2320,21): error TS1005: '(' expected.
[10:21:17] Error - [tsc] node_modules/@types/react/index.d.ts(2320,24): error TS1005: ')' expected.
[10:21:17] Error - 'tsc' sub task errored after 3.75 s
 exited with code 2

这个 GitHub 问题在某种程度上和我的类似，建议我将 TypeScript 版本更新到 2.3.4 或以上。

还有一个我目前找不到的 GitHub 问题建议将 TypeScript 版本更新到 2.8.x 或以上。

我的 TypeScript 版本是 3.1.3。我在本地（项目的 node_modules 文件夹中）和全局都安装了相同的版本。正如你可能注意到的，在构建开始时我仍然会得到输出

[tsc] typescript version: 2.4.2

我已经将 “package.json” 文件以及 yarn.lock 文件中所有与 typescript 相关的条目修改为 “3.1.3” 或 “~3.1.3”，之前它们分别是 “2.4.1” 或 “2.4.2” 或 “~2.4.1” 或 “~2.4.2”。根据我所读到的，这与 typescript 2.8 及以上版本才支持的定义/声明语法有关。例如，问题中的其中一行是：

 Error - [tsc] node_modules/@types/prop-types/index.d.ts(27,38): error TS1005: '=' expected.

export const nominalTypeHack: unique symbol;

我对 TypeScript 和 Node 总体上还比较新，所以这可能是导致我不知道如何解决这个问题的另一个原因。

如果有更多信息需要提供，我会很乐意这样做。提前感谢所有的建议和回答。

答案＃1

我快速进行了网页搜索，发现了几个讨论帖（例如，1，2）表明 SPFx 构建系统将人们锁定在旧版本的 TypeScript。我没有看到解决方案。

一种可行的方法是将你的代码分成两部分，一部分与 React 交互，另一部分与 SPFx 交互，使用较新的 tsc 版本自己将第一部分编译成 JavaScript，然后在通过 SPFx 构建系统编译第二部分时包含生成的 JavaScript 文件。我对 SPFx 构建系统一无所知，不清楚这是否可行；如果你尝试后遇到具体问题，我可能能够提供帮助。

另一种方法是使用与你的 TypeScript 版本兼容的较旧版本的 @types 包，但它们可能缺少你需要的功能。例如，对于 TypeScript 2.4.2，你可以通过运行 npm install @types/[email （或 npm install -D @types/[email ；详情请参见此处关于两者区别的说明）来安装 @types/prop-types 的 ts2.4 标签。

相关文章