CODEWITHSUNDEEP
javascriptnode.jstypescript
roshnet
roshnet

Reputation: 2073

TypeScript compiles successfully but output JS shows error

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

Upvotes: 1

Views: 1116

Answers (2)

Helix
Helix

Reputation: 197

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

Upvotes: 2

artanik
artanik

Reputation: 2704

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.

Upvotes: 3

Related Questions