TypeScript

De Wikijoan
Revisió de 14:55, 3 abr 2019; Joan (Discussió | contribucions)
(dif) ←Versió més antiga | Versió actual (dif) | Versió més nova→ (dif)
Dreceres ràpides: navegació, cerca

Contingut

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:

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 2.8.1
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

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

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

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

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines