What is the process for importing constants from a separate file in TypeScript?

Question

What is the process for importing constants from a separate file in TypeScript?

Sorry for the novice question, but I'm trying to organize my code by moving all constants into a separate file and importing them. However, I can't seem to get it to work despite trying different methods. Most resources I've found online focus on importing classes and functions rather than constants.

In a file called constants.tsx, I have declared various constants:

export const default_bg               = "#2456a5"
export const default_light_font_color = "white"
export const default_lg_font_size     = 11
export const default_md_font_size     = 10
export const default_sm_font_size     = 9
export const default_dark_font_color  = "#000028"
export const default_font             = "arial"

In my main file with the functionality, App.tsx:

import * as React from 'react';
import { Header } from './Header';
import { Body } from './Body';

import * as defaults from 'constants'

...

However, when I try to access these constants using defaults.default_bg, I encounter this error message:

TS2339: Property 'default_bg' does not exist on type 'typeof import("constants")'.

Additionally, when I log defaults in the console, I see:

https://i.sstatic.net/CP0u5.png

This may be a simple issue, but as someone new to TypeScript and JavaScript, I am struggling to resolve it.

typescript

Answer 1

Answer №1

Utilize the import statement to access all values from 'constants'

This code snippet directs node to locate a module named 'constants' inside the /node_modules directory.

To modify this line, update it to:

import * as defaults from './path/to/constants'

The output displayed in the console may vary depending on what is assigned to the defaults variable.

Answer 2

Utilize the import statement to access all values from 'constants'

This code snippet directs node to locate a module named 'constants' inside the /node_modules directory.

To modify this line, update it to:

import * as defaults from './path/to/constants'

The output displayed in the console may vary depending on what is assigned to the defaults variable.

Answer 3

Answer №2

Here is my current approach:

constants.ts

export const settings = {
    primaryColor: "#2456a5",
    lightFontColor: "white",
    largeFontSize: 11,
    mediumFontSize: 10,
    smallFontSize: 9,
    darkFontColor: "#000028",
    fontType: "arial"
} as const;

app.js

import { settings } from "./path/to/constants";
...
console.log('Primary Color: ', settings.primaryColor);

Answer 4

Here is my current approach:

constants.ts

export const settings = {
    primaryColor: "#2456a5",
    lightFontColor: "white",
    largeFontSize: 11,
    mediumFontSize: 10,
    smallFontSize: 9,
    darkFontColor: "#000028",
    fontType: "arial"
} as const;

app.js

import { settings } from "./path/to/constants";
...
console.log('Primary Color: ', settings.primaryColor);

What is the process for importing constants from a separate file in TypeScript?

Answer №1

Answer №2

Similar questions

How come webstorm/react-hook-forms isn't showing me suggested choices for the "name" field?

Issue: property is not accessible on the current object in Angular 5

Displaying continuous hours on the X-Axis within a 24-hour time series using Recharts

Leveraging functionality from an imported module - NestJS

Unable to employ a custom Typescript .d.ts file

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

Creating a websocket handler template for universal use

Improve the Precision of Return Types in Typescript by Specifying Targeted Signatures for Functions with Generic Parameters

Step-by-step guide on adding a command to a submenu through the vscode extension api

An issue has occurred when attempting to import ES Module for setting all values to an object

What is the method for defining the type of a variable without assigning a value to it?

Subclass method overloading in Typescript

The useParams() function encounters difficulty in converting data to number typescript

Incorporate a unique CSS class using a variable in the JSX that is returned

Steps to Transform String Array into Prisma Query Select Statement

Exploring the world of interfaces in nested mapping functions

How can one trigger a service method in nestjs through a command?

Cracking the Code: Demystifying TypeScript Syntax within Angular 4

What sets an Array apart from an Observable Array?

Struggling to retrieve an Object from an HTMLSelectElement within an Angular project