TypeScript error error TS2469, error TS2731 solution

Foreword

When creating a Vue3 + TypeScript + vueRouter project, when using route.name in a computed property to get the current page name, error TS2469 and error TS2731 appear in tsc validation

src/components/xx.vue(xx,xx): error TS2469: The '+' operator cannot be applied to type 'symbol'.

src/components/xx.vue(xx,xx): error TS2731: Implicit conversion of a 'symbol' to a 'string' will fail at runtime. Consider wrapping this expressionin 'String(...)'.

On the Internet, I found that there is currently no relevant solution (20220728). After investigation, it is determined that the error may be caused by the type of route.name being inferred as symbol when TypeScript performs type checking. To view the solution, you can directly jump to "Solution"

Error conditions

1. Error source

In the Vue combined SFC writing, use the computed() function to set the computed properties and concatenate them into the required string style

In this case, TypeScript performs type checking and an error TS2469 occurs

src/components/xx.vue(xx,xx): error TS2469: The '+' operator cannot be applied to type 'symbol'.

If the return part of the computed property is written in the following style

 return ` - ${ route.name } Page`;

TypeScript performs type checking with error TS2731

src/components/xx.vue(xx,xx): error TS2731: Implicit conversion of a 'symbol' to a 'string' will fail at runtime. Consider wrapping this expressionin 'String(...)'.

2. Reason search

Use the typeof() function to read the type of route.name and return a string

 console.log(typeof(route.name)); // return string

Use TypeScript Playground to view error conditionsAnd type inference, the result is as follows

The symbol type is a basic data type added to ES6 to avoid overriding properties or methods defined by third-party JavaScript plugins and frameworks

Combining the error TS2469 and error TS2731 error prompts, it is judged that the cause of the error is that TypeScript judges the type of route.name as symbol

The symbol type cannot be concatenated with other strings, so this error is raised

Solution

Convert the route.name inferred as symbol type by TypeScript to string type

Type conversion using JavaScript's String() function

 return ' - ' + String(route.name) + ' Page'; // TypeScript validation passed

Or use TypeScript's as keyword for type assertion

 return ` - ${ route.name as string } Page`; // TypeScript validation passed