How to make Typescript throw runtime error?

Question

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 constructor() {
   console.log(this.getColor(1000))
}
getColor(c:String) {
  return c
}
}

My text editor put a red line bellow the 1000 that's says: Argument of type '1000' is not assignable to parameter of type 'String'.ts(2345)

Ok...but my app still executes and I can have the result on my console.

is there any how to make Angular and/or Typescript to prevent an execution in a scenario like this ?

Typescript knows nothing of runtime. It's a compiler. There may be a way to get Angular (which does exist at runtime) to do it, I don't know if it has an equivalent to React's prop-types, but Typescript won't help you other than not allowing your code to compile. — Jared Smith
– Jared Smith, Commented Oct 25, 2019 at 16:17
@JaredSmith I've been seeing this kind of response a lot on TypeScript questions and I agree some but I've been keeping an open mind about TypeScript "doing nothing at run time". Yes it's a compiler - that outputs code that does run. They don't go to far with this but enums is a perfect example I think where there is no such thing at run time in javascript, but TypeScript is initializing a const object for you under the hood (in the output code)... Technically, it could handle the OP's case - I'm not sure they've implemented anything though. — MrRobboto
– MrRobboto, Commented Oct 25, 2019 at 16:48
Here's an example I came across the other day (still a bit over my head) - they are doing some really interesting stuff with TypeScript to even show error messages (at run time) for type errors coming from the compiler. Seeing this kind of stuff is what makes me keep an open mind with what TypeScript can do in the output code and affect run time... — MrRobboto
– MrRobboto, Commented Oct 25, 2019 at 17:00
The link is too long so here is the SO post, the link is in the first answer - this play shows some type errors at run time: stackoverflow.com/questions/58528248/… There's a long thread in github to read on the history: github.com/microsoft/TypeScript/issues/1573 — MrRobboto
– MrRobboto, Commented Oct 25, 2019 at 17:29

michimo · Accepted Answer · 2022-01-15 12:58:36Z

Typescript is only warning you, that something is not right. It does still compile and you can still run the code and it can work, but it is not intended to work like that.

So how can you check if the input is correct?

function example (color: string): void {
  if (typeof color !== 'string') {
    throw Error() // you can put your error message in here
  }
}

UPDATE 15.01.2022

I'd suggest changing my above solution a tad. With new typescript features, you could write

interface IColor extends string

function isColor(color: any): color is IColor {
  if (typeof color !== 'string') return false
  return true
}

function example (input: string): void {
  if (isColor(input)) {
    throw Error() // you can put your error message in here
  }
  // everything you wanna do here
}

Some advantages over my old suggestion:

IColor is changeable or extensible to numbers or hexadecimals
isColor can be used anywhere to check if sth is a valid color

Michael Desigaud · Accepted Answer · 2019-10-25 16:16:26Z

1

Your browser does not know about TypeScript, it only executes the transpiled javascript code.

But in your situation, the build process (made by Angular) will raise errors and you won't be able to deploy your application.

In dev mode a typescript error is raised but you still can execute the application for practical reasons

answered Oct 25, 2019 at 16:16

Michael Desigaud

2,1451 gold badge15 silver badges16 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

You can configure your compiler for --noEmitOnError:

Do not emit outputs if any errors were reported.

Though this won't "prevent an execution" per se, it will avoid Typescript's deliberate tendency to allow you to emit even when it detects type errors. From TypeScript development lead RyanCavanaugh in Typescript issue 828, where that command-line flag was created:

We definitely want the behavior that the compiler can emit in the presence of type errors. This is a key scenario for migrating existing JavaScript -- you rename some .js file to .ts, get some type errors, but want to keep getting compilation of it while you refactor it to remove the type errors. They are 'warnings' in that sense; we cannot guarantee that your program does not work just because it has type errors.

That said, we recognize that this isn't always the behavior you want. Incremental builds get messed up by this on a fairly regular basis. We need something to address this scenario.

Collectives™ on Stack Overflow

How to make Typescript throw runtime error?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related