TypeScript

Qué es TypeScript?

Es un superconjunto de javascript, osea es javascript plus o javascript con esteroides. Basicamente añade tipado estatico de datos y una gestión clases similar a otros lenguajes de programación orientados a objetos (POO). Cualquier código valido de javascript, se puede compilar en typescript pero el código typescript no se puede ejecutar directamente en el navegador o en un motor de javascript.

Fue publicado por Microsoft en octubre de 2012, dirigido por Anders Hejlsberg, el diseñador de C# y creador de Delphi y Turbo Pascal.

Typescript es la solución a muchos de los problemas de JavaScript. Permite desarrollo de aplicaciones más robustas, sin errores de tipado en tiempo de ejecución, implementando características en el lenguaje que nos permitan desarrollar aplicaciones mas robustas y profesionales.

No lo soluciona todo, al final hay que programar bien, pero evita muchísimos errores tontos por haber puesto mal el nombre de una variable en un sitio o de intentar meter una variable de un tipo en otro. El problema es que javascript siempre traga con todo, y después la aplicación a veces no hace lo que esperas. Con typescript te permite definir los tipos de datos y eso elimina montones de problemas.

Vaticinio personal de bruja Lola: Al final muchas de las utilidades de TypeScript acabarán formando parte de forma nativa del estándar de JavaScript (lo digo en Febrero de 2021, ahí queda dicho).

Para ejecutarlo en el navegador realmente el código se transpila (se traduce) a la versión de javascript que quieras.

Recursos

https://www.typescriptlang.org/

https://github.com/type-challenges/type-challenges

Instalación

> npm install -g typescript

Para crear un proyecto con la preconfiguración basica:

> npx create-react-app my-app --template typescript

Tipos Primitivos

> tsc nombre_fichero.ts 


El compilador se configura con el archivo tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "ES6",
        "allowJs": true,
				"lib": ["DOM", "DOM.Iterable", "ESNext"]
    },
    "include": ["./js/**/*"],
    


}

Para ajustar la configuración de Webpack modificaremos el fichero webpack.common.js y añadiremos el objeto resolve para detectar los archivos .ts:

resolve: {
    extensions: [".ts", ".js"],
},

En rules cambiaremos babel-loader por ts-loader:

rules: [
  {
    test: /\.ts$/,
    exclude: /node_modules/,
    use: {
      loader: "ts-loader",
      options: {
        transpileOnly: true,
      },
    },
  }

Tipos primitivos

Muy facilitos: string, number y boolean

Arrays

Puedes utilizar la sintaxis T<U>:

let misNumeros<number> = [1, 2, 3];
let misStrings<string> = ["hola", "adios"];

any

Este tipo lo traga todo, vamos como si fuera javascript, deberíamos evitarlo. De hecho si no indicas un tipo, por defecto va a ser any.

Declaración implicita de tipo

En el momento que inicializas una variable, ya queda tipada a fuego.

let myName: string = «Lola»;

// es lo mismo que

let myName = «Lola»;

function

strictChecks

– noImplicitAnys

– strictNullChecks

– «!» Not null assertion

– strict

Definitely Typed

Decorators

implements interface

constructor

narrowing

Diferencias entre type y interface

implements Partial<>

Videocurso de Typescript

[WIP]

Conocimientos previos:

Javascript básico