League of Extraordinary FoundryVTT Developers•3mo ago

Lowkey been trying to create a module

Lowkey been trying to create a module with the Foundry types but keep funning into issues. Either my tsconfig is never set up right, or when it finally is, then none of my types actually register as types within my project and create build errors (unless I force it to reference things with /// <reference types="fvtt-types" /> directive at the top of every single .ts file, but that's just kinda really annoying to have to do) Been bashing my head trying to get the setup for this right for the last couple days and I keep going in circles and dunno what Im really doing wrong here if anyone can help. Attatched tsconfig for reference

tsconfig.json

29 Replies

LukeAbby•3mo ago

So what do the errors look like?

MemelyOP•3mo ago

Im legitimately only having trouble with my typescript engine just recognizing types, really

LukeAbby•3mo ago

Okay I'm not having problems so let me walk through some pre-requisite questions: 1. Have you run npm install? 2. What's your npm/node version? Get that with npm --version and node --version respectively 3. What is your editor's TypeScript version. With VSCode you get that with opening the command pallete (by default that's ctrl+shift+P) and running "Select TypeScript Version". I don't want you to change anything, just report what you currently see. I see 5.8.3

MemelyOP•3mo ago

Yup, so all the basic stuff. Node version: 11.4.1 - npm install - delete node libraries and reinstall - ctrl+shift+p > restart ts server Hell, Ive even just now copy/pasted the working example tsconfig from that repo you sent, but it still yells at me in there that its not setup right. The amount of circles Ive gone in to troubleshoot things, ask devs, and just get literally the base-level module with types working is kinda nuts

LukeAbby•3mo ago

I think I see the issue lol Your include was "scripts/**/*" but it needed to be "src/scripts/**/*" These are the edits I'd make:

{
  "compilerOptions": {
    "rootDir": "./src/scripts", // You don't _need_ rootDir but if you want to use it then it needs to be the correct path.
    "outDir": "./dist",
    "target": "esnext",
    // lib was deleted because it's implied by `target`
    "module": "esnext",
    "moduleResolution": "bundler",
    "types": ["fvtt-types"],
    "strict": true
  }
  // node_modules is automatically included. Leaving off `includes` will automatically include everything.
}

{
  "compilerOptions": {
    "rootDir": "./src/scripts", // You don't _need_ rootDir but if you want to use it then it needs to be the correct path.
    "outDir": "./dist",
    "target": "esnext",
    // lib was deleted because it's implied by `target`
    "module": "esnext",
    "moduleResolution": "bundler",
    "types": ["fvtt-types"],
    "strict": true
  }
  // node_modules is automatically included. Leaving off `includes` will automatically include everything.
}

MemelyOP•3mo ago

Even just copy pasting this:

MemelyOP•3mo ago

I cri :cat_cry:

LukeAbby•3mo ago

try reloading the window you just reinstalled your node modules maybe the tsc server needs to catch up for me it's all working rn (well besides some errors I'll help you solve)

MemelyOP•3mo ago

Restarted window and the tsc server. No dice. Idk, I suppose its at least somewhat relieving to hear that maybe its just my IDE being a dick, really

LukeAbby•3mo ago

Can you tell me what's in node_modules/fvtt-types/? like open the folder and screenshot it

MemelyOP•3mo ago

LukeAbby•3mo ago

Can you try npx tsc?

MemelyOP•3mo ago

Mmm now Im getting those earcut errors. Just shut down the whole thing and booted it back up and the error is gone now in the tsconfig at least

LukeAbby•3mo ago

Okay those are to be expected! sweet So I'll probably make a more tailored fix for this at some point, so that you don't have to do this but I'm getting the earcut errors too Go ahead and add this to your package.json:

  "overrides": {
    "@types/earcut": "3.0.0"
  }

  "overrides": {
    "@types/earcut": "3.0.0"
  }

re-install and then the earcut errors should go away The issue is that Foundry and PIXI define conflicting types for earcut. I made a PR to PIXI to fix it but until Foundry updates its PIXI version I can't update You will immediately run into another issue which I have pre-empted the fix for but let me know if the earcut issues go away

MemelyOP•3mo ago

Cool. I can actually see the game and .settings property too being typed now which is awesome. Second question I had was on the registering of settings? Before I would just do this:

gameInstance.settings.register(CONSTANTS.MODULEID, "GPTApiKey", {
        name: "GPT API Key",
        hint: "Insert your GPT API Key here",
        scope: "client",
        config: true,
        type: String,
        default: ""
    });

    gameInstance.settings.register(CONSTANTS.MODULEID, "GPTOrganization", {
        name: "GPT Organization",
        hint: "Insert your GPT Organization here",
        scope: "client",
        config: true,
        type: String,
        default: ""
    });

