Angular 14升级至15后出现TypeScript类型错误求助

AI 小北

2026-7-19

Angular 14升级到15后TypeScript错误解决方案

错误详情

第一个错误：

Error: node_modules/preact/src/jsx.d.ts:1078:3 - error TS2552: Cannot find name 'PictureInPictureEvent'. Did you mean 'PictureInPictureEventHandler'?

第二个错误：

node_modules/preact/src/jsx.d.ts:1124:3 - error TS2344: Type 'TargetedPictureInPictureEvent<Target>' does not satisfy the constraint 'TargetedEvent<EventTarget, Event>'.

当前tsconfig配置

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "target": "ES2022",
    "downlevelIteration": true,
    "declaration": false,
    "importHelpers": true,
    "lib": [
      "ES2022",
      "dom"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "watch": false
  },
  "exclude": [
    "node_modules"
  ],
  "angularCompilerOptions": {
    "strictInjectionParameters": true
  }
}

问题原因与修复方案

核心原因

这两个错误源于TypeScript版本与Preact类型定义不兼容：Angular 15默认搭载的TypeScript 4.8+对PictureInPictureEvent这类DOM类型的定义做了调整，但当前项目依赖的Preact版本未适配该变化。

修复步骤

升级Preact到兼容版本
直接更新Preact到最新版，官方已修复TypeScript 4.8+的类型适配问题：
```
npm update preact --save
# 或使用yarn
yarn upgrade preact
```
补充DOM类型依赖（备选方案）
若暂时无法升级Preact，可通过补充类型包解决：
- 安装Picture-in-Picture的类型定义：
```
npm install @types/dom-picture-in-picture --save-dev
```
- 修改tsconfig.json的lib字段，添加dom.iterable：
```
"lib": [
  "ES2022",
  "dom",
  "dom.iterable"
]
```
校验TypeScript版本匹配
Angular 15要求TypeScript版本范围为4.8.2~4.9.x，确认项目版本符合要求：
```
npm list typescript
```
若版本不符，安装指定版本：
```
npm install typescript@~4.9.0 --save-dev
```