Diferencia entre revisiones de «TypeScript Básico»
([feat] Add information about TypeScript Básico) |
([feat] Add information about TypeScript Básico) |
||
Línea 128: | Línea 128: | ||
let data4: void = null; // Ok | let data4: void = null; // Ok | ||
== Variables y Type Annotations == | |||
== Enums y Arrays == | |||
= Funciones = | = Funciones = |
Revisión actual - 14:54 26 ago 2022
General
Tipos de datos
String
El tipo de datos string se utiliza para almacenar información textual. Tanto JavaScript como TypeScript usan comillas dobles ("), así como comillas simples (') para rodear su información textual como una cadena. Una cadena puede contener cero o más caracteres entre comillas.
TypeScript también admite plantillas de cadenas de texto o plantillas de literales. Estas plantillas de literales le permiten incrustar expresiones en una cadena de texto. Las plantillas de literales están encerrados por el carácter de retroceso (`) en lugar de comillas dobles y comillas simples que encierran cadenas de texto regulares. Fueron presentados en ES6. Esto significa que usted obtendrá diferentes resultados de JavaScript en función de la versión a la que esté apuntando.
Ejemplos
Ejemplo 1
// With strictNullChecks set to true let cadena1: string = undefined; // Error let cadena2: string = null; // Error let cadena3: string = ""; let cadena4: string = "y"; let cadena5: string = "building"; let cadena6: string = 3; // Error let cadena7: string = "3";
Ejemplo 2
// With strictNullChecks set to false let cadena1: string = undefined; // Ok let cadena2: string = null; // Ok let cadena3: string = ""; let cadena4: string = "y"; let cadena5: string = "building"; let cadena6: string = 3; // Error let cadena7: string = "3";
Ejemplo 3
Uso de plantillas de literales en TypeScript:
let cadena: string = "pileta"; let metros: number = 100; let sentence: string = `La ${cadena} tiene ${metros} metros de largo.`;
En la compilación en JavaScript:
// Salida ES5 var cadena = "pileta"; var metros = 100; var sentence = "La ".concat(cadena, " tiene ").concat(metros, " metros de largo."); // Salida ES6 let cadena = "pileta"; let metros = 100; let sentence = `La ${cadena} tiene ${metros} metros de largo.`;
Number
Boolean
El tipo de dato boolean solo tiene dos valores válidos. Solo puedes establecer su valor en true o false.
Ejemplo
let bandera1: boolean = true; let bandera2: boolean = false; let bandera3: boolean = 23; // Error let bandera4: boolean = "blue"; // Error
Array
Tuple
Enum
Any
Void
Never
Null
Al igual que en JavaScript, el tipo de datos null en TypeScript solo puede tener un valor válido: null. Una variable null no puede contener otros tipos de datos como número y cadena de texto. Establecer una variable a null borrará su contenido si tuviese alguno.
Recuerde que cuando el indicador strictNullChecks se configura como true en tsconfig.json, solo el valor null se puede asignar a las variables con tipo null. Este indicador está desactivado por defecto, lo que significa que también puede asignar el valor null a variables con otros tipos como number o void.
Ejemplos
Ejemplo 1
// With strictNullChecks set to true let a: null = null; // Ok let b: undefined = null; // Error let c: number = null; // Error let d: void = null; // Error
Ejemplo 2
// With strictNullChecks set to false let a: null = null; // Ok let b: undefined = null; // Ok let c: number = null; // Ok let d: void = null; // Ok
Undefined
Cualquier variable cuyo valor no haya especificado se establece en undefined. Otra manera es establecer explícitamente el tipo de una variable como indefinida.
Observación
Tener en cuenta que una variable como undefined solo puede tener undefined como su valor. Si la opción strictNullChecks está configurada como false, también podrá asignar undefined a variables de tipo numérico y cadenas de texto, etc.
Ejemplos
Ejemplo 1
// With strictNullChecks set to true let data1: undefined = undefined; // Ok let data2: undefined = null; // Error let data3: number = undefined; // Error let data4: void = undefined; // Ok
Ejemplo 2
// With strictNullChecks set to false let data1: null = null; // Ok let data2: undefined = null; // Ok let data3: number = null; // Ok let data4: void = null; // Ok
Variables y Type Annotations
Enums y Arrays
Funciones
Arrow functions
Definiendo y usando Function Types
Definiendo parámetros
Módulos
POO
Usando sobrecarga de métodos
Objetos
Un objeto es una entidad que agrupa un estado y una funcionalidad relacionada.
Clases
Una clase es una plantilla genérica a partir de la cuál instanciamos los objetos. Dicho de otra manera, una clase es una abstracción en la que se define el comportamiento que va a tener el objeto.
Las clases en Typescript son muy similares a lo que nos ofrecen otros lenguajes de orientación a objetos tradicionales, esto nos ayudará a modularizar nuestro código y a simplificar el desarrollo.
Ejemplo
class Employee { // atributo accesible desde fuera de la clase. public name : string; // Atributos accesible desde clases que hereden de Employee. protected age: number; // Access only inside the Employee class. private mobile : string; constructor(name:string, age: number,mobile: string){ this.name = name; this.age = age; this.mobile = mobile; } getName(){ return this.name; } setName(name: string){ this.name = name; } getAge(){ return this.age; } setAge(age: number){ this.age = age; } getMobile(mobile: string){ this.mobile = mobile; } }
Métodos accesores (getters y setters)
Como sabemos, los métodos get y set, también conocidos como métodos accesores, son simples funciones que usamos en las clases para mostrar (get) o modificar (set) el valor de un atributo. Normalmente los escribimos como "get" o "set" seguido del nombre de la propiedad a la que queremos acceder.
getName()
En Typescript se puede hacer de esta forma o haciendo uso de las palabras reservadas get o set delante del nombre de la función.
Ejemplo
class Actor { private _name : string; constructor(_name:string){ this._name = _name; } set name (value: string){ this._name = value; } get name (){ return this._name; } } let actor = new Actor('Haider Malik'); console.log(actor.name); // set actor.name = 'Jane Doe'; console.log(actor.name);
Herencia
La herencia nos permite extender la funcionalidad nuestra clase herendando de una clase padre. La clase hija hereda todos los miembros de su clase base y puede sobreescribir todos aquellos métodos y/o propiedades públicos o protegidos.
Ejemplo
class Manager extends Employee { constructor(name: string, age: number, mobile: string){ super(name,age,mobile); this.age = 24; } } let manager = new Manager(‘Jane’,23, ‘0343–23332233’); console.log(manager.getName()); console.log(manager.getAge());
Clases abstractas
Este tipo de clases no pueden ser instanciadas ya que se usan para definir comportamientos independientemente de su concreción. Su implementación es similar a la de una clase normal con la diferencia que hay que anteponer el termino abstract antes de declararlas.
Ejemplo
abstract class Product { productName: string = "Default"; price: number = 1000; abstract changeName(name: string): void; calcPrice(){ return this.price; } } class Mobile extends Product { changeName(name: string): void { this.productName = name; } } let mobProduct = new Mobile(); console.log(mobProduct); mobProduct.changeName("Super It Product"); console.log(mobProduct);
Interfaces
Las interfaces son abstracciones que definen el comportamiento de las clases que la implementan. Son muy prácticas ya que nos permiten decirle al compilador cual es el comportamiento que debe esperar del objeto que definamos. TypeScript no requiere que un objeto tenga exactamente la misma estructura definida por la interfaz. Para que se los considere válidos, los objetos pueden tener cualquier forma siempre que definan las funciones y propiedades requeridas por la interfaz que implementan.
Ejemplo
interface ICar{ engine: string; color: string; brake: () => void; } class Car implements ICar { constructor (public engine: string, public color: string) {} function brake(){ console.log("Frenando...") } }
Decoradores
Los decoradores son un estándar propuesto en ECMAScript2016. En TypeScript podemos habilitarlos añadiendo a nuestro tsconfig.json la directiva "experimentalDecorators: true".
Ejemplo
{ "compilerOptions": { "module": "commonjs", "target": "es2015", "removeComments": true, "experimentalDecorators": true, "outDir": "./build" }, "include": ["src/**/*"] }
Los decoradores son un mecanismo para modificar clases, métodos, propiedades e incluso parámetros de forma declarativa.