Property 'groups' does not exist on type 'RegExpExecArray | null' when I have set `esnext` in lib of tsconfig.json

[liudonghua123]

TypeScript Version: 3.7.3

Search Terms:

Code

// A *self-contained* demonstration of the problem follows...
// Test this by running `tsc` on the command-line, rather than through another build tool such as Gulp, Webpack, etc.
const pageInfo = `page: 1/12 total: 234 `
const {
  groups: { totalPage, count },
} = /page：1\/(?<totalPage>\d+).* total：(?<count>\d+) /.exec(pageInfo);
console.info({ totalPage, count })

tsconfig.json

{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true,
    // https://www.detroitlabs.com/blog/2018/02/28/adding-custom-type-definitions-to-a-third-party-library/
    "typeRoots": [
      "./@types",
      "./node_modules/@types"
    ],
    "lib": [
      "esnext",
      "es2018.regexp"
    ],
  },
  "include": [
    "src",
    "tools"
  ]
}

Expected behavior:
When run tsc, No error or warning shown

Actual behavior:
error TS2339: Property 'groups' does not exist on type 'RegExpExecArray | null'.

Playground Link:
http://www.typescriptlang.org/play/?target=99&ssl=1&ssc=1&pln=5&pc=35#

Related Issues:
#22082

[liudonghua123]

I also tried microsoft/TypeScript-Website#136 hacks to add lib support to playground, but still got the same error.
Updated link is:
http://www.typescriptlang.org/play/?target=99&lib=lib.esnext.d.ts&ssl=1&ssc=1&pln=5&pc=35#code/MYewdgzgLgBADgQwOYFMCSYBmIYF4YAGiqAXDAIwD05ATDFCFAgDZk0DMALIQFCiSwA3jxgwkAJxABXOBDKD6jFgAVkKADQxQUsLAC+6nnrwxKxFICx-8gB1KACgD8AHgZNmq1AD5rAEwDUAJQAdABUim4Wjk7aut7+AaZBKAAeKMB25hjYAQDcfOAQIMwoQQCWWCB2Cq4qapox+gFAA

[MartinJohns]

Everything works as intended.

exec() returns the union type RegExpExecArray | null. When you have a union type you can only access properties that are present on all types, and null does not have a groups property. When you narrow the type with a type-check for null you can access the groups property.

Following that, the groups property is an indexer, it doesn't has explicit totalPage and count properties. This would require #32098.

[liudonghua123]

@MartinJohns Thank you very much. Now I understand it. 😃

[ahmadxgani]

@liudonghua123 may i know how do you solve it?