Typescript newbie can't get Vue app to see his Type.

F. L. Speeking — Tue, 25 Jun 2024 15:47:44 +0000

Hello, everyone. I am developing a Vue 3 app with Vuetify 3 and Pinia. I'm functional on all of those but far from massively experienced with them. I'm trying to add Typescript to the mix because I'm quite excited about the good things Typescript does with respect to type safety.

My app, especially the main Pinia store, makes heavy use of a type which I'll call Foo since the real name isn't important anyway. Foo is a pretty simple object consisting of just two numbers and two strings, and no methods for the moment since I want to get a Type without methods working first; I'll add the methods after I have got the basic version of Foo working. (The Pinia store is already complete and working wonderfully in Javascript as are my components.) I am having a great deal of trouble figuring out how and where to export and then import this Foo type. (By the way, I know from the Typescript manual that interfaces are preferred over types so I'm quite willing to use an interface if that is better in this case. However, my initial sense of things is that a Type will be sufficient for my needs.)

I'll be using Type Foo in both my Pinia store and in various components of my Vue app to ensure that any Foo objects conform to expectations. I should also mention that I am developing in VS Code, use Vite to scaffold my projects, and intend to use ES modules rather than JSCommon modules.

So, with all that in mind, I've gone ahead and tried to write the code for Type Foo. I put it in a new subdirectory right below src, called types, and put it in a file called Foo.d.ts. (I'm very confused still about when you use a .ts suffix and when you should use a .d.ts suffix so please correct me if I'm wrong!)

My definition of Foo looks like this:

export Type Foo = {
  field1: number;
  field2: string;
  field3: string;
  field4: number
}

My Pinia store, which is the heaviest user of Foo, is at src/store/Tracker.ts. The import statement I'm using to pick up Foo is:

import { Foo } from './types/Foo';

For what it's worth, I've tried several variations of that import but all of them result in that same error that this one does: Typescript error 2307, cannot find module or its corresponding type definitions.

My tsconfig.json, as generated by Vite is:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": [
       "src/*"
      ]
     }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

What do I need to do differently?

DEV Community: F. L. Speeking

Typescript newbie can't get Vue app to see his Type.