Typescript error on valid javascript

Question

I'm trying to do the following in typescript:

var testHier = [
    { content:"1", opened:true, children: [
        { content:"1.1" }
    ]},
    { content: "2", opened:true, children: [
        { content:"2.1", opened:false, children: [
            { content:"2.1.1", value:"2.1.1" }
        ]},
        { content: "2.2", value: "2.2" }
    ]}
]

but when I compile I get the error:

"Incompatible types in array literal expression: Type '{ content: string; opened: bool; children: { content: string; value: string; }[]; }' is missing property 'value' from type '{ content: string; value: string; }'"

If I change

{ content:"2.1", opened:false, children: [

to

{ content:"2.1", opened:false, value:"foo", children: [

the error goes away.

I tested the declaration in the chrome console and it seems to work just fine. Since this is just javascript I'd expect it to get passes straight through, but that doesn't seem to be the case. Anyone know what's going on here?

Can we see the type definition or is it inferred by the compiler from existing data? The latter shouldn't be. — John Dvorak
– John Dvorak, Commented Nov 12, 2012 at 19:56
That is literally all that is in the file. The file is called example.ts and to compile I'm just doing tsc example.ts. — Greg Ruhnow
– Greg Ruhnow, Commented Nov 12, 2012 at 19:59
Then it seems that the compiler requires the array to be regular. I would like to see it confirmed and documented (and reasoned). — John Dvorak
– John Dvorak, Commented Nov 12, 2012 at 20:02

Fenton · Accepted Answer · 2012-11-12 20:23:11Z

You just need to help it out with a bit of type information:

interface IExample {
    content: string;
    opened?: bool;
    value?: string;
    children?: IExample[];
}

var testHier: IExample[] = [
{ 
    content:"1", 
    opened:true, 
    children: [
        { 
            content:"1.1" 
        }
    ]
},
{
    content: "2", 
    opened:true, 
    children: [
        { 
            content:"2.1", 
            opened:false, 
            children: [
                { 
                    content:"2.1.1", 
                    value:"2.1.1"
                }
            ]
        },
        { 
            content: "2.2", 
            value: "2.2" 
        }
    ]
}];

It is trying to work out what the types are in each part of the array and can't come up with the required commonality to guess - in an array it needs everything to be the same type (i.e. all strings, or all numbers, but not a mixture!). The IExample interface helps by specifying the any type.

Why has TypeScript done this?

TypeScript wants to help you. If it can infer a type for you, to save you having to explicitly declare it, it will. On the whole this is beneficial - it would detect the error in the following script:

var x = [
    10,
    20,
    "30",
    50
];

In this case, it infers you have an array of numbers as warns you that there is a string in there. If it used any instead of cleverly working out the types, you wouldn't get this kind of assistance.

You can still decide that you want to have a mixed array by telling TypeScript that x is of type any[] in which case the error goes away.

It is better that TypeScript starts by warning you about incompatible types in case you made a mistake - for example in your case you might have forgotten to add opened and value to each of the objects - so TypeScript could have saved you from an error.

Shouldn't it expect any by default (i mean, why doesn't it)?
Not in this case as it thinks it can create an anonymous type of { content: string; value: string; }. Because one element doesn't have a value the type fails. You could template out fuller type information - I can show you how if you like.
I've added a fuller type definition, which is based on the one TypeScript was creating automatically. I have marked items as optional using a ? wherever you have omitted them at any point.
All JavaScript is valid TypeScript - except if TypeScript detects incompatible types as it is statically typed. The compiler can normally infer types really well - but in your case it is a bit too complicated for the compiler to work out.
@SteveFenton You say "warning". OP says "error". A warning is reasonable to me but I'm under the impression it shouldn't produce an error.

Collectives™ on Stack Overflow

Typescript error on valid javascript

1 Answer 1

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Related