Getting Started with TypeScript Types

Traducciones al Español
Estamos traduciendo nuestros guías y tutoriales al Español. Es posible que usted esté viendo una traducción generada automáticamente. Estamos trabajando con traductores profesionales para verificar las traducciones de nuestro sitio web. Este proyecto es un trabajo en curso.
Create a Linode account to try this guide with a $ credit.
This credit will be applied to any valid services used during your first  days.

TypeScript supports various types including string, number, boolean, enum, Array, tuple, void, null, and undefined. These are the same types supported by JavaScript, however, TypeScript can also perform type checking. This guide provides an introduction to common TypeScript types with examples on how to create each type.

Primitive Types

The three essential primitive types in JavaScript and TypeScript are string, number, and boolean.

Note
All three primitive types are spelled in lower-case. There are capitalized variants of these words that compile successfully in TypeScript. These are referred to as boxed types. When a primitive type is boxed it is “wrapped” in an object and can then behave like an object.

The example TypeScript code below demonstrates how to assign values of all three primitive types to variables.

File: example.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
//strings
var s1: string;             //declared
const s2 = "Hello, world!"; //inferred
let s3: string = "Alice";   //both

//numbers
var n1: number;             //declared
const n2 = 42;              //inferred
const pi = 3.14159;         //inferred
let n3: number = n2 * pi;   //both

function FtoC (f: number) { //declared to enable input type checking
    return (f - 32.) * 5. / 9.
}

//booleans
var b1: boolean;            //declared
const b2 = true;            //inferred
let b3: boolean = !true;    //both (!true == false)

When the TypeScript code is compiled to JavaScript, all the type annotations are stripped out, as shown in the JavaScript example below. If you’re targeting the lowest levels of JavaScript, both const and let are changed to var. If you’re targeting ES6(2015) or greater, they are left as written. In TypeScript and ES6+, let is a block-scoped version of var, and const creates a block-scoped variable that can’t be changed once it is bound.

File: example.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
//strings
var s1; //declared
var s2 = "Hello, world!"; //inferred
var s3 = "Alice"; //both
//numbers
var n1; //declared
var n2 = 42; //inferred
var pi = 3.14159; //inferred
var n3 = n2 * pi; //both
function FtoC(f) {
  return (f - 32.)* 5. / 9.;
}
//booleans
var b1; //declared
var b2 = true; //inferred
var b3 = !true; //both
Note
You don’t actually get an immutable variable when you use const. To do that, declare an object member readonly.

The Any Type

A variable of type any can store any type. The main reason to use the any type is to prevent TypeScript from throwing type-checking errors for that variable.

Caution
Before using any, consider the alternatives of explicit unions and narrowing.

If you don’t declare a type, and the type can’t be inferred, the variable is set as the any type by default. The syntax to declare the any type is as follows:

var a1: any;

There’s a secondary reason to use the any type; to write a function that accepts multiple types. It’s much better to use Generics to create a function that accepts different types instead of a single type, however, you can also use any, as shown in the following example:

File: example.ts
1
2
3
4
function wideOpen(x: any) {
  //do something to x that doesn't depend on its type
  return x;
}

By default, TypeScript infers an any type for any variable that has neither a declared type nor enough context to infer a type. To disable that, use the noImplicitAny or --strict TypeScript compiler flag. You can refer to the full list of TypeScript compiler options.

tsc --noImplicitAny my_file.ts

TypeScript Arrays

There are two ways you can declare an array in TypeScript. They are as follow:

  1. Using square brackets.

     //arrays
     let arr1: number[];         //declared
     let arr2 = [1,2,3];         //inferred
     let arr3 = ["one","two","three"];
    
  2. Using Generics, i.e., the Array<Type> as shown below:

     let arr1: Array<string> = ['one', 'two', 'three'];
    

Object Types

In TypeScript, you can create types from other types. The most common way to do this is with objects. Objects can be anonymous, type aliases, or interfaces.

Note
Notice the difference in syntax when declaring an interface and a type alias. An interface declaration does not make use of the = sign.
File: object_types_example.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
//objects

//interface
interface IP4i {
    dns_name: string;
    ip_address: [number,number,number,number];
    protocol?: string;
}

//type alias
type IP4t = {
    dns_name: string;
    ip_address: [number,number,number,number];
    protocol?: string;
}

Optional properties are denoted with a question mark (?) after the member name, as shown for the protocol members in the example above.

Unions and Narrowing

Unions are denoted by a vertical bar ('|') and allow for more than one type, often as an input parameter to a function. You can’t apply type-dependent code to a union until your code narrows down which of the allowed types have been input. Consider the following example:

File: unions_example.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
function welcomePeople(x: string[] | string) { //x is a union
 //Narrowing logic
  if (Array.isArray(x)) {
    // Here: 'x' is 'string[]'
    console.log("Hello, " + x.join(" and "));
  } else {
    // Here: 'x' is 'string'
    console.log("Welcome lone traveler " + x);
  }
}

welcomePeople("Moe");
welcomePeople(["Moe","Larry”,"Curly"]);

When you run the code, you get the following log output:

[LOG]: "Welcome lone traveler Moe"

[LOG]: "Hello, Moe and Larry and Curly"

More Information

This guide provides an introduction to commonly used types in TypeScript with brief examples to help you get started. To learn more about TypeScript types and their individual implementation details, refer to the Everyday Types page on the TypeScript documentation site.

This page was originally published on


Your Feedback Is Important

Let us know if this guide made it easy to get the answer you needed.


Join the conversation.
Read other comments or post your own below. Comments must be respectful, constructive, and relevant to the topic of the guide. Do not post external links or advertisements. Before posting, consider if your comment would be better addressed by contacting our Support team or asking on our Community Site.