Effortlessly importing types in your TypeScript Nuxt.js application: A simple guide

Question

Effortlessly importing types in your TypeScript Nuxt.js application: A simple guide

Hey there, I'm trying to incorporate my custom types into my Nuxt.js application and have them automatically imported into every component I create. I made changes to tsconfig.js by adding

"include": ["**/*.ts", "**/*.vue", "**/*.tsx"]

and placed my types in types/index.d.ts:

export interface IUser {
name: string
address: string
}

However, during the compilation of the app, I encounter an error stating Cannot find name 'IUser' at let users: IUser[] = []. I really don't want to manually import the type IUser into every component. Is there a way for Nuxt.js to automatically import the type definition globally?

typescript nuxt.js

Answer 1

Answer №1

Global Declaration.

// types/index.d.ts
declare global {
  interface IUser {
    name: string
    address: string
  }
}

export {};

// components/whatever.vue
<script setup lang="ts">
const props = defineProps<{ user: IUser }>();
</script>

Answer 2

Global Declaration.

// types/index.d.ts
declare global {
  interface IUser {
    name: string
    address: string
  }
}

export {};

// components/whatever.vue
<script setup lang="ts">
const props = defineProps<{ user: IUser }>();
</script>

Effortlessly importing types in your TypeScript Nuxt.js application: A simple guide

Answer №1

Similar questions

Looking to arrange an object by the value of a nested object in Typescript/Angular?

What is the correct method for decreasing the width of tab labels in Angular Material?

Is there a way to retrieve the request URL within the validate function of the http strategy?

How can you tackle this issue without relying on 'arguments' and instead using the rest parameter syntax?

Creating a completely dynamic button in Angular 6: A step-by-step guide

Unlocking the power of module augmentation in Typescript: Enhancing library models within your app domain

Definitions for nested directories within a main index.d.ts

Retrieve a specific category within a method and then output the entire entity post adjustments

Is it possible to integrate a collection of libraries along with external dependencies into Vite?

Trigger parent Component property change from Child Component in Angular2 (akin to $emit in AngularJS)

Error message when using Typescript with Redux Saga: "Cannot use 'then' property on type 'void'. TS2339"

Issue: Unable to inject a service into a subscriber in NestJS

There is no corresponding index signature for type 'string' in Type

How can parameters be implemented in Angular similar to NodeJs Express style?

Using Typescript, the type T or a function that returns T can be utilized in various scenarios

Search for words in a given string that begin with the symbol $ using Angular 2

Testing the integration of socket.io with Angular through unit tests

Enhancing State Management with CombineReducers in TypeScript

How can I customize a Vue component slot in Storybook 8.0.6 using Vue 3.4 and Typescript to display various subcomponents within a story?

When using TypeScript, a typed interface will not permit a value that is not within its specified string literal type