184

I'm experimenting with TypeScript, and in the process of creating a class with an ID field that should be an integer, I have gotten a little confused.

First off, in Visual Studio 2012 with the TypeScript plugin, I see int in the intelliSense list of types. But I get a compile error that says:

the name 'int' does not exist in the current scope.

I reviewed the language specs and see only the following primitive types: number, string, boolean, null, and undefined. No integer type.

So, I'm left with two questions:

  1. How should I indicate to users of my class that a particular field is not just a number but an integer (and never a floating point or decimal number)?

  2. Why do I see int in the intellisense list if it's not a valid type?

Update: All the answers I've gotten so far are about how JavaScript doesn't have an int type, it would be hard to enforce an int type at runtime... I know all that. I am asking if there is a TypeScript way to provide an annotation to users of my class that this field should be an integer. Perhaps a comment of some particular format?

4
  • 7
    No, and it's not a valid ID in my app, either. 10 would be a valid ID.
    – Josh
    Oct 15, 2012 at 15:42
  • 1
  • One way to validate a field, and ensure that only integer values are accepted, is to create an validation method which first casts any would-be input value to String, uses RegEx to check that value either a.) has no decimal point, or b.) if decimal point exists, all subsequent characters are zeroes. Afterward, the method casts back to number type and result is passed to the field that requires the constraint.
    – Nate T
    Aug 20, 2020 at 15:35
  • @NateT i think an easier way to do the check is simply if (someNumber % 1 === 0) // then it is an integer in either case this approach can be dangerous as the consumer will not be made aware of this change taking place which could lead to unexpected results. it might be better to throw an error if an int is required but float was input.
    – LevPewPew
    Jul 20, 2022 at 3:48

10 Answers 10

172
  1. I think there is not a direct way to specify whether a number is integer or floating point. In the TypeScript specification section 3.2.1 we can see:

    "...The Number primitive type corresponds to the similarly named JavaScript primitive type and represents double-precision 64-bit format IEEE 754 floating point values..."

  2. I think int is a bug in Visual Studio intelliSense. The correct is number.

4
  • 3
    I think this is the answer. 1) You can't specify anything more granular than simply "number" for numeric types, nor is there any recognized annotation to do so; and 2) there is a bug in the VS plugin that is suggesting invalid types, perhaps based on the ECMA 262 list of reserved keywords (which includes "int")
    – Josh
    Oct 15, 2012 at 21:09
  • 1
    It's possible to implement static int type, but they choose not to. Maybe they think it is too complex to implement?
    – trusktr
    Jul 2, 2018 at 20:59
  • Note that number is not a N̶u̶m̶b̶e̶r̶ that's a different thing. Use number in lowercase as specified in this answer ;-)
    – jave.web
    Mar 10, 2022 at 7:38
  • what might woek (if its not too unreasonable :D is to make a union of all the numbers that are possible ) (which i just did for 0-255 for an rgb function 😅 new Array(255).fill(0).map((_,i)=>i).join("|") im not proud of typescript or myself currently Aug 18, 2022 at 21:28
49

TypeScript is a superset of JavaScript, which doesn't have a concept of an int. It only has the concept of a number, which has a floating point.

Generally speaking, the amount of work the compiler would have to do to enforce only whole numbers for a TypeScript int type could potentially be massive and in some cases it would still not be possible to ensure at compile time that only whole numbers would be assigned, which is why it isn't possible to reliably add an int to TypeScript.

When you initially get intelliSense in Visual Studio, it isn't possible for the tooling to determine what to supply, so you get everything, including int - but once you are dealing with something of a known type, you'll get sensible intelliSense.

Examples

var myInt: number;
var myString: string;

myInt. // toExponential, toFixed, toPrecision, toString
myString. // charAt, charCodeAt, concat, indexOf, lastIndexOf, length and many more...
11
  • 4
    But that doesn't answer my question about how to annotate my class so that users know the proper field type. Also, if "int" is never a valid type, why is it included in the "everything" list?
    – Josh
    Oct 15, 2012 at 15:43
  • 2
    You use public myVariable : number; to declare it as a number. int is a reserved word in JavaScript, which is why it appears in the everything list. Info on JavaScript int: javascript.about.com/od/reference/g/rint.htm
    – Fenton
    Oct 15, 2012 at 16:21
  • public discountPercent : number does not tell the user if it should be a decimal (e.g., 0.10 for 10%) or an integer (e.g., 10 for 10%). Is there no way to annotate to the user of the library what is valid and what is not?
    – Josh
    Oct 15, 2012 at 16:38
  • 2
    @Fenton you said: "TypeScript is a superset of JavaScript, which doesn't have a concept of an int. It only has the concept of a number, which has a floating point.". True, but it actually is possible to implement an int type in TypeScript, just that they chose not to.
    – trusktr
    May 1, 2017 at 23:45
  • 1
    @Fenton "int is a reserved word in JavaScript" Fwiw, no longer accurate. Word to wise, hit F12 and type int = 4; console.log(int);. It'll output 4. If it were still a reserved word in JavaScript, like break, you'd've gotten a syntax error. But hopefully VS has caught up in the last five and a half years too. Though it appears TS hasn't, as appears it remains intless. ;^)
    – ruffin
    May 24, 2018 at 21:28