gameInstance.settings.register(CONSTANTS.MODULEID, "GPTApiKey", {
        name: "GPT API Key",
        hint: "Insert your GPT API Key here",
        scope: "client",
        config: true,
        type: String,
        default: ""
    });

    gameInstance.settings.register(CONSTANTS.MODULEID, "GPTOrganization", {
        name: "GPT Organization",
        hint: "Insert your GPT Organization here",
        scope: "client",
        config: true,
        type: String,
        default: ""
    });

But currently get errors because I suppose the register method changed types and expects something different?

LukeAbby•3mo ago

Yeah! That's what I was pre-empting

MemelyOP•3mo ago

I couldn't figure that bit out for sure haha

LukeAbby•3mo ago

Create a file like configuration.ts and write this:

export {};

declare module "fvtt-types/configuration" {
  interface SettingConfig {
    "your-module-name.your-setting-name": YourSettingType;
  }
}

export {};

declare module "fvtt-types/configuration" {
  interface SettingConfig {
    "your-module-name.your-setting-name": YourSettingType;
  }
}

this configuration.ts file is for letting fvtt-types know about common things it can't just track for you

MemelyOP•3mo ago

I tried doing something like that in the src/types directory? Did I set that up correctly?

/** Handy-Dandy – custom settings namespace **/
import "fvtt-types";

declare global {
  namespace ClientSettings {
    interface Values {
      /**
       * Settings owned by the Handy-Dandy module
       */
      "handy-dandy": {
        GPTApiKey: string;
        GPTOrganization: string;
      };
    }
  }
}

export {};

/** Handy-Dandy – custom settings namespace **/
import "fvtt-types";

declare global {
  namespace ClientSettings {
    interface Values {
      /**
       * Settings owned by the Handy-Dandy module
       */
      "handy-dandy": {
        GPTApiKey: string;
        GPTOrganization: string;
      };
    }
  }
}

export {};

LukeAbby•3mo ago

Ahhh Yeah, that changed at the tail end of v12, my bad should've looked for that

MemelyOP•3mo ago

No prob no prob Should I change it to declare module instead? (And the Settings Config type?)

LukeAbby•3mo ago

Yeah

/** Handy-Dandy – custom settings namespace ****************************************/
export {};

declare module "fvtt-types/configuration" {
  interface SettingConfig {
    /**
     * Settings owned by the Handy-Dandy module
     */
    "handy-dandy.GPTApiKey": string;
    "handy-dandy.GPTOrganization": string;
  }
}

export {};

/** Handy-Dandy – custom settings namespace ****************************************/
export {};

declare module "fvtt-types/configuration" {
  interface SettingConfig {
    /**
     * Settings owned by the Handy-Dandy module
     */
    "handy-dandy.GPTApiKey": string;
    "handy-dandy.GPTOrganization": string;
  }
}

export {};

You can get rid of the type argument to register at that point e.g. settings.register<string> -> settings.register it'll "just know" I noticed you do game.settings! a fair bit

MemelyOP•3mo ago

Yeah, was kinda because of a lot of these issues I've been having lolol Literals were the only way to get it working properly for some reason

LukeAbby•3mo ago

They're typed as nullish too. It's not possible at runtime because you're in "ready" but unfortunately fvtt-types can't tell that. 1. Set up a getGame function or something similar in order to safely get game. Common options are to throw if game doesn't exist or have an async function that waits. 2. Add interface AssumeHookRan { ready: true } in declare module "fvtt-types/configuration" in your configuration.ts file

MemelyOP•3mo ago

Sounds good! Well at long last, things build, so Im happy with this currently. Im sure I might have some questions in the future, so Ill come back here into this thread just in case so I dont clutter up things in the future if there is You've been super helpful!

LukeAbby•3mo ago

glad I could help! if there's no conversation going on no need to thread and open a new thread, else I might not see

MemelyOP•3mo ago

Sounds good!

LukeAbby•3mo ago

This tsconfig has a lot of goodies imo btw: https://github.com/LukeAbby/foundry-starter-template/blob/main/tsconfig.json

GitHub

foundry-starter-template/tsconfig.json at main · LukeAbby/foundry-...

An opinionated starter template. Contribute to LukeAbby/foundry-starter-template development by creating an account on GitHub.

LukeAbby•3mo ago

In particular, noUncheckedIndexedAccess, forceConsistentCasingInFileNames, noUncheckedSideEffectImports and more I feel all should be on in basically all projects

Gaming

Programming

Lowkey been trying to create a module

Did you find this page helpful?