Скачать или смотреть How to Access Typescript Interface Types in Your Database Export

Discover how to effectively access and use database interface types in Typescript without creating new interfaces.
---
This video is based on the question https://stackoverflow.com/q/76636692/ asked by the user 'Wesley Barnes' ( https://stackoverflow.com/u/11865941/ ) and on the answer https://stackoverflow.com/a/76659684/ provided by the user 'Alex Chashin' ( https://stackoverflow.com/u/10016741/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Access interface types inside database interface types file

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Accessing TypeScript Interface Types in Your Database Export

As a beginner in TypeScript, you might find it challenging to work with interface types from database exports, especially when you want to use them without creating redundant interfaces. In this post, we’ll explore how to efficiently access interface values from a Supabase database export in your TypeScript code.

The Problem

You have a TypeScript project where you are working with Supabase as your backend, and you have defined your database interfaces in a types.ts file. While importing the database interfaces, you want to extend them within your application without having to define new interfaces separately.

For example, instead of defining an interface for an Expense object like this:

[[See Video to Reveal this Text or Code Snippet]]

You want to utilize the existing structure from the Database interface, specifically from the public category and the expenses table, to avoid duplication of effort.

The Solution

Understanding the Structure

Given your database interface export, it consists of the following major structure:

Database (root interface)

graphql_public

public

Tables

expenses

logs

notification_preferences

and others...

Each table has defined types for Row, Insert, and Update.

Accessing Interface Types

The standard dot notation does not work directly when trying to access nested interface types. Instead, you should use bracket notation to refer to the inner types of your database.

Here's How You Can Do It:

To extend the Expense interface utilizing the existing types, you can use:

[[See Video to Reveal this Text or Code Snippet]]

With this setup, your Expense interface will now inherit all the properties defined in Database.public.expenses.Row. This is particularly useful for ensuring that your application remains consistent with your database schema.

Practical Example

Let’s take a closer look at how this works in practical terms. Here's how you can define your Expense type in the context of your application:

[[See Video to Reveal this Text or Code Snippet]]

Why Use Bracket Notation?

Flexibility: Bracket notation allows TypeScript to correctly interpret and access nested types, ensuring that type-checking remains intact.

Reduced Redundancy: By extending the existing interface, you avoid duplicating code and maintain a single source of truth for database structure.

Conclusion

Accessing TypeScript interface values from a database export does not have to be tedious. Utilizing the bracket notation allows you to harness the full power of your existing database schemas without the hassle of creating duplicate interfaces. This method not only keeps your codebase clean but also adheres to best practices in application development.

Now that you understand how to work with database interface types in TypeScript using Supabase, you can streamline your development process and focus on building your application with confidence.