40

In TypeScript you can approximate what is sometimes called an opaque type using a marker.

// Helper for generating Opaque types.
type Opaque<T, K> = T & { __opaque__: K };

// 2 opaque types created with the helper
type Int = Opaque<number, 'Int'>;
type ID = Opaque<number, 'ID'>;

// using our types to differentiate our properties even at runtime
// they are still just numbers
class Foo {
    someId: ID;
    someInt: Int;
}

let foo = new Foo();

// compiler won't let you do this due to or markers
foo.someId = 2;
foo.someInt = 1;

// when assigning, you have to cast to the specific type
// NOTE: This is not completely type safe as you can trick the compiler 
// with something like foo.someId = 1.45 as ID and it won't complain.
foo.someId = 2 as ID;
foo.someInt = 1 as Int;

// you can still consume as numbers
let sum: number = foo.someId + foo.someInt;

Doing this allow you to be more explicit in your code as to what types your properties expect, and the compiler won't allow you to assign a primitive value without a cast. This doesn't produce any additional .js output, and you can still consume and use the values as whatever types they are based on. In this example I'm using numbers, but you can use on strings and other types as well.

You can still trick the compiler into accepting something that isn't an Int or an Id in this example, but it should jump out if you were trying to assign 1.45 as Int or something like that. You also have the option of creating helper functions that you use to create your values to provide runtime validation.

There's a number of different ways you can create "marked" types. Here's a good article: https://michalzalecki.com/nominal-typing-in-typescript/

1
  • 1
    As said elsewhere the actual usability of this is somewhat questionable, but you can go further by adding a typeguard and/ or a Casting-Helper, which will be easy for some things - like the Int example - and pretty much impossible of others - like the ID example: // @ts-ignore const isInt = (val: number | Int): val is Int => !(val % 1); const Integer = (val: number): Int => Math.round(val) as any;
    – Sam96
    Jun 23, 2019 at 14:53
26

This is the top result on Google for me so I figure I should provide the solutions I found.

Using bigint

Now that it's 2020 and bigint has been accepted, it deserves a mention. You can simply do the below. Beware that bigints come with a bigger performance impact compared to a number.

const myNumber: bigint = 10n


Using a nominal type / tagged type / opaque type

An alternative is to use a nominal type, but it's arguably less ergonomic and I'm not sure if it's any faster than bigint, but the pattern does generalise to any type, not just number. TypeScript doesn't have "first-class" support for this so you have to do a cheeky hack. There's a library for this called newtype-ts that includes common types like Integer so you might just want to just use that, but I'll explain the workings below.

To start out with we define the integer type.

const TAG = Symbol()
type integer = number & { readonly [TAG]: unique symbol }

The TAG ensures we have a unique value so that we don't accidentally make an object with the same key, and we make the field a unique symbol too for the same reason. Now, your integer won't actually have this object field but that's fine.

With this you can still add integer to number using +. Not good. So you can enforce type safety on the arguments here by massaging the type system with a function. I'm just gonna call it guard, and again as you can see it isn't specific to integers – you could make more opaque types and use this again.

type guard = <A>(f: (...ns: Array<A>) => A, ...ns: Array<A>) => A
const guard: guard = (f, ...ns) => f(...ns)

If you try to call that with a number

const bad: integer = guard((a, b) => a + b as integer, myCoolInteger, 10)

you'll get an error like below

Argument of type '10' is not assignable to parameter of type 'integer'.
  Type '10' is not assignable to type '{ readonly [TAG]: unique symbol; }'.(2345)

