Javascript – Property ‘includes’ does not exist on type ‘RouteRecordName’

Problem:

I’m having problems using array includes together with typescript .
Many sources say to add the ES2016 lib option (or higher) to tsconfig.json, I tried several options in lib and target, but none of them work.

ES2016.Array.Include, ES2016, ESNext.Array, ESNext, I tried with just one of the options, I tried using all the options, and nothing

I tried changing the target too, but nothing seems to help, I’m using the tsconfig.json settings recommended for vue

Should I use another way, other than includes , or is it a typescript “problem” ?

code snippet reporting error:

import { useRoute } from 'vue-router'

const isRead = computed(() => {
    route.name!.includes('create') || route.name!.includes('edit') ? false : true
})

tsconfig.json

{
  "compilerOptions": {
    // "noImplicitAny": true,
    "allowJs": true,
    "outDir": "build",
    // As long as you are using a build tool, we recommend you to author and ship in ES modules.
    // Even if you are targeting Node.js, because
    //  - `CommonJS` is too outdated
    //  - the ecosystem hasn't fully caught up with `Node16`/`NodeNext`
    // This recommendation includes environments like Vitest, Vite Config File, Vite SSR, etc.
    "module": "ESNext",
    // We expect users to use bundlers.
    // So here we enable some resolution features that are only available in bundlers.
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    // `allowImportingTsExtensions` can only be used when `noEmit` or `emitDeclarationOnly` is set.
    // But `noEmit` may cause problems with solution-style tsconfigs:
    // <https://github.com/microsoft/TypeScript/issues/49844>
    // And `emitDeclarationOnly` is not always wanted.
    // Considering it's not likely to be commonly used in Vue codebases, we don't enable it here.
    // Required in Vue projects
    "jsx": "preserve",
    "jsxImportSource": "vue",
    // `"noImplicitThis": true` is part of `strict`
    // Added again here in case some users decide to disable `strict`.
    // This enables stricter inference for data properties on `this`.
    "noImplicitThis": true,
    "strict": true,
    // <https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#verbatimmodulesyntax>
    // Any imports or exports without a type modifier are left around. This is important for `<script setup>`.
    // Anything that uses the type modifier is dropped entirely.
    "verbatimModuleSyntax": true,
    // A few notes:
    // - Vue 3 supports ES2016+
    // - For Vite, the actual compilation target is determined by the
    //   `build.target` option in the Vite config.
    //   So don't change the `target` field here. It has to be
    //   at least `ES2020` for dynamic `import()`s and `import.meta` to work correctly.
    // - If you are not using Vite, feel free to overwrite the `target` field.
    "target": "ESNext",
    // For spec compilance.
    // `true` by default if the `target` is `ES2020` or higher.
    // Explicitly set it to `true` here in case some users want to overwrite the `target`.
    "useDefineForClassFields": true,
    // Recommended
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    // See <https://github.com/vuejs/vue-cli/pull/5688>
    "skipLibCheck": true,
  },

}

Solution:

Per the Vue Router API, RouteRecordName can be of type string | symbol. If during runtime it happens that route.name is a symbol, attempting to use includes function would result in an error, so TypeScript is forcing you to deal with that issue right now at compile time.

If you are 100% sure that route.name during runtime will be a string, you can use coercion to tell TypeScript to treat it as such.

const isRead = computed(() => {
  return (route.name as string).includes('create') || 
    (route.name as string).includes('edit') ? false : true
})

If you’re not sure, you can check if it’s a string first by checking typeof

const isRead = computed(() => {
  if (typeof route.name === 'string') {
    return route.name.includes('create') || route.name.includes('edit')
      ? false
      : true
  } else return false
})