Property 'display' must be of type 'FontDisplay', but here has type 'string'

Question

After completing a course at Udemy I am trying to convert my Javascript project (a browser game) to TypeScript.

My package.json:

{
  "dependencies": {
    "@tweenjs/tween.js": "^21.0.0",
    "@types/jquery": "^3.5.16",
    "@types/tweenjs": "^1.0.4",
    "pixi.js-legacy": "^7.2.4"
    "datatables.net-dt": "^1.13.4",
  },
  "devDependencies": {
    "typescript": "^5.1.3"
  }
}

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src/main/typescript/",
    "outDir": "./src/main/resources/js/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true
  }
}

As first I have tried converting a file holding random functions, among others the callbacks for datatables.net -

My incomplete Utils.ts:

declare global {
    let UID: number;
    const COUNTRY: string;
    const SHOW_LINKS: boolean;
    const SHOW_PHOTOS: boolean;
}

export function renderOpenElo(data, typeStr, row, meta) {
    return typeStr === 'display' ? '<SPAN CLASS="xlarge">&rtri;</SPAN> ' + chessPiece(data) : data;
}

export function renderPhotoGiven2(data, typeStr, row) {
    var photo = SHOW_PHOTOS ? (row.photo || row.photo2 || PHOTO_HAPPY) : PHOTO_HAPPY;
    var given2 = SHOW_LINKS ? '<A TARGET="_blank" HREF="/___LANGUAGE___/player-' + row.player2 + '">' + escapeHtml(data) + '</A>' : escapeHtml(data);
    return '<IMG CLASS="avatar" SRC="' + photo + '" ONERROR="brokenImage(this);"><P>' + given2 + '</P>';
}

Unfortunately, when I run npx tsc src/main/typescript/Utils.ts I now get the errors:

node_modules/@types/css-font-loading-module/index.d.ts:22:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'display' must be of type 'FontDisplay', but here has type 'string'.

22         display?: string | undefined;
           ~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:549:5
    549     display?: FontDisplay;
            ~~~~~~~
    'display' was also declared here.

node_modules/@types/css-font-loading-module/index.d.ts:42:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'display' must be of type 'FontDisplay', but here has type 'string'.

42         display: string;
           ~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:8482:5
    8482     display: FontDisplay;
             ~~~~~~~
    'display' was also declared here.

node_modules/@types/css-font-loading-module/index.d.ts:47:35 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

47     interface FontFaceSet extends Set<FontFace>, EventTarget {
                                     ~~~


Found 3 errors in the same file, starting at: node_modules/@types/css-font-loading-module/index.d.ts:22

This confuses me, because I do not even use any fonts in my Javascript game.

The typeStr argument is passed to my callbacks by datatables.net and sometimes has the "display" string as value.

Is this error even related to something I am doing in my newbie TypeScript code?

Answer 1

Fixed the issues by executing once:

npm install --save-dev @types/node
npm install --save-dev @types/css-font-loading-module

Now my package.json looks like the following:

{
  "dependencies": {
    "@pixi/ui": "^0.7.3",
    "@tweenjs/tween.js": "^21.0.0",
    "datatables.net-dt": "^1.13.4",
    "pixi.js-legacy": "^7.2.4"
  },
  "devDependencies": {
    "@types/css-font-loading-module": "^0.0.8",
    "@types/jquery": "^3.5.16",
    "@types/node": "^20.3.1",
    "@types/tweenjs": "^1.0.4",
    "typescript": "^5.1.3"
  }
}