TypeScript compiles successfully but output JS shows error

Question

I'm new to TypeScript, and trying out custom type declaration through this simple snippet.

The script

I have this script:

// app.ts

type Customer = {
  name: String,
  isFrequentVisitor: Boolean,
}

type Order = {
  buyer: Customer,
  itemName: String,
  itemPrice: number,
  isConfirm: Boolean
}

function placeOrder (user: Customer): Order {
  let order: Order
  order.buyer = user
  order.itemName = 'Raspberry Pi'
  order.itemPrice = 1000
  order.isConfirm = true
  return order
}

let person: Customer = {
  name: 'John',
  isFrequentVisitor: false
}

let newOrder: Order = placeOrder(person)

if (newOrder.isConfirm) {
  console.log('The order has been confirmed. Check details below:')
  console.log(newOrder)
} else {
  console.log('The order has not been confirmed yet.')
}

The problem

I'm able to run $ tsc app.ts successfully (without any errors on the console), and see app.js next to the file.

However, running $ node app.js, I get the following error -

/tmp/app.js:3
    order.buyer = user;
                ^

TypeError: Cannot set property 'buyer' of undefined

Also, if it may be useful, I have linked the compiled app.js here.

I have worked with custom types in Golang, and they work just fine in a similar context.

I'm not sure what am I missing here.

Also, isn't it the reason behind using TypeScript, so that we can catch errors before they occur at runtime.

I'd appreciate a beginner-friendly answer. Thank you.

Specifications

using TypeScript Version 3.8.3
using Node version 14.4.0

artanik · Accepted Answer · 2020-07-26 19:48:23Z

3

To get more information from the compiler you have to use compiler options for tsc or a tsconfig.json file.

tsc --strictNullChecks index.ts

The command above with --strictNullChecks option should display information like this:

index.ts:15:3 - error TS2454: Variable 'order' is used before being assigned.

15   order.buyer = user
     ~~~~~

index.ts:16:3 - error TS2454: Variable 'order' is used before being assigned.

16   order.itemName = 'Raspberry Pi'
     ~~~~~

index.ts:17:3 - error TS2454: Variable 'order' is used before being assigned.

17   order.itemPrice = 1000
     ~~~~~

index.ts:18:3 - error TS2454: Variable 'order' is used before being assigned.

18   order.isConfirm = true
     ~~~~~

index.ts:19:10 - error TS2454: Variable 'order' is used before being assigned.

19   return order
            ~~~~~


Found 5 errors.

answered Jul 26, 2020 at 19:48

artanik

2,71418 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Helix · Accepted Answer · 2020-07-26 19:54:27Z

2

You need to initialize the variable with some default value, or you can just fill the value like the code below.

function placeOrder (user: Customer): Order {
  let order: Order = {
    buyer: user,
    itemName: 'Raspberry Pi',
    itemPrice: 1000,
    isConfirm: true
  };
  return order
}

Or you can also do type assertion

function placeOrder (user: Customer): Order {
  let order = {} as Order;
  order.buyer = user
  order.itemName = 'Raspberry Pi'
  order.itemPrice = 1000
  order.isConfirm = true
  return order
}

Providing default value is actually no different than my first snippet. Just put it the value. For 'string' we put empty string '', boolean we put false and so on. After that, you can do what you want with the variable. Snippets for providing default value:

type exampleType = {
    exampleBoolean: Boolean,
}

let exampleInstance : exampleType = {
    exampleBoolean: false
}
exampleInstance.exampleBoolean = true //change to some real value

edited Jul 26, 2020 at 19:54

answered Jul 26, 2020 at 19:37

Helix

1971 silver badge7 bronze badges

4 Comments

ThomasH Over a year ago

While this solution occurred to me too, I'm still wondering why the TS compiler wouldn't flag it in the first place, saying something like "trying to assign to an undefined variable"!?

roshnet Over a year ago

Much thanks, it works. Would you please add a snippet showing how to add default values?

Helix Over a year ago

@roshnet For your order type, it's gonna be a bit harder because your buyer is also of Customer type. So you have to initialize that too. But I'll add a snippet for simpler type one, you can extend this easily to initialize a customer variable too.

Helix Over a year ago

@ThomasH you can add additional compiler options to provide warnings. See artanik's answer.

Collectives™ on Stack Overflow

TypeScript compiles successfully but output JS shows error

The script

The problem

Specifications

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The script

The problem

Specifications

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related