uni-app 可选链（proposal-optional-chaining）在ts文件中无法使用编译到H5报错

开发环境	版本号	项目创建方式
Windows	windows10 家庭中文版	HBuilderX

操作步骤：

新建一个uniapp项目，使用默认配置

新增tsconfig：

{  
  "compilerOptions": {  
    "target": "esnext",  
    "module": "esnext",  
    "moduleResolution": "node",  
    "strict": true,  
    "jsx": "preserve",  
    "sourceMap": true,  
    "skipLibCheck": true,  
    "resolveJsonModule": true,  
    "esModuleInterop": true,  
    "lib": ["esnext", "dom"],  
    "types": [],  
    "baseUrl": ".",  
    "paths": {  
      "~/*": ["src/*"]  
    }  
  },  
  "vueCompilerOptions": {  
    "experimentalCompatMode": 2  
  },  
  "include": ["**/*.ts", "**/*.d.ts", "**/*.*.d.ts", "**/*.tsx", "**/*.vue"],  
  "exclude": ["node_modules", "dist"]  
}

新建a.ts

export default function(){  
    const obj = {name:'Joe'};  
    console.log(obj?.name);  
};

在App.vue里import a

import consoleA from  './a.ts';  
export default {  
    onLaunch: function() {  
        console.log('App Launch')  
        consoleA();  
    },  
    onShow: function() {  
        console.log('App Show')  
    },  
    onHide: function() {  
        console.log('App Hide')  
    }  
}

编译报错：

15:29:35.395 语法错误: D:\git\test\a.ts: Unexpected token (3:22)  
15:29:35.398   1 | export default function () {  
15:29:35.398   2 |     const obj = { name: 'Joe' };  
15:29:35.401 > 3 |     console.log(obj ? .name : );  
15:29:35.401     |                       ^  
15:29:35.404   4 | }  
15:29:35.404   5 | ;  
15:29:35.407   6 |   
15:29:35.411       at a.ts:3  
15:29:35.411 [tsl] ERROR in D:\git\test\a.ts(5,18)  
15:29:35.414       TS1109: Expression expected.  
15:29:35.414 [tsl] ERROR in D:\git\test\a.ts(5,23)  
15:29:35.417       TS1005: ':' expected.

预期结果：

正常编译

实际结果：

报错

15:29:35.395 语法错误: D:\git\test\a.ts: Unexpected token (3:22)
15:29:35.398   1 | export default function () {
15:29:35.398   2 |     const obj = { name: 'Joe' };
15:29:35.401 > 3 |     console.log(obj ? .name : );
15:29:35.401     |                       ^
15:29:35.404   4 | }
15:29:35.404   5 | ;
15:29:35.407   6 |
15:29:35.411       at a.ts:3
15:29:35.411 [tsl] ERROR in D:\git\test\a.ts(5,18)
15:29:35.414       TS1109: Expression expected.
15:29:35.414 [tsl] ERROR in D:\git\test\a.ts(5,23)
15:29:35.417       TS1005: ':' expected.

更多关于uni-app 可选链（proposal-optional-chaining）在ts文件中无法使用编译到H5报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 1楼

请问官方有人管么？

更多关于uni-app 可选链（proposal-optional-chaining）在ts文件中无法使用编译到H5报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼

这个问题是因为 uni-app 的 TypeScript 编译配置没有启用可选链语法支持。

从错误信息可以看出，编译器将 obj?.name 错误地解析为了三元运算符 obj ? .name :，这说明当前的 TypeScript 配置没有正确识别可选链语法。

解决方案：

在 tsconfig.json 的 compilerOptions 中添加以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": [],
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    },
    // 添加这两行配置
    "experimentalDecorators": true,
    "useDefineForClassFields": false
  }
}

关键点说明：

添加 "experimentalDecorators": true：启用实验性装饰器支持，这有助于 TypeScript 正确解析新的语法特性。
设置 "useDefineForClassFields": false：避免类字段的编译问题。
确保 TypeScript 版本：检查项目中 TypeScript 的版本，建议使用 3.7 或更高版本，因为可选链语法是从 TypeScript 3.7 开始支持的。

如果添加上述配置后仍然报错，可以尝试以下额外步骤：

在项目根目录创建或修改 babel.config.js：

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry'
    }]
  ],
  plugins: [
    '@babel/plugin-proposal-optional-chaining'
  ]
}

uni-app 可选链（proposal-optional-chaining）在ts文件中无法使用 编译到H5报错