For programs to be useful, we need to be able to work with some of the simplest units of data: numbers, strings, structures, boolean values, and the like.\nIn TypeScript, we support much the same types as you would expect in JavaScript, with a convenient enumeration type thrown in to help things along.
\nThe most basic datatype is the simple true/false value, which JavaScript and TypeScript call a boolean value.
\ntslet isDone:let isDone: boolean boolean = false;
As in JavaScript, all numbers in TypeScript are floating point values.\nThese floating point numbers get the type number.\nIn addition to hexadecimal and decimal literals, TypeScript also supports binary and octal literals introduced in ECMAScript 2015.
\ntslet decimal:let decimal: number number = 6;\nlet hex:let hex: number number = 0xf00d;\nlet binary:let binary: number number = 0b1010;\nlet octal:let octal: number number = 0o744;
Another fundamental part of creating programs in JavaScript for webpages and servers alike is working with textual data.\nAs in other languages, we use the type string to refer to these textual datatypes.\nJust like JavaScript, TypeScript also uses double quotes (\") or single quotes (') to surround string data.
\ntslet color:let color: string string = \"blue\";\ncolor let color: string= \"red\";
You can also use template strings, which can span multiple lines and have embedded expressions.\nThese strings are surrounded by the backtick/backquote (`) character, and embedded expressions are of the form ${ expr }.
\ntslet fullName:let fullName: string string = `Bob Bobbington`;\nlet age:let age: number number = 37;\nlet sentence:let sentence: string string = `Hello, my name is ${fullNamelet fullName: string}.\n\nI'll be ${age let age: number+ 1} years old next month.`;
This is equivalent to declaring sentence like so:
\ntslet sentence: string =\n \"Hello, my name is \" +\n fullName +\n \".\\n\\n\" +\n \"I'll be \" +\n (age + 1) +\n \" years old next month.\";
TypeScript, like JavaScript, allows you to work with arrays of values.\nArray types can be written in one of two ways.\nIn the first, you use the type of the elements followed by [] to denote an array of that element type:
\ntslet list:let list: number[] number[] = [1, 2, 3];
The second way uses a generic array type, Array<elemType>:
\ntslet list:let list: number[] Array<interface Array<T>number> = [1, 2, 3];
Tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same. For example, you may want to represent a value as a pair of a string and a number:
\nts// Declare a tuple type\nlet x:let x: [string, number] [string, number];\n// Initialize it\nx let x: [string, number]= [\"hello\", 10]; // OK\n// Initialize it incorrectly\nx let x: [string, number]= [10, "hello"]; // Error\nType 'number' is not assignable to type 'string'.Type 'string' is not assignable to type 'number'.2322
2322Type 'number' is not assignable to type 'string'.Type 'string' is not assignable to type 'number'.
When accessing an element with a known index, the correct type is retrieved:
\n\ntsconsole.log(x[0].substring(1)); // OK\nconsole.log(x[1].substring(1)); // Error, 'number' does not have 'substring'
Accessing an element outside the set of known indices fails with an error:
\n\ntsx[3] = \"world\"; // Error, Property '3' does not exist on type '[string, number]'.\n\nconsole.log(x[5].toString()); // Error, Property '5' does not exist on type '[string, number]'.
A helpful addition to the standard set of datatypes from JavaScript is the enum.\nAs in languages like C#, an enum is a way of giving more friendly names to sets of numeric values.
\ntsenum Color enum Color\n Red,(enum member) Color.Red = 0\n Green,(enum member) Color.Green = 1\n Blue(enum member) Color.Blue = 2\n}\nlet c:let c: Color Color enum Color= Color.enum ColorGreen;(enum member) Color.Green = 1
By default, enums begin numbering their members starting at 0.\nYou can change this by manually setting the value of one of its members.\nFor example, we can start the previous example at 1 instead of 0:
\ntsenum Color enum Color\n Red (enum member) Color.Red = 1= 1,\n Green,(enum member) Color.Green = 2\n Blue(enum member) Color.Blue = 3\n}\nlet c:let c: Color Color enum Color= Color.enum ColorGreen;(enum member) Color.Green = 2
Or, even manually set all the values in the enum:
\n\ntsenum Color enum Color\n Red (enum member) Color.Red = 1= 1,\n Green (enum member) Color.Green = 2= 2,\n Blue (enum member) Color.Blue = 4= 4\n}\nlet c:let c: Color Color enum Color= Color.enum ColorGreen;(enum member) Color.Green = 2
A handy feature of enums is that you can also go from a numeric value to the name of that value in the enum.\nFor example, if we had the value 2 but weren’t sure what that mapped to in the Color enum above, we could look up the corresponding name:
\ntsenum Color enum Color\n Red (enum member) Color.Red = 1= 1,\n Green,(enum member) Color.Green = 2\n Blue(enum member) Color.Blue = 3\n}\nlet colorName:let colorName: string string = Color[enum Color2];\n\nconsole.var console: Consolelog((method) Console.log(message?: any, ...optionalParams: any[]): voidcolorName)let colorName: string; // Displays 'Green' as its value is 2 above
We may need to describe the type of variables that we do not know when we are writing an application.\nThese values may come from dynamic content, e.g. from the user or a 3rd party library.\nIn these cases, we want to opt-out of type checking and let the values pass through compile-time checks.\nTo do so, we label these with the any type:
\ntslet notSure:let notSure: any any = 4;\nnotSure let notSure: any= \"maybe a string instead\";\nnotSure let notSure: any= false; // okay, definitely a boolean
The any type is a powerful way to work with existing JavaScript, allowing you to gradually opt-in and opt-out of type checking during compilation.\nYou might expect Object to play a similar role, as it does in other languages.\nHowever, variables of type Object only allow you to assign any value to them. You can’t call arbitrary methods on them, even ones that actually exist:
\ntslet notSure:let notSure: any any = 4;\nnotSure.let notSure: anyifItExists(any); // okay, ifItExists might exist at runtime\nnotSure.let notSure: anytoFixed(any); // okay, toFixed exists (but the compiler doesn't check)\n\nlet prettySure:let prettySure: Object Object interface Object= 4;\nprettySure.let prettySure: ObjecttoFixed(any); // Error: Property 'toFixed' doesn't exist on type 'Object'.\nProperty 'toFixed' does not exist on type 'Object'.2339Property 'toFixed' does not exist on type 'Object'.
The any type is also handy if you know some part of the type, but perhaps not all of it.\nFor example, you may have an array but the array has a mix of different types:
\ntslet list:let list: any[] any[] = [1, true, \"free\"];\n\nlist[let list: any[]1] = 100;
void is a little like the opposite of any: the absence of having any type at all.\nYou may commonly see this as the return type of functions that do not return a value:
\ntsfunction warnUser(function warnUser(): void): void {\n console.var console: Consolelog((method) Console.log(message?: any, ...optionalParams: any[]): void\"This is my warning message\");\n}
Declaring variables of type void is not useful because you can only assign null (only if --strictNullChecks is not specified, see next section) or undefined to them:
\ntslet unusable:let unusable: void void = undefinedvar undefined;\nunusable let unusable: void= null; // OK if `--strictNullChecks` is not given
In TypeScript, both undefined and null actually have their own types named undefined and null respectively.\nMuch like void, they’re not extremely useful on their own:
\nts// Not much else we can assign to these variables!\nlet u:let u: undefined undefined = undefinedvar undefined;\nlet n:let n: null null = null;
By default null and undefined are subtypes of all other types.\nThat means you can assign null and undefined to something like number.
However, when using the --strictNullChecks flag, null and undefined are only assignable to any and their respective types (the one exception being that undefined is also assignable to void).\nThis helps avoid many common errors.\nIn cases where you want to pass in either a string or null or undefined, you can use the union type string | null | undefined.
Union types are an advanced topic that we’ll cover in a later chapter.
\n\n\nAs a note: we encourage the use of
\n--strictNullCheckswhen possible, but for the purposes of this handbook, we will assume it is turned off.
The never type represents the type of values that never occur.\nFor instance, never is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns;\nVariables also acquire the type never when narrowed by any type guards that can never be true.
The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, never (except never itself).\nEven any isn’t assignable to never.
Some examples of functions returning never:
\nts// Function returning never must have unreachable end point\nfunction error(function error(message: string): nevermessage:(parameter) message: string string): never {\n throw new Error(var Error: ErrorConstructor new (message?: string | undefined) => Errormessage)(parameter) message: string\n}\n\n// Inferred return type is never\nfunction fail(function fail(): never) {\n return error(function error(message: string): never\"Something failed\");\n}\n\n// Function returning never must have unreachable end point\nfunction infiniteLoop(function infiniteLoop(): never): never {\n while (true) {}\n}
object is a type that represents the non-primitive type, i.e. anything that is not number, string, boolean, symbol, null, or undefined.
With object type, APIs like Object.create can be better represented. For example:
\ntsdeclare function create(function create(o: object | null): voido:(parameter) o: object | null object | null): void;\n\ncreate(function create(o: object | null): void{ prop:(property) prop: number0 }); // OK\ncreate(function create(o: object | null): voidnull); // OK\n\ncreate(function create(o: object | null): void42); // Error\nArgument of type '42' is not assignable to parameter of type 'object | null'.2345Argument of type '42' is not assignable to parameter of type 'object | null'.create(function create(o: object | null): void"string"); // Error\nArgument of type '\"string\"' is not assignable to parameter of type 'object | null'.2345Argument of type '\"string\"' is not assignable to parameter of type 'object | null'.create(function create(o: object | null): voidfalse); // Error\nArgument of type 'false' is not assignable to parameter of type 'object | null'.2345Argument of type 'false' is not assignable to parameter of type 'object | null'.create(function create(o: object | null): voidundefinedvar undefined); // Error\nArgument of type 'undefined' is not assignable to parameter of type 'object | null'.2345Argument of type 'undefined' is not assignable to parameter of type 'object | null'.
Sometimes you’ll end up in a situation where you’ll know more about a value than TypeScript does.\nUsually this will happen when you know the type of some entity could be more specific than its current type.
\nType assertions are a way to tell the compiler “trust me, I know what I’m doing.”\nA type assertion is like a type cast in other languages, but performs no special checking or restructuring of data.\nIt has no runtime impact, and is used purely by the compiler.\nTypeScript assumes that you, the programmer, have performed any special checks that you need.
\nType assertions have two forms.\nOne is the “angle-bracket” syntax:
\n\ntslet someValue:let someValue: any any = \"this is a string\";\n\nlet strLength:let strLength: number number = (<string>someValue)let someValue: any.length;(property) String.length: number
And the other is the as-syntax:
\ntslet someValue:let someValue: any any = \"this is a string\";\n\nlet strLength:let strLength: number number = (someValue let someValue: anyas string).length;(property) String.length: number
The two samples are equivalent.\nUsing one over the other is mostly a choice of preference; however, when using TypeScript with JSX, only as-style assertions are allowed.
letYou may’ve noticed that so far, we’ve been using the let keyword instead of JavaScript’s var keyword which you might be more familiar with.\nThe let keyword is actually a newer JavaScript construct that TypeScript makes available.\nWe’ll discuss the details later, but many common problems in JavaScript are alleviated by using let, so you should use it instead of var whenever possible.