typescript

typescript
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 files from web applications
• QuestionList.tsx

Run in shell:

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

Save to babel.config.js:

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

The import goes inside the declare module block:

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

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

With dpdm:

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

With madge:

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

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

typescript
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]

• https://github.com/type-challenges/type-challenges/issues/13
• https://github.com/piotrwitek/utility-types
• How to exclude getter only properties from type in typescript
• TypeScript conditional types - filter out readonly properties / pick only required properties

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:

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