Is it possible to define a variable within an array declaration?

I am trying to construct an array for the week, with each element being an instance of my "work hours" class.

However, when attempting to define them within the array directly, I encounter an error. Upon inspecting the JS file, I noticed that the array is interpreted as 

const week = [let, sunday = new WorkHours,

Is there a way to resolve this issue?

class WorkHours {
    day: string;
    night: string;
}

let sunday = new WorkHours;
let monday = new WorkHours;
let tuesday = new WorkHours;
let wednesday = new WorkHours;
let thursday = new WorkHours;
let friday = new WorkHours;
let saturday = new WorkHours;

const week = [
    sunday,
    monday,
    tuesday,
    wednesday,
    thursday,
    friday,
    saturday,
]
typescript

Answer №1

Instead of declaring variables inside arrays, you can condense your code using destructuring in TypeScript:

class WorkHours {
    day: string
    night: string
}

const week = [new WorkHours(), new WorkHours(), new WorkHours(), new WorkHours(), new WorkHours(), new WorkHours(), new WorkHours()]

const [sunday, monday, tuesday, wednesday, thursday, friday, saturday ] = week

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the Android Back Button behavior in NativeScript for a single specific page

I am currently using NativeScript version 5.2.4 along with TypeScript. My goal is to disable the back button functionality in one specific page only, but I'm facing an issue where it also disables the back button behavior for child pages. Below is the ...

typescriptnativescript

JavaScript - Cannot access the 'name' property on an empty object

I am currently following a React tutorial that demonstrates how to create a useForm hook for linking form input to state. Here is the implementation of the hook: const useForm = (initial = {}) => { const [inputs, setInputs] = useState(initial) ...

reactjstypescript

Typescript hack: Transforming read-only arrays into tuple types with string literals

My configuration object looks like this: const config = { envs: ['dev', 'test', 'prod'], targets: ['> 2%'] }; Currently, the TypeScript compiler interprets the type of this object as: type IConfig = { envs: str ...

typescript

`How can I extract HTMLElements from slots in vue3?`

When attempting to develop a Layer component, I encountered some challenges. Here is the code: // Wrapper.vue <template> <slot v-bind="attrs"></slot> </template> <script lang="ts" setup> import { defi ...

javascripttypescriptvue.jsvuejs3

Angular CodeMirror Line-Break function not displaying line numbers

I am currently utilizing Code Mirror from ngx-codemirror. My goal is to split the line when it fits within the width of the parent container. After searching, I found a couple of solutions that suggest using: lineWrapping: true Additionally, in the styles ...

cssangulartypescriptcodemirrorngx-codemirror

Convert a nested JSON array into TypeScript class objects

Within the database exist two distinct entities: 'person' and 'name'. These entities share a many-to-many relationship with the properties 'from' and 'to'. Person PersonName Name -- ...

jsonangulartypescriptspring-boothttp

Using an external HTML file to import a template into Vue.js single file components

I've been tackling a Vuejs project that involves using vue-property-decorator in single file components. I'm trying to figure out how to import the template from an external HTML (or different) file, but so far I haven't found a solution. I& ...

javascripttypescriptvue.jswebpack

Should the PHP interface be exported to a Typescript interface, or should it be vice versa?

As I delve into Typescript, I find myself coding backend in PHP for my current contract. In recent projects, I have created Typescript interfaces for the AJAX responses generated by my backend code. This ensures clarity for the frontend developer, whether ...

phpinterfacetypescript

The declaration file for the 'react' module could not be located

I was exploring Microsoft's guide on TypeScript combined with React and Redux. After executing the command: npm install -S redux react-redux @types/react-redux I encountered an error when running npm run start: Type error: Could not find a decla ...

javascriptreactjstypescriptredux

Convert an array with three dimensions into a two-dimensional array that includes tuples with two immutable string values

Consider the array below with multiple dimensions: type ParsedLine = [string, string]; type ParsedLines = [ParsedLine, ParsedLine] const myArray: (ParsedLine | ParsedLines)[] = [ ['something', 'somethingElse'], [['foo', & ...

arraystypescript

Managing multiple `ng-content` slots in Angular can be a daunting task. Here

I am facing an issue with a component where I have declared an input as follows: @Input() isOverlay: boolean The template html for this component looks like this: <ng-template *ngIf="isOverlay" cdkConnectedOverlay [cdkConnected ...

angulartypescript

Downloading a PDF in a Next.js application

How can I add a button or link that will instantly download my PDF portfolio when clicked? I am currently working on my resume section and would like to provide users with the option to easily download my CV. Is there a way to do this, and if so, how can ...

reactjstypescriptnext.js

utilize console.log within the <ErrorMessage> element

Typically, this is the way the <ErrorMessage> tag from Formik is utilized: <ErrorMessage name="email" render={(msg) => ( <Text style={styles.errorText}> ...

javascriptreactjstypescriptreact-nativeformik

What exactly does the statement if(item.some((item) => !item.available) represent in typescript?

Can you explain the meaning of if(item.some((item) => !item.available))? While looking at some code randomly, I came across this snippet: if(item.some((item) => !item.available){ } I'm curious about what it signifies. Can you elaborate on it? ...

javascripttypescript

What is the best way to utilize my data with Charts.js for my specific situation?

I am utilizing Charts.js in my Angular project (not AngularJS) and I am trying to create a graphic representation with data from my database that shows the distribution between men and women. However, I am struggling to figure out how to loop through the d ...

javascriptangulartypescriptchart.js

Error: XYZ has already been declared in a higher scope in Typescript setInterval

I've come across an interesting issue where I'm creating a handler function and trying to set the current ref to the state's value plus 1: const useTimer = () => { const [seconds, setSeconds] = useState(0); const counterRef = useRef(n ...

javascriptreactjstypescripteslint

Require users to sign in immediately upon landing on the homepage in Next JS version 13 or 14

I have created a traditional dashboard application using Next.js 13 with a pages router that places all pages behind the /dashboard route, such as /dashboard/users, /dashboard/orders, and so on. I want to ensure that when a user visits the website, a fork ...

reactjstypescriptnext.js

On production, Heroku fails to load JavaScript files, only allowing CSS files to be loaded. However, the files load successfully when

I've been struggling to find a solution to my problem, so I'm reaching out for some help. I am in the process of deploying my node (express) app to Heroku, but I've encountered an issue where only CSS files from my public folder are being t ...

javascriptnode.jstypescriptexpressheroku

What is the best way to center align the placeholder in an ion-input field?

What is the best way to center align the placeholder in ion-input? Here's a screenshot of my current ionic input fields with left alignment. I've attempted to move the alignment to the center, but I've been unsuccessful. Can someone please ...

typescriptionic-framework

Improved with TypeScript 4.1: Fixed-Size String Literal Type

The latest updates from the TypeScript team have shown significant improvements in string literal typing (4.1 & 4.2). I'm curious if there's a way to define a fixed length string. For example: type LambdaServicePrefix = 'my-application- ...

stringtypescriptstring-literals