Understanding type asseration

Question

I am just starting with typescript and as much as i thought things are going to be easy, typescript doesn't seem to be that similar to javascript and kinda confusing

Anyway, In typescript (Not sure if my code is valid or not) what is the difference between doing something like this

    const ua: string = req.headers['user-agent']!

or as per this answer something like this: https://stackoverflow.com/a/38831495/10433835

const us = <string> req.headers['user-agent']!

Ps: I am not sure which of the code is valid.

I think you mean `string` instead of `String` with a capital S. These two are different. — hackape, Nov 18 '19 at 06:52
unless `req.headers` has a type definition, `req.headers['user-agent']` would default to `any` type. In your code, you are: 1. Declaring a variable of `string` type and assigning value to it. 2. Casting the value of `req.headers['user-agent']` to `string` and then assigning to a variable, which the TS compiler infers to be of type `string`. — MjZac, Nov 18 '19 at 06:57

VLAZ · Accepted Answer · 2019-11-18T07:59:05.563

const ua: string = req.headers['user-agent']!

Means that you create a new variable called ua which is explicitly set to be a string type and assign a value to it. This will trigger an error if you try to assign something that's not a string to the same variable, for example const ua: string = 42

const us = <string> req.headers['user-agent']!

In this case, you are just creating a new variable called us which has no explicit type defined for it. In this case, TypeScript will try to guess based on what you assign. For example, see this

let a = "hello"; //no type for `a` but assigning a string makes the guess to be `string`
a = 42; //error because it's not a string

TypeScript Playground

When you do an explicit type assertion using <string> you guarantee that TS will guess the type would be string.

Out of the two, the first one is safer, since you know you expect a string and if it's not, then you'd get a compile time error. The second approach relies on implicit type guessing which can actually be wrong on your part. This means that at compile time this will be correct only because you've overruled the compiler but won't necessarily work at runtime. Here is an example:

let a = <string> getData();

function getData(): string | number {
    return 42;
}

TypeScript Playground

This will compile but it won't be correct since you've told a compiler to always expect a string where it could actually be a number (the return type is string | number, so it could be either) and moreover, the function just returns a number anyway. So, at runtime you have no type guarantee after this. Compare with explicit typing

let a: string = getData();

function getData(): string | number {
    return 42;
}

TypeScript Playground

You now correctly get a compile time error as you should handle what happens when you get a different type.

So, usually manual type assertion should be avoided. It can lead to errors that might not even be there initially but might show up later - for example the code above might have had getData initially only return string so at that point there was no difference between explicit and implicit typing of the variable a. The type assertion via <string> would have been superfluous. However, if the function then changed to return string | number the explicit type assertion becomes unreliable.

score 1 · Answer 2 · answered Nov 18 '19 at 06:47

1

Well i mean the difference is that in the first example you are declaring constant of type string and assign it the value of the 'user-agent' of headers of req.

In the second one you are declaring constant type any and assign it explicitly casted to type string value of the 'user-agent' of headers of req.

I am not sure if i answered your question, if not please provide more context. Both code samples are "valid".

answered Nov 18 '19 at 06:47

Kirill Morozov

493
1
3
12

Mrozov when to chose which one? – Alwaysblue Nov 18 '19 at 06:52
Well when you need variable to be of a certain type you are declare it to be that. But if you already have a variable of a certain type, and want to assign to it value of a different type returned from a function for example you are gonna cast it to the type of the variable. – Kirill Morozov Nov 18 '19 at 06:56

score 1 · Answer 3 · answered Nov 18 '19 at 07:02

Both expressions are valid. But they mean different intention.

case 1:

const ua: string = req.headers['user-agent']!

you declare a variable ua and mark it as string type
you assign a value to it
typescript will check if the value is good to be assign to that variable.

case 2:

const ua = <string>req.headers['user-agent']!

you declare a variable ua without specifying its type
you assign to it a value, which you manually type-asserted as string type
typescript will check:
- if your type assertion is applicable to that value
- if above is good, then it'll infer the type of ua from this assignment

Understanding type asseration

3 Answers3