TypeScript Tutorial
Empezando con TypeScript

Observaciones

Versiones

Instalación y configuración

Fondo

TypeScript es un superconjunto de JavaScript que se compila directamente en el código JavaScript. Los archivos de TypeScript comúnmente usan la extensión .ts . Muchos IDE admiten TypeScript sin necesidad de ninguna otra configuración, pero TypeScript también puede compilarse con el paquete TypeScript Node.JS desde la línea de comandos.

IDEs

Estudio visual

• Visual Studio 2015 incluye TypeScript.
• Visual Studio 2013 Update 2 o posterior incluye TypeScript, o puede descargar TypeScript para versiones anteriores .

Código de Visual Studio

• Visual Studio Code (vscode) proporciona un autocompletado contextual, así como herramientas de refactorización y depuración para TypeScript. vscode se implementa en TypeScript. Disponible para Mac OS X, Windows y Linux.

Tormenta web

• WebStorm 2016.2 viene con TypeScript y un compilador incorporado. [Webstorm no es gratis]

IntelliJ IDEA

• IntelliJ IDEA 2016.2 tiene soporte para Typescript y un compilador a través de un complemento mantenido por el equipo de Jetbrains. [IntelliJ no es gratis]

Atom & atom-mecanografiado

• Atom admite TypeScript con el paquete atom-typescript .

Texto sublime

• Sublime Text admite TypeScript con el paquete typescript .

Instalación de la interfaz de línea de comandos

Instala Node.js

Instale el paquete npm globalmente

Puede instalar TypeScript globalmente para tener acceso a él desde cualquier directorio.

npm install -g typescript

o

Instale el paquete npm localmente

Puede instalar TypeScript localmente y guardar en package.json para restringirlo a un directorio.

npm install typescript --save-dev

Canales de instalación

Se puede instalar desde:

• Canal estable: npm install typescript
• Canal Beta: npm install typescript@beta
• Canal de desarrollo: npm install typescript@next

Compilando el código TypeScript

El comando de compilación tsc viene con typescript , que puede usarse para compilar código.

tsc my-code.ts

Esto crea un archivo my-code.js .

Compilar utilizando tsconfig.json

También puede proporcionar opciones de compilación que viajan con su código a través de un archivo tsconfig.json . Para iniciar un nuevo proyecto mecanografiado, cd en el directorio raíz de su proyecto en una ventana de terminal y ejecute tsc --init . Este comando generará un archivo tsconfig.json con opciones de configuración mínimas, similares a las siguientes.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

Con un archivo tsconfig.json ubicado en la raíz de su proyecto de TypeScript, puede usar el comando tsc para ejecutar la compilación.

Hola Mundo

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

Aquí tenemos una clase, Greeter , que tiene un constructor y un método de greet . Podemos construir una instancia de la clase usando la new palabra clave y pasar una cadena que queremos que el método de greet salga a la consola. La instancia de nuestra clase Greeter se almacena en la variable greeter que luego llamamos el método greet .

Sintaxis basica

TypeScript es un superconjunto escrito de JavaScript, lo que significa que todo el código JavaScript es un código TypeScript válido. TypeScript agrega muchas características nuevas además de eso.

TypeScript hace que JavaScript sea más parecido a un lenguaje fuertemente orientado a objetos, similar a C # y Java. Esto significa que el código TypeScript tiende a ser más fácil de usar para proyectos grandes y que el código tiende a ser más fácil de entender y mantener. La escritura fuerte también significa que el idioma puede (y está) precompilado y que a las variables no se les pueden asignar valores que están fuera de su rango declarado. Por ejemplo, cuando una variable de TypeScript se declara como un número, no puede asignarle un valor de texto.

Esta fuerte tipificación y orientación de objetos hace que TypeScript sea más fácil de depurar y mantener, y esos fueron dos de los puntos más débiles de JavaScript estándar.

Declaraciones de tipo

