TypeScript usage

Typescript support

puppeteer-extra and most plugins are written in TS, so you get perfect type support out of the box. :)

If in doubt please use the following tsconfig (or compare with yours if you run into import issues):

tsconfig.json:

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es2017",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "sourceMap": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": false,
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "pretty": true,
    "stripInternal": true
  },
  "include": ["./src/**/*.tsx", "./src/**/*.ts"],
  "exclude": ["node_modules", "dist", "./test/**/*.spec.ts"]
}

• Put your .ts files in a src/ subdirectory
• The compiled JS files (after running yarn tsc) will be in dist/

Full example files:

• https://github.com/berstend/puppeteer-extra/issues/85#issuecomment-560867724

---

Troubleshooting

Augmenting Puppeteer Types

With ambient type defs you are able to fix any missing Puppeteer types required in your project.

import ProtocolMapping from "devtools-protocol/types/protocol-mapping"

/**
 * Declare ambient module to augment Puppeteer types.
 * Make sure to bundle this with your project's exported types.
 * @file {typings/puppeteer.ts}
 */
declare module "puppeteer" {
  /** Extend Puppeteer Page type with `_client`. **/
  export interface Page {
    readonly _client: Connection
  }

  /** Define Connection type sourced from Puppeteer lib. **/
  export interface Connection {
    send<T extends keyof ProtocolMapping.Commands>(
      method: T,
      ...paramArgs: ProtocolMapping.Commands[T]["paramsType"]
    ): Promise<ProtocolMapping.Commands[T]["returnType"]>
  }
}

Add your ambient types to your Extra project's tsconfig.json:

   "include": [
        "./node_modules/puppeteer-extra/*.d.ts", // Optional, if any `Extra` types are missing...
        "./node_modules/puppeteer-extra-*/*.d.ts", // Optional, if any `Extra` types are missing...
        "./node_modules/@types/puppeteer/index.d.ts", // Generally shouldn't be needed if added to `devDependencies`...
        "./src/typings/puppeteer.ts", // Add your ambient types...
        "./src" // Your main project...
    ]

Alternate TSConfig

This is a stricter tsconfig.json example for more experienced users:

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "lib": [
      "ES2020",
      "ES2020.BigInt",
      "ES2020.Promise",
      "ES2020.String",
      "ES2020.Symbol.WellKnown",
      "dom"
    ],
    "types": ["node"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "forceConsistentCasingInFileNames": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "resolveJsonModule": true,
    "sourceMap": true,
    "inlineSources": true,
    "strict": true,
    "declarationMap": true,
    "strictNullChecks": true,
    "target": "ES2019",
    "outDir": "lib",
    "rootDir": "src"
  },
  "include": ["src/**/*"],
  "exclude": ["lib", "dist", "build", "node_modules", "test/**/*.spec.ts"]
}