Elm-ts-interop-pro Demo and Setup Tutorial

Show and Tell
11

I’m having trouble getting it to apply the rules in VSCode. My setup is slightly different, but I’m not sure which part of the difference is causing it.

It seems like with your setup it’s just automatically inferring the right types just by including the types file.

Here’s what part of mine looks like (I’m using Parcel V1 for my app generally):

import { Elm } from '../elm/Site.elm'
import { ElmApp, FromElm } from './utils/definitions/site'

const targetDiv = document.getElementById('elm-site')

const app: ElmApp = Elm.Site.init({
  node: targetDiv,
  flags: {
    current_time: new Date().getTime()
  }
})

app.ports.interopFromElm.subscribe((fromElm: FromElm) => {
  switch (fromElm.tag) {
    case "reportError":
      Errors.report(fromElm.data)
      break
  }
})

For a while TypeScript didn’t like the .elm import, but used this trick to get it to allow that. I’m still new-ish to TypeScript so I may be missing obvious things.

And tsconfig.json (I’m new at using tsconfig as well):

{
  "compilerOptions": {
    "strict": true,
    "module": "es2020", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "allowJs": true,
    "checkJs": true,
    "allowUmdGlobalAccess": true,
    // "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": true,
    "lib": [
      "dom",
      "es7"
    ],
    "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
    "strictNullChecks": true, /* Enable strict null checks. */
    "strictFunctionTypes": true, /* Enable strict checking of function types. */
    "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
    "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "esModuleInterop": false, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "skipLibCheck": true, /* Skip type checking of declaration files. */
  },
  "include": [
    "ts/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

As far as I could tell, including a line like /// <reference path="./src/Main/index.d.ts" /> from your example didn’t have an impact on the type detection.

Any idea why it might not be applying the rules with this setup? Specifying fromElm: FromElm for the ports does work for that part, but I’m not sure what to do to specify the rest, especially the Elm app initialization part.