Puede agregar declaraciones de tipo a variables, parámetros de función y tipos de retorno de función. El tipo se escribe después de dos puntos que siguen al nombre de la variable, como este: var num: number = 5; El compilador luego verificará los tipos (cuando sea posible) durante la compilación y los errores de tipo de informe.

var num: number = 5;
num = "this is a string";  // error: Type 'string' is not assignable to type 'number'.

Los tipos básicos son:

• number (tanto enteros como números de punto flotante)
• string
• boolean
• Array Puede especificar los tipos de elementos de una matriz. Hay dos formas equivalentes de definir los tipos de matriz: Array<T> y T[] . Por ejemplo:
  • number[] - matriz de números
  • Array<string> - array of strings
• Tuplas. Las tuplas tienen un número fijo de elementos con tipos específicos.
  • [boolean, string] - tupla donde el primer elemento es booleano y el segundo es una cadena.
  • [number, number, number] - tupla de tres números.
• {} - objeto, puede definir sus propiedades o indexador
  • {name: string, age: number} - objeto con atributos de nombre y edad
  • {[key: string]: number} - un diccionario de números indexados por cadena
• enum - { Red = 0, Blue, Green } - enumeración asignada a números
• Función. Usted especifica los tipos para los parámetros y el valor de retorno:
  • (param: number) => string - función que toma un parámetro numérico que devuelve una cadena
  • () => number - función sin parámetros que devuelven un número.
  • (a: string, b?: boolean) => void : función que toma una cadena y, opcionalmente, un booleano sin valor de retorno.
• any - Permite cualquier tipo. No se comprueban las expresiones que involucren a any .
• void - representa "nada", se puede utilizar como valor de retorno de una función. Solo null y undefined son parte del tipo void .
• never
  • let foo: never; -Como el tipo de variables en las guardas de tipo que nunca son ciertas.
  • function error(message: string): never { throw new Error(message); } - Como el tipo de retorno de funciones que nunca regresan.

• null : escriba el valor null . null es implícitamente parte de cada tipo, a menos que las comprobaciones nulas estrictas estén habilitadas.

Fundición

Puede realizar una conversión explícita entre paréntesis angulares, por ejemplo:

var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();

Este ejemplo muestra una clase derived que el compilador trata como una MyInterface . Sin la conversión en la segunda línea, el compilador lanzaría una excepción, ya que no comprende someSpecificMethod() , pero la conversión a través de <ImplementingClass>derived sugiere al compilador qué hacer.

Otra forma de convertir en Typescript es usando la palabra clave as :

var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();

Desde Typescript 1.6, el valor predeterminado es usar la palabra clave as , porque usar <> es ambiguo en los archivos .jsx . Esto se menciona en la documentación oficial de Typescript .

Las clases

Las clases se pueden definir y utilizar en el código de TypeScript. Para obtener más información sobre las clases, consulte la página de documentación de Clases .

TypeScript REPL en Node.js

Para usar TypeScript REPL en Node.js puede usar el paquete tsun

Instálalo globalmente con

npm install -g tsun

y ejecútelo en su terminal o indicador de comando con el comando tsun

Ejemplo de uso:

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12

Ejecutando TypeScript usando ts-node

ts-node es un paquete npm que permite al usuario ejecutar archivos mecanografiados directamente, sin la necesidad de precompilación usando tsc . También proporciona REPL .

Instale ts-node globalmente usando

npm install -g ts-node

ts-node no incluye el compilador de escritura de tipos, por lo que es posible que deba instalarlo.

npm install -g typescript

Ejecutando script

Para ejecutar un script llamado main.ts , ejecute

ts-node main.ts

// main.ts
console.log("Hello world");

Ejemplo de uso

$ ts-node main.ts
Hello world

Ejecutando REPL

Para ejecutar REPL ejecute el comando ts-node

Ejemplo de uso

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit

Para salir de REPL use el comando .exit o presione CTRL+C dos veces.