Note that you aren't enforcing the return type here (because you have to use as integer) and some operators like / will return floating point numbers so you probably still want to do runtime checks or add a Math.round to a specialised version of guard, but this will at least ensure you're not trying to use two separate numeric types together – imagine you have GBP and USD and try to add those, that would likely not be what you intended.

2
  • this is interesting, bigint has an instation like: BigInt(n) and n must be an integer. So, how does typescript represent the type bigInt? Sep 11, 2021 at 13:25
  • 2
    So we have bigint for huge integers with performance penalty, but still no normal integer, which is what 95% of numbers in practice actually are. Genius. Feb 2, 2022 at 20:36
22

There is no integer or float but number type in TypeScript like in JavaScript. But if you want tell programmer that you expect integer type you can try to use Type Aliases like

type integer = number;
type float = number;

// example:
function setInt(id: integer) {}

but this is still number type and you can get float.

Part of description from documentation:
"Aliasing doesn’t actually create a new type - it creates a new name to refer to that type. Aliasing a primitive is not terribly useful, though it can be used as a form of documentation."

3

AssemblyScript supports integer values (with its asm.js backend). You can generate a JavaScript file using --jsFile.

To do it manually, you can force a value to be an integer by adding | 0.

This improves the performance because the browser engine is now able to use integers, which are faster than floats in the operations.

Say you intend to write:

function add(a: i32, b: i32) {
  return a + b
}

You should write it as the following

type i32 = number
function add(a: i32, b: i32) {
  a = a | 0
  b = b | 0
  return a + b
}

or in JavaScript (this is what asc --jsFile generates)

function add(a, b) {
  a = a | 0
  b = b | 0
  return a + b
}

For class properties:

type i32 = number
class MyClass {
  a: i32 = a | 0
}
5
  • 2
    This actually improves the performance because the browser engine is now able to use integers which are faster than floats (the default number type in JS).
    – Amin Ya
    Mar 21, 2021 at 17:46
  • Nice! Do you have any source/articles on that subject you can link me to?
    – birgersp
    Mar 21, 2021 at 17:50
  • 1
    This style of JS is called Asm.js (also the predecessor to WebAssembly). Here is the Wikipedia link. en.wikipedia.org/wiki/Asm.js
    – Amin Ya
    Mar 21, 2021 at 17:54
  • That's really nice to know! I guess there is no way to configure the ts compiler to emit error when a float value (i.e. Number with decimal) is passed to a i32 variable?
    – birgersp
    Mar 23, 2021 at 9:14
  • You should use AssemblyScript for that. assemblyscript.org
    – Amin Ya
    Mar 24, 2021 at 14:25
2

Well, as you have seen, typescript haven't float data type such as javascript language. Only have the number that cover all int and double at same time; maybe you must make a function that take a number and check it if it's a int or double, by returning some state in case error/success. Something like this as method of your class:

function SetN(x:number) {
   var is_int = parseInt(x) === parseFloat(x);
   if(is_int) this.n = x;
   return is_int;
}

//..
y = 10.5;
if(SetN(y)) {
  //OK
} else {
   //error not set y isn't a int
}

Note: it doest not works for 10.0 e.g. If you want no really it, maybe you must conver it to string and try to find a ..

1
  • This would help for runtime enforcement but I'm primarily interested in informing the user what numbers are valid.
    – Josh
    Oct 15, 2012 at 15:44
2

int was reserved for future use keyword in earlier versions of javascript (ECMAScript if you prefer). But it is a valid word now (where "now" equates to "in the latest spec").

For instance, in 262 it was still reserved, http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

It would make nice addition to typescript to have an int datatype implemented but with all compile-time type checking and casting rules available.

1
  • So perhaps the intellisense is picking up this "reserved word" even though it's not recognized by the compiler?
    – Josh
    Oct 15, 2012 at 15:45
0

Here is an implementation of number interface that doesn't do boxing. I think it would be possible to use this design to create an Integer type

0

If you want to have a type that accepts only non-negative integers less than a small number like 3, you can write

type SmallNumber = 0 | 1 | 2

For larger numbers, you can use following code. Use at your own risk :)

type Length<T extends any[]> = 
    T extends { length: infer L } ? L : never;

type LessThan<L extends number, T extends any[] = [], O = 0> = 
    T extends { length: L } ? O : LessThan<L, [...T, any], O | Length<T>>;

type ColorCode = LessThan<256>;

I took Length function from a blog post on how to do arithmetic on types.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.