typescriptsanitizer

How do I use the new Sanitizer API from Typescript?


This works all fine on Codepen, even without window. I am surprised about that because I am used to be forced to use ẁindow.x

if ( 'Sanitizer' in window ) {
    console.log( 'sani', 'Sanitizer' in window );
}

const c = new Sanitizer();
console.log( c );

const sa = ( window as any ).Sanitizer;
console.log( 'sa', sa );

I have this set and works works perfectly fine. I tried everything but by compiled script refuses to know about the Sanitizer API. I tried calling it in all kinds of way, with - nothing. Do i need to set something in tsconfig? WTF is going on?

export {};
declare global {
    interface Window {
        works: inlineScriptJSON;
        Sanitizer?: any;
    }
}

    console.log(
        'window.Sanitizer',
        window.Sanitizer,
        // 'new window.Sanitizer()',
        // new window.Sanitizer()
    );

window.Sanitizer is undefined.

new window.Sanitizer() gives this error:

Uncaught TypeError: window.Sanitizer is not a constructor

My tsconfig.base.json the values in "lib" are underlined and it says on hover they are not acceptable options. I know this think is new but it works in Codepen so what are they doing?

{

    /* https://github.com/WordPress/gutenberg/blob/trunk/tsconfig.base.json */
    "compileOnSave": false,
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "allowSyntheticDefaultImports": true, // to make it compatible with babel
        "jsx": "preserve",
        "target": "esnext",
        "module": "esnext",
        "lib": [
            "esnext",
            "DOM",
            "DOM.Iterable",
            "DOM.Sanitizer",
            "Sanitizer",
        ],
        "declaration": true,
        "declarationMap": true,
        "composite": true,
        "emitDeclarationOnly": true,
        "isolatedModules": true,

        /* Strict Type-Checking Options */
        "strict": true,

        /* Additional Checks */
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "importsNotUsedAsValues": "error",

        /* Module Resolution Options */
        "moduleResolution": "node", // because of webpack

        /* This needs to be false so our types are possible to consume without setting this */
        "esModuleInterop": false,
        "resolveJsonModule": true,

        "typeRoots": [ "./node_modules/@types" ],
        "types": [],
        
        /* nico */
        "strictNullChecks": true,
        "noImplicitAny": false,
        "removeComments": true,
        "allowUnreachableCode": false,
        "sourceMap": true,
    },
    "exclude": [
        "**/build/**",
        "**/test/**"
    ],
}



Solution

  • I know why. DAMNIT. This API only works in a HTTPS context and my local dev site is not HTTPS. So its actually really not there and it has nothing to do with typescript.