Declaring multiple TypeScript variables with the same type

TypescriptTypesVariable Types

Typescript Problem Overview


I'm coding a large TypeScript class and I've set noImplicitAny to true. Is there any way to declare multiple variables of the same type on the same line?

I'd like to declare x and y as numbers with something like "x, y: number". But the compiler doesn't like that or anything else I've tried. Is there a better alternative to "x: number; y: number"?

Typescript Solutions


Solution 1 - Typescript

There isn't any syntax that would accomplish this in a better way than just writing the type twice.

Solution 2 - Typescript

There is no real way to achieve what you want. If your only goal is to compress everything onto one line, you can do the following:

public AcccountNumber: number;public branchCode:number;

…but I wouldn't recommend it.

Solution 3 - Typescript

How about this? Using array deconstruction with Typescript's array type.

let [x,y]: number[]

But please note that this feature is unsafe if you do not turn on pedantic index signature check. For example, the following code will not have compile error even though it should:

let [x, y]: number[] = [1]
console.log(x.toString()) // No problem
console.log(y.toString()) // No compile error, but boom during runtime 

Solution 4 - Typescript

You have to specify the type on each variable:

let x: number, y: number

Solution 5 - Typescript

This is another alternative I use.

export type CoordinatesHome = {
    lat?: number;
    long?: number;
};

export type CoordinatesAway = CoordinatesHome;

Solution 6 - Typescript

If you can accept an orphan variable. Array destructuring can do this.

var numberArray:number[]; //orphan variable
var [n1,n2,n3,n4] = numberArray;
n1=123; //n1 is number
n1="123"; //typescript compile error

Update: Here is the Javascript code generated, when targeting ECMAScript 6.

var numberArray; //orphan variable
var [n1, n2, n3, n4] = numberArray;
n1 = 123; //n1 is number

JS Code generated when targeting ECMAScript 5, like Louis said below, it's not pretty.

var numberArray; //orphan variable
var n1 = numberArray[0], n2 = numberArray[1], n3 = numberArray[2], n4 = numberArray[3];
n1 = 123; //n1 is number

Solution 7 - Typescript

let [string1, string2]: string[] = [];

breaking it down:

  • on the left the whole [string1, string2] is declared as string[], implying string1, string2 is of type string
  • to do a destructure you need it to be assigned to something, here empty array []
  • on right hand the empty array is [undefined, undefined, undefined, ...] when destructuring string1 and string2 gets assigned to undefined
  • finally string1, string2 are of type string with value undefined

Solution 8 - Typescript

e.g. let isFormSaved, isFormSubmitted, loading: boolean = false; this syntax only works in function block, but not outside of it in typescript export class file. Not sure why is that.

For Example:

export class SyntaxTest {
    
        public method1() {
            e.g. let isFormSaved, isFormSubmitted, loading: boolean = false;
        }
    }  

Solution 9 - Typescript

Not recommended, but:

interface Name {[name:string]: T } or type Name{[name:string]: T}

example: type test = {[Name: string]:string}

example: interface {[Name: string]:boolean}

This works. An example is provided in the Typescript documentation for another use case. Typescript Handbook

Solution 10 - Typescript

Array destructuring can be used on both side to assign values to multipel

[startBtn, completeBtn, againBtn] = [false, false, false];

Solution 11 - Typescript

let notes: string = '', signatureTypeName = '';

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMatthewScarpinoView Question on Stackoverflow
Solution 1 - TypescriptRyan CavanaughView Answer on Stackoverflow
Solution 2 - TypescriptVenkatesh MuniyandiView Answer on Stackoverflow
Solution 3 - TypescriptWong Jia HauView Answer on Stackoverflow
Solution 4 - TypescriptFrancisco BuenoView Answer on Stackoverflow
Solution 5 - TypescriptJan NdunguView Answer on Stackoverflow
Solution 6 - TypescriptRm558View Answer on Stackoverflow
Solution 7 - TypescriptsolmansView Answer on Stackoverflow
Solution 8 - TypescriptMalhaar PunjabiView Answer on Stackoverflow
Solution 9 - TypescriptOMorningStarView Answer on Stackoverflow
Solution 10 - Typescriptarsalan goharView Answer on Stackoverflow
Solution 11 - TypescriptMahmoud JardaliView Answer on Stackoverflow