TypeScript

De wikijoan
(dif) ← Versió més antiga | Versió actual (dif) | Versió més nova → (dif)
Salta a la navegació Salta a la cerca

Introducció

TypeScript és un llenguatge de programació lliure i de codi obert desenvolupat i mantingut per Microsoft. És un superconjunt (superset) de JavaScript, que essencialment afegeix tipat estàtic i està basat en classes.

TypeScript extén la sintaxi de JavaScript, i per tant qualsevol codi JavaScript existent hauria de funcionar sense problemes. Està pensat per a grans projectes, els quals a través d'un compilador de TypeScript es tradueixen al codi JavaScript original.

El framework Angular està escript amb TypeScript, i és per això important conèixer typescript abans de programar amb Angular:

Why TypeScript?

JavaScript is a great language for developing small size applications but when it comes to large applications, things start to get out of control with complex JavaScript code and many shortcomings in the language. Over the course of the last few years JavaScript has grown a lot and has become the way to go to write cross platform applications. JavaScript applications can run on all platforms including mobile, web and desktop. In that sense, an application written in JavaScript can run on any platform and browser. JavaScript has also proven to be the official language of the web. However, JavaScript when first created, was not meant for that, it was mainly designed for simple uses in small applications. With the dramatic growth in JavaScript usage, it was time to make it right and fill the gaps that JavaScript misses to have it scale to easily and effectively build medium to large size applications.

Tipat estàtic i dinàmic

Tipat estàtic

Un llenguatge de programació utilitza un tipat estàtic quan la comprovació de tipificació es realitza durant la compilació, i no durant l'execució. Exemples: C, C++, Java. Comparat amb el tipat dinàmic, el tipat estàtic permet que els errors de tipificació siguin detectats abans, i que l'execució del codi sigui més eficient i segura.

Tipat dinàmic

Un llenguatge de programació utilitza un tipat dinàmic quan la comprovació de la tipificació es realitza durant l'execució en comptes de la compilació. Exemples: Javascript, Perl, Python. Comparat amb el tipat estàtic, el tipat dinàmic és més flexible, a pesar d'executar-se més lentament i ser més propensos a cometre errors de programació.

Tipat estàtic a TypeScript

El sistema de tipus de Typescript realitza una formalització dels tipus de Javascript, mitjançant una representació estàtica dels seus tipus dinàmics. Això permet als desenvolupadors definir variables i funcions tipades sense perdre l'essència de Javascript. Poder definir els tipus durant el temps de disseny ens ajuda a evitar errors en temps d'execució, como podria ser passar el tipus de variable incorrecte a una funció.

TypeScript, A més a més dels tipus String i Number admet els següents tipus bàsics:

  • Boolean: tipus de dada lògic que representa true o false.
  • Array: tipus de dada estructurat que permet emmagatzemar una col.lecció d'elements.
  • Tuple: similar a l' array, però amb un número fix d'elements.
  • Enum: representa el tipus enumeració.
  • Any: indica que la variable pot ser de qualsevol tipus. És molt útil a l'hora de treballar amb llibreries externes.
  • Void: indica que una funció no retornarà cap valor.
  • Never: aquest tipus representa el tipus de valorss que mai es produiran.

Exemples de cadascun d'aquests tipus:

Primer exemple

Anem a fer la primera aplicació web amb TypeScript.

Instal.lació

El primer que hem de fer és instal.lar TypeScript. Ho podem fer de dues maneres:

  • Via npm (node package manager, els paquest de gestió de Node.js)
  • Utilitzar Visual Studio com a IDE, i instal.lar el plugin de TypeScript. Visual Studio 2017 i Visual Studio 2015 Update 3 inclou TypeScript per defecte. Recordem que TypeScript està creat i mantingut per Microsoft.
$ npm install -g typescript

$ tsc
Version 4.6.3
Syntax:   tsc [options] [file ...]
...

NOTA: si no s'instal.la correctament, és possible que la versió de Node no sigui de les últimes. Instal·lar la última versió de Node. A Ubuntu: 

$ sudo apt-get install nodejs-legacy

script greeter.ts

Amb el teu editor/IDE preferit, crea el script greeter.ts: 

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Fixa't que la sintaxi és Javascript (la paraula reservada let és de Javascript). Diferència entre var i let: 

The difference is scoping. var is scoped to the nearest function block and let is scoped to the nearest enclosing block, which can be smaller than a function block. Both are global if outside any block.

compilem i es genera el script greeter.js: 

$ tsc greeter.ts

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

que en aquest cas és exactament igual.


Ara ja podem començar a utilitzar els avantatges de TypeScript. Afegim l'anotació tipus  : string a la funció person: 

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

I tornem a compilar. Si la varible user no fos un String, la compilació donaria error: 

$ tsc greeter_v2.ts
greeter_v2.ts(8,35): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

De la mateixa manera, també donaria error si cridem a la funció greeter() sense arguments (no dóna error amb Javascript estàndar).

Encara que la compilació provoqui errors, el fitxer greeter.js es crea. Es pot utilitzar TypeScript encara que hi hagi errors en el codi, però TypeScript et notifica els warnings per avisar que el programa podria no funcionar com s'espera.

Interfaces

Ara utilitzarem una interface que descriu objectes amb els camps firstName i lastName. A TypeScript, dos tipus són compatibles si tenen la seva estructura interna compatible. Això permet implementar una interface si senzillament tenim l'estructura que necessita la interface, sense reequerir la clàusula implements.

script person.ts: 

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

Classes

Anem a extendre el nostre exemple utilitzant classes. TypeScript suporta les noves característiques de JavaScript, com ara programació orientat a objectes basat en classes.

Anem a crear la classe Student amb un constructor i uns quants camps públics. Fixar-se bé que les classes i les interfaces treballen bé conjuntament, deixant decidir al programador el nivell d'abstracció desitjat.

Fixar-se que l'ús públic d'arguments en el constructor és una drecera que permet crear automàticament propietats amb aquest nom.

script student.ts: 

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

Mirem el codi generat després de la compilació: student.js: 

var Student = /** @class */ (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());

function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

Veiem que el codi Javascript generat és la mateixa definició d'objectes que utilitzem habitualment a Javascript. Les classes a TypeScript són senzillament una drecera al prototipus d'objectes que utilitzem habitualment a Javascript.

Codi html

Ara només cal ficar el codi Javascript generat en un fitxer HTML: 

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="student.js"></script>
    </body>
</html>

Ja hem fet la nostra primera aplicació web basada en TypeScript.

Playground

Tenim diferents exemples que podem explorar.

Concretament ens fixarem en l'exemple de l'herència. Veiem que és fàcil implementar l'herència a TypeScript, i en canvi és molt complicat de fer-ho directament amb Javascript pur (vanilla).

Feina per l'alumne: fer funcionar l'exemple de l'herència (animals), doncs sobre aquest exemple farem una pràctica.

Característiques

  • TypeScript solves all the problems with JavaScript. It focuses on the developers experience and productivity. TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. TypeScript compiles to JavaScript code which runs on any browser, any host, any OS, or in any JavaScript engine that supports ECMAScript 3 (or newer).
  • TypeScript has now become the smart choice for writing a modern web or JavaScript-based application. It is also known as “JavaScript that scales”. Some modern web development libraries like Angular (starting version 2) actually have TypeScript as the required language of development in order to be able to use the library in your application.
  • TypeScript enables JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing applications. Types are optional, and type inference allows a few type annotations to make a big difference to the static verification of your code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.
  • There is a lot of supporting tools for TypeScript in almost all the development editors or IDEs.
  • TypeScript allows team based development where different members of the team can work on different components of the application using modules.
  • TypeScript catches issues with your code early during development that normally can't be caught in JavaScript until code is run in the browser, resulting in runtime exceptions and errors in your application.
  • TypeScript is open source with a huge community of support. TypeScript is the third most-loved programming technology in the 2017 Stack Overflow Developer Survey.
  • TypeScript is cross platform and can run on any browser, any host, any OS.
  • TypeScript is backwards compatible and can accept all your existing JavaScript code as valid TypeScript code.
  • TypeScript also implements all the features of ECMAScript 2015 (or ES6) that solves many of the core shortcomings of JavaScript, like classes, modules, arrow functions and more. ES6 is the next version of JavaScript but although it exists, it doesn't run on any browser today and thus is not being used. TypeScript allows developers to use all the ES6 features by providing syntactic sugar on top of ES5 which the TypeScript compiler will transcompile into ES5 compliant JavaScript that today's browser can execute.
  • TypeScript can be used to write both client side code (that runs on a browser) and server side code (that runs on the application server) using the Node.js library. That means with TypeScript, you only learn one language to become a full stack web developer. This is not the case with JavaScript today since JavaScript only runs on the client side and can't be used to write server side code, developers need to develop server side applications with other languages like C#, C++, Java, PHP, ..etc. TypeScript implemented features from ES6
  • Strongly typed variables
  • Strongly typed function parameters
  • Classes
  • Interfaces
  • Inheritance
  • Modules which help divide things into building blocks so more than one person can work on developing one application.
  • Support for code refactoring tools because everything in TypeScript can have a type.
  • Support for libraries like Angular and React to use with TypeScript.

Integració de TypeScript amb Sublime Text 3

Per treure'n el màxim de profit, utilitzem la última versió de Sublime Text, la 3.

Per instal.lar el plugin, des de Sublime Text 3 fem

  • Preferences > Package Control > Install Packages

Un cop instal.lat el plugin de TypeScript, configurem el nostre script per tal de què realci la sintaxi.

  • View > Syntax > TypeScript
  • Tools > Build System > TypeScript

Ara ja podem compilar el script .tsc directament, amb la drecera Ctrl-B o F7 (build) (smb la qual cosa ens estalviem de tenir la consola oberta).


creat per Joan Quintana Compte, abril 2018, abril 2022

Obtingut de «http://wiki.joanillo.org/index.php?title=TypeScript&oldid=298968»