software by Stafford Williamsstafford williams

typescript

module resolution

In older typescript projects, when adding or updating modules that have changed the source of their types, Visual Studio Code may no longer be able to resolve the module. To fix this, explicitly set moduleResolution to node in tsconfig.json:

{
    "compilerOptions": {
        "moduleResolution": "node",      
    }
}

browser file access

import { saveAs } from 'file-saver';

export default () => {
    const fileUpload = useRef<HTMLInputElement>(null);
    
    const exportQuestions = () => {
        const fileName = 'questions.json';
        const fileToSave = new Blob([JSON.stringify(questions, null, 4)], {
            type: 'application/json',
        });
        saveAs(fileToSave, fileName);
    }

    const importQuestions = () => {
        if (null !== fileUpload.current) {
            const file = fileUpload.current.files![0];
            if (file) {
                var reader = new FileReader();
                reader.readAsText(file, "UTF-8");
                reader.onload = (evt: ProgressEvent<FileReader>) => {
                    if (evt.target && typeof evt.target.result === "string") {
                        console.log(JSON.parse(evt.target.result));
                    }
                }
            }
        }
    }

    return (
        <input
            ref={fileUpload}
            type="file"
            id="file-upload"
            accept="application/json"
            className={classes.file}
            onChange={() => importQuestions()}
            style={{ display: 'none' }}
        />
    );
}

using import inside module declarations

The import goes inside the declare module block:

// WRONG
import { AnotherClass } from "LibraryB";
declare module "LibraryA" {
  class SomeClass extends AnotherClass {}
}

// RIGHT
declare module "LibraryA" {
  import { AnotherClass } from "LibraryB";
  class SomeClass extends AnotherClass {}
}

generate type declarations from javascript

npx -p typescript tsc .\dist\*.js --declaration --allowJs --emitDeclarationOnly --outDir types

using typescript with jest

Run in shell:

npm i --save-dev jest \
    @types/jest \
    babel-jest \
    @babel/core \
    @babel/preset-env \
    @babel/preset-typescript

Save to babel.config.js:

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
  ],
};

finding circular dependencies

With dpdm:

npx dpdm --no-warning --no-tree ./src/main.tsx

With madge:

npx madge --circular --extensions ts ./src

get readonly keys

type GetReadonlyKeys<T extends Object> = {
  [K in keyof T]: 
    (<S>() => S extends { [Z in K]: T[Z] } ? 2 : 1) extends 
    (<S>() => S extends { -readonly [Z in K]: T[Z] } ? 2: 1) ? never : K
}[keyof T]