#Exporting and importing my first Type

53 messages · Page 1 of 1 (latest)

unkempt bolt
#

Hello! I recently watched a couple of videos on Typescript and I'm eager to apply what I've learned to an existing Vue 3 project I have. My project is based largely on a single Type so I want to make that Type visible to each of the components that uses it and to the Pinia store that makes up the heart of my app. The problem is that I can't figure out how to "see" the Type when it is in a file outside the component or Pinia store. Can anyone here help me figure out what I'm doing wrong? It could be that I'm writing the export wrong, writing the import wrong, putting the Type file in the wrong place, or maybe my tsconfig.json is not right - or maybe all of the above. I'm trying to imitate the manual but it mentions concepts that I don't fully understand. I'm really hoping someone can help as this bottleneck is really slowing me down.

rose bobcat
#

You can import and export types just like normal JS values. Put the types in normal .ts files, don't use .d.ts files at this stage.

unkempt bolt
#

Hi Bert! Thanks for answering. I've tried putting my Type in both a .ts file and a .d.ts file and neither worked. If I post my code here, can you tell me what foolish mistakes I've made?

rose bobcat
#

Sure

#

If you can import a value from the file, then you should be able to import a type too.

unkempt bolt
#

Here's the Type definition and import:

#

export type Transaction = {
id: number;
description: string;
transactionType: string;
amount: number;
}

#

Does that look okay? I'm not sure if I want a "named export" or not since I'm not quite sure what that is.

rose bobcat
#

If you can import JS exports correctly, what I want to know is what are you doing differently between your type import/exports and your value import/exports?

rose bobcat
#

But it's the TS equivalent

unkempt bolt
#

Sorry, I never addressed that part of your remarks. I have done imports of packages like this successfully:

#

import { getSystemLocaleName, findIso4217CurrencyForIso3166Country, createNumberFormat } from '@dnvgl/i18n';

rose bobcat
#

Have you imported values between files from your own project?

unkempt bolt
#

But I don't think I've ever exported/imported my own code.

rose bobcat
#

Ah

#

So what does your import look like, and what messages do you get?

unkempt bolt
#

Here's my import:

#

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

#

The error I get is 2307. Transaction.ts is in src/types. The Pinia store I'm calling it is in src/store/Tracker.ts.

rose bobcat
#

Show me the full error please. You should be able to select and copy it in VS code

unkempt bolt
#

Cannot find module './types/Transaction' or its corresponding type declarations.ts(2307)

rose bobcat
#

Your import needs start with .. to go back up a level

#

Double dot

#

'../types/Transaction.js'

#

The .js extension may be required depending on settings. I'd recommend it because generally we want to use settings that require it

#

And yeah it's .js not .ts

#

Another thing you can do. Remove the import totally. Write type T = Transaction
You should then be able to click on Transaction, go to the blue icon on the left, and select the option to import Transaction. TS will just find it for you and add the correct import

unkempt bolt
#

Wow, I am an idiot! 😉 I tried a few things but I guess I missed that. As soon as I changed that the error went away, even though I have a .ts extension on it. (Changing it back to .js now).

rose bobcat
#

Cool

gray sierra
#

Since you are working in a Vue project, is this project created recently, or is it a legacy project you are working on?

unkempt bolt
#

Thank you, Bert! I'm embarrassed to say how long this has been holding me up as I searched for someone that would answer my question. Now I can get back on track!

rose bobcat
#

I guess a .ts extension might work for type only* imports as they get removed during compilation. But I just use .js as that's needed for ordinary imports.

#

Type only imports*

unkempt bolt
#

Burrito, I'm not sure how to answer that. Originally, I built this app while following a tutorial on YouTube. But it felt like it would benefit from a Pinia store so I replaced the emits and used Pinia instead. Then I changed the components from Vue to Vuetify 3 components. Recently, I decided it was finally time to add Typescript so now I'm adding that.

rose bobcat
#

Actually VS code should offer suggestions to complete your import path too. So if you're not getting any auto complete suggestions you probably made a mistake need to go back until you start getting suggestions

unkempt bolt
#

Bert, if .js is a better choice, I'll stick with that. I REALLY appreciate your help with this!!

rose bobcat
#

You're welcome.

unkempt bolt
#

Why don't I have a scrollbar? I'm trying to scroll back to review this conversation for other gems....

gray sierra
#

Okay, I'm asking because if the Vue project template that comes with npm create vue@latest has path alias and bundler configs all set up, so here are a few things you can do:

  • Instead of using relative imports, you have @/ path alias to point to the root of the src/ folder. So you can always do import ... from '@/types/Transaction' anywhere regardless what the current path of the file is.
  • Instead of explicitly specifying file extension like .ts/.js, the project sets it up with a bundler already so you can omit the file extension altogether.
    And most importantly!
  • You should never waste any second of your time on typing import at all. Your IDE should auto import for you, and if it doesn't, you need to figure that out instead of wasting so much of your time on writing out import line by line.
unkempt bolt
#

Oh, there it is, I was slighly zoomed it and got it as I zoomed out 🙂

gray sierra
#

The last point is the most important point. Imports are something that you 100% do not want to waste any second of your precious time on, it should just be done automatically by your IDE.

rose bobcat
#

@gray sierra obviously knows a lot more about Vue than I do 🙂

unkempt bolt
#

That's exactly what I wanted to review when I misplaced the scroll bar. 🙂

#

Bert, you knew enough to get me out of the ditch so you did fine!

#

Odd! I just went back to my Pinia store and I'm getting that 2307 error again because the Type file is now called Transaction.js. As soon as I changed it back to Transaction.ts, everything was fine again. Looks like .ts is what it wants!

#

Also, Bert, I tried your suggestion of typing: Type T = Transaction. It started offering me completions as soon as I started typing after the = sign so I chose Transaction the list. But that just left me at: Type T = Transaction. It did NOT create an import statement for me. Was it supposed to?

rose bobcat
#

Hmm I think it should create the import when you select it from the list

#

Or if not, and it has a red squiggle, then you should be able to click it, then press the blue icon (lightbulb) on the left to add the import

#

I'm on a phone now so can't really help out much more, but you'll figure it out if you play with it and pay close attention

#

If you happen to have a type with the same name as a built in type, then it might behave differently

#

You can control+click a type to see where it is coming from

rose bobcat