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

npm i --save-dev jest \
    @types/jest \
    babel-jest \
    @babel/core \
    @babel/preset-env \
    @babel/preset-typescript
// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
  ],
};