TypeScript Tutorial: ¿Qué es una interfaz, una enumeración y un array?

¿Qué es TypeScript?

TypeScript es un superconjunto de JavaGuión. TypeScript es un lenguaje de programación orientado a objetos que admite clases, interfaces y más. Es un lenguaje de código abierto desarrollado por Microsoft que compila estáticamente el código para JavaScript. Se puede ejecutar fácilmente en un navegador o en Node.js.

Todas las funciones más recientes lanzadas para ECMAScript son compatibles con TypeScripty además TypeScript tiene sus propias características orientadas a objetos, como interfaces, declaraciones ambientales y herencia de clases, que ayudan en el desarrollo.ping una aplicación grande que de otro modo sería difícil de construir JavaScript.

La relación es unidireccional. Cada relación válida JavaEl archivo de script ya es válido. TypeScript, pero lo contrario no es cierto, porque las anotaciones de tipo existen solo en TypeScript y se borran durante la compilación.

¿Por qué utilizar TypeScript?

Aquí están los beneficios importantes de usar TypeScript:

• Proyectos grandes y complejos en JavaLos scripts son difíciles de codificar y mantener.
• TypeScript Ayuda mucho con la organización del código y elimina la mayoría de los errores durante la compilación, en lugar de en tiempo de ejecución.
• TypeScript Admite bibliotecas JS y documentación de la API.
• Es un lenguaje de scripting con tipado opcional, por lo que los tipos se pueden adoptar gradualmente.
• TypeScript El código se puede convertir en texto plano. JavaCódigo de script para cualquier navegador.
• Proporciona una mejor estructuración del código y técnicas de programación orientada a objetos.
• Permite un mejor soporte de herramientas en tiempo de desarrollo, incluyendo autocompletado y refactorización segura.
• Puede extender el lenguaje más allá del estándar, con características como los decoradores.

La principal ventaja práctica reside en la compatibilidad con el editor. Dado que el compilador conoce la estructura de cada valor, un editor puede renombrar una propiedad en todo el proyecto e informar de cada lugar donde ya no coincida.

TypeScript Nuestra historia

Veamos los hitos importantes de la historia de TypeScript:

• Después de dos años de desarrollo interno en Microsoft, TypeScript La versión 0.9 se lanzó en 2013.
• TypeScript La versión 1.0, con soporte adicional para genéricos, se lanzó en Build 2014.
• En julio de 2014, un nuevo TypeScript Llegó un compilador que era cinco veces más rápido que la versión anterior.
• En julio de 2015, se añadió compatibilidad con los módulos ES6, la palabra clave namespace, for…of y los decoradores.
• En noviembre de 2016, se añadieron los tipos mapeados, los tipos de clave y búsqueda, y el resto y la propagación de objetos.
• El 27 de marzo de 2018 se añadieron tipos condicionales y una función keyof mejorada con tipos de intersección.
• TypeScript La versión 5.0, lanzada en marzo de 2023, modernizó los decoradores y redujo el tamaño del paquete.
• TypeScript La versión 6.0 llegó en marzo de 2026 como la versión final construida sobre la base de JavaCódigo fuente del script.
• TypeScript 7.0 traslada el compilador a una implementación nativa de Go, que Microsoft Según los informes, es aproximadamente diez veces más rápido que la versión 6.0.

Quien usa TypeScript?

TypeScript Ya no es una opción minoritaria. Es la base de varias de las herramientas de front-end y back-end más utilizadas, y la siguiente lista muestra dónde es más probable que un principiante se la encuentre.

• Angular: El framework Angular está escrito en TypeScripty se espera que el código de la aplicación también esté escrito en él.
• Proyectos de React y Vue: Ambos ecosistemas envían oficiales TypeScript Las plantillas, y la mayoría de los programas de inicio modernos, lo habilitan por defecto.
• Backends de Node.js: Los marcos de servidor como NestJS están construidos en torno a TypeScript clases y decoradores.
• Herramientas de edición: Visual Studio Code es en sí mismo un gran TypeScript código fuente, por eso su compatibilidad con diferentes idiomas es tan completa.
• Interfaces de usuario para grandes empresas: Los equipos que trabajan con muchos colaboradores lo adoptan para detectar errores de integración antes del despliegue.

Cómo descargar e instalar TypeScript

Aquí está el proceso paso a paso para descargar e instalar. TypeScript:

Paso 1) Descargue e instale Nodejs

Ve al sitio oficial de Node.js, https://nodejs.org/en/download/y descarga e instala Node.js para tu sistema operativo. Encontrarás instrucciones detalladas en la guía sobre Cómo descargar e instalar Node.js.

Paso 2) Verifique la versión de Nodejs y npm

Para comprobar si Node.js y npm están instalados, verifique la versión en la línea de comandos.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Cualquier versión LTS actual de Node funciona. TypeScript Para ejecutar el compilador, solo se requiere una versión de Node compatible.

Paso 3) TypeScript Instalación

Crea el directorio de tu proyecto typeproject\ y ejecuta npm init, como se muestra en el comando a continuación:

npm init

Paso 4) Inicie la instalación

Esto crea el archivo package.json, que almacenará las dependencias de nuestro proyecto.

Una vez hecho esto, instale TypeScript como sigue:

npm -g install typescript

El comando anterior se encargará de instalar TypeScriptAgregar “-g” a npm install instalará TypeScript globalmente. La ventaja de usar -g es que podrá usar el TypeScript tsc comando desde cualquier directorio, ya que está instalado globalmente. En caso de que no desee instalar TypeScript A nivel global, utilice el siguiente comando:

npm install --save-dev typescript

Crea una carpeta src\ en el directorio de tu proyecto y dentro de src\ crea la TypeScript archive test.ts y escriba su código.

Ejemplo: prueba.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

Compilar TypeScript codificar a Javascript

Para compilar el código anterior, utilice el siguiente comando.

If TypeScript Si se instala globalmente, utilice el siguiente comando:

tsc test.ts

If TypeScript está instalado localmente en su proyecto, necesita usar la ruta de TypeScript desde node_modules, como se muestra, o ejecútelo a través de npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

El comando anterior creará un archivo test.js que tendrá el código compilado a JavaGuión.

Ejemplo: prueba.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Implementación Javascript usando nodejs

Ahora ejecutaremos test.js en Nodejs de la siguiente manera:

D:\typeproject\src>node test.js
15

El valor que se pasa a console.log se muestra cuando se ejecuta test.js.

Implementación JavaScript en el navegador

Ejemplo:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Compilar TypeScript codificar a Javascript usando la versión EcmaScript

TypeScript Admite todas las características de ECMAScript publicadas, y los desarrolladores pueden utilizarlas al programar. Sin embargo, no todas las características nuevas son compatibles con navegadores antiguos, por lo que es posible que deba compilar para una versión anterior de ECMAScript. TypeScript Proporciona opciones de compilación que hacen precisamente eso.

Ejemplo: prueba.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Para compilar en la versión ES de su elección, puede usar la opción target o t en su comando de la siguiente manera:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Por defecto, el compilador clásico tiene como destino ES3. Si desea cambiarlo, puede usar el comando anterior.

Por el momento utilizaremos ES6 como destino:

tsc --target ES6  test.ts

prueba.ts a prueba.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

El código permanece sin cambios, ya que la función flecha que has utilizado es una característica de ES6 y no se modifica al compilarse a ES6.

Por defecto, el destino es ES3, por lo que sin un destino se obtiene test.js como:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Así que aquí, la flecha gruesa se cambia por una función anónima normal.

Variables en TypeScript

Variables se utilizan para almacenar valores y el valor puede ser una cadena, un número, un valor booleano o una expresión. Cuando se trata de variables en TypeScript, son similares a JavaScript. Así que aprendamos a declarar y asignar un valor a las variables en TypeScript.

Las variables no se pueden usar en el código sin estar definidas. Para declarar una variable puedes usar

var palabra clave,

let keyword

const keyword

Trabajar con variables en TypeScript es parecido a JavaScript y usuarios familiarizados con JavaA Script le resultará muy fácil. En el código moderno, let y const son preferidos sobre var, porque su ámbito de bloque previene toda una clase de errores.

Declarar variables usando var

Sintaxis:

var firstname = "Roy";

Echemos un vistazo a algunos TypeScript ejemplos para comprender el funcionamiento de la palabra clave var y también el alcance de las variables declaradas usando la var palabra clave.

Ejemplo 1:

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

Ejemplo 2:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

Ejemplo 3:

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Declarar variables usando let

El TypeScript La sintaxis de let es la siguiente:

Sintaxis:

let name = "Roy";

El funcionamiento de la let La variable es casi lo mismo que var, pero con una diferencia importante, que el siguiente ejemplo demuestra.

Ejemplo:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

Lo anterior TypeScript El ejemplo genera un error, pero el mismo código habría funcionado con el var palabra clave. Variables declaradas usando let Están disponibles únicamente dentro del bloque en el que se declaran. En este ejemplo, t existe solo dentro del bloque if, no en toda la función.

Lo mismo se aplica dentro de cualquier función, bucle for, bucle while o bloque switch. Una variable let solo está disponible dentro de ese bloque, y hacer referencia a ella fuera genera un error. Esta es la principal diferencia entre var y let.

Declarar variables usando const

Const significa variables constantes. Son similares a las variables let, con la diferencia de que una vez asignado un valor, este no se puede modificar. Por lo tanto, una declaración const debe inicializarse en la misma línea.

Sintaxis:

const name = "Roy";

Ejemplo:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Por lo tanto, utilice `const` siempre que sepa que el valor asignado no se reasignará. Tenga en cuenta que `const` impide la reasignación del enlace, no la modificación del objeto al que apunta.

tipos en TypeScript

TypeScript es un lenguaje fuertemente tipado, mientras que JavaEl script no lo es. Una variable cuyo valor está definido como una cadena se puede cambiar a un número sin ningún problema en JavaGuion. Lo mismo no se tolera en TypeScript. En TypeScript, el tipo de una variable se define al inicio y, durante toda la ejecución, debe mantener ese tipo. Cualquier cambio conlleva un error de compilación durante la compilación a JavaGuión.

Los siguientes son los tipos básicos:

Número

Solo acepta números enteros, decimales, fracciones y valores numéricos similares.

Sintaxis:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Aquí se presentan algunos métodos importantes que se pueden utilizar con tipos de números:

toFixed () – convertirá el número a una cadena de texto y conservará los decimales indicados al método.

Encadenar() – este método convertirá el número en una cadena de texto.

valor de() – este método devolverá el valor primitivo del número.

toPrecision () – este método formateará el número a una longitud especificada.

Ejemplo: con todos los métodos numéricos

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

Cordón

Cadena: solo valores de cadena.

Sintaxis:

let str :string = "hello world";

Aquí se presentan algunos métodos importantes que se pueden utilizar con tipos de cadena:

• split() – este método dividirá la cadena en una matriz.
• charat() – este método devolverá el carácter en el índice dado.
• índice de() – este método dará la posición de la primera aparición del valor que se le dé.
• reemplazar() – este método toma 2 cadenas. Busca el primer valor en la cadena y, si está presente, lo reemplaza con el segundo, devolviendo una nueva cadena.
• recorte() – este método eliminará los espacios en blanco de ambos lados de la cadena.
• substr() – este método devolverá una parte de la cadena, dependiendo de la posición inicial y la longitud dada.
• subcadena() – este método devolverá una parte de la cadena, dependiendo de las posiciones inicial y final. El carácter en la posición final se excluye.
• aMayúsculas() – convertirá la cadena a mayúsculas.
• aLowerCase() – convertirá la cadena a minúsculas.

Ejemplo:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

Boolean

Un booleano solo acepta los valores lógicos verdadero y falso. A diferencia de un simple JavaEn el script, los números 0 y 1 no se aceptan porque son de tipo numérico.

Sintaxis:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Año

Sintaxis:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Variables declaradas usando el cualquier El tipo puede contener una cadena, un número, una matriz, un valor booleano o un valor vacío. TypeScript no generará ningún error de compilación, lo cual es similar a las variables en JavaScript. Utilice el tipo "cualquiera" solo cuando no esté seguro del tipo de valor que se asociará con esa variable, ya que desactiva todas las comprobaciones de ese valor.

Void

El tipo void se utiliza principalmente como tipo de retorno de una función que no devuelve nada.

Sintaxis:

function testfunc():void{
 //code here
}

TypeScript Formación

An Formación in TypeScript es un tipo de dato en el que se pueden almacenar múltiples valores. Aprendamos cómo declarar y asignar valores para operaciones de matrices en TypeScript.

Desde TypeScript Es un lenguaje fuertemente tipado, por lo que debes especificar el tipo de dato de los valores en un array. De lo contrario, se tratará como de tipo cualquiera.

Declarar e inicializar una matriz

Sintaxis:

let nameofthearray : Array<typehere>

Ejemplo

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Diferentes formas de acceder a elementos desde una matriz

Para obtener los elementos de una matriz, los valores comienzan desde el índice 0 hasta la longitud de la matriz menos uno.

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

También puedes obtener los elementos de una matriz usando un TypeScript por la loops, Como se muestra abajo.

El uso de TypeScript en bucle

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

Salida:

2016
2017
2018
2019

Usando bucle for-in

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

Salida:

2016
2017
2018
2019

Usando bucle for-of

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

Salida:

2016
2017
2018
2019

Usando el bucle forEach

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

Salida:

2016
2017
2018
2019

TypeScript Métodos de matriz

El TypeScript El objeto Array cuenta con numerosas propiedades y métodos que facilitan a los desarrolladores el manejo de arrays de forma sencilla y eficiente. Para obtener el valor de una propiedad, basta con especificar arrayname.property, y para obtener el resultado de un método, basta con especificar arrayname.method().

Ejemplo de propiedad de longitud

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

Ejemplo de método inverso

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

Ejemplo de método de clasificación

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

Ejemplo de método pop

console.log(months.pop()); // Dec

Ejemplo de método de turno

console.log(months.shift()); // Jan

Ejemplo de método push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

Ejemplo de método concat

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

clase en TypeScript

TypeScript es un superconjunto de JavaGuion, así que todo lo que sea posible en JavaEl script también es posible en TypeScript. La clase es una característica añadida a partir de ES6. Anteriormente en JavaEn Script, la funcionalidad similar a la de una clase se logró utilizando una función con métodos prototipo para reutilizar código. Usando clases, su código puede acercarse a lenguajes como Java, C# y Pythondonde el código se puede reutilizar fácilmente.

Definición de una clase en TypeScript

Aquí está la sintaxis básica de la clase en TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

Ejemplo: un ejemplo práctico en Class

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

En el ejemplo anterior, tienes una clase llamada Estudiantes. Tiene las propiedades edad, nombre y número de matrícula.

Constructor en un TypeScript Clase

La clase Students definida anteriormente tiene un constructor como se muestra a continuación:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

El método constructor tiene los parámetros edad, nombre y número de matrícula. El constructor se encarga de inicializar las propiedades cuando se instancia la clase. Se accede a las propiedades mediante el este vídeo Palabra clave, por ejemplo this.age para acceder a la edad y this.roll_no para acceder al número de matrícula. También puede tener un constructor predeterminado, como se muestra a continuación:

constructor () {}

Métodos dentro de un TypeScript Clase

En la clase Students hay métodos definidos, por ejemplo getRollNo(), getName() y getAge(), que devuelven los valores de las propiedades roll_no, name y age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Creación de una instancia de una clase en TypeScript

In TypeScriptPara crear una instancia de una clase, se utiliza el operador `new`. Al crear una instancia con `new`, se obtiene un objeto que puede acceder a las propiedades y métodos de la clase, como se muestra a continuación:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

Compilando una TypeScript clase a JavaScript

Puede utilizar el comando tsc como se muestra a continuación para compilar a JavaGuión.

Command: tsc  Students.ts

La salida del JavaEl código del script en compilación es el que se muestra a continuación:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In JavaEn el script, la clase se convierte en una función autoinvocada.

Herencia de clase

Las clases se pueden heredar usando el Se extiende palabra clave en TypeScript.

Sintaxis de herencia de clases:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

clase B podrá compartir clase A métodos y propiedades.

Aquí tenéis un ejemplo práctico de una clase que utiliza herencia:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

Tienes dos clases, Persona y Estudiante. Estudiante hereda de Persona, y el objeto creado a partir de Estudiante puede acceder a sus propios métodos y propiedades, así como a los de la clase de la que hereda.

Ahora vamos a añadir algunos cambios a la clase anterior.

Ejemplo:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

La diferencia con respecto al ejemplo anterior radica en un constructor definido en la clase Student. Este constructor recibe los mismos parámetros que la clase base, además de cualquier parámetro adicional propio.

In TypeScript Debes llamar a `super` con todos los parámetros de la clase base. Esta debe ser la primera instrucción dentro del constructor, ya que `super` ejecuta el constructor de la clase derivada. Cualquier propiedad declarada por la clase derivada, como `tmarks`, debe asignarse explícitamente; de ​​lo contrario, `getMarks` devolvería `undefined`.

Modificadores de acceso en TypeScript

TypeScript Admite los modificadores de acceso público, privado y protegido en sus métodos y propiedades. Por defecto, si no se especifica ningún modificador de acceso, el método o la propiedad se consideran públicos y son fácilmente accesibles desde el objeto de la clase.

En el caso de los modificadores de acceso privado, los miembros no están disponibles desde el objeto de la clase y están destinados a ser utilizados únicamente dentro de la clase. No están disponibles para una clase heredada.

En el caso de los modificadores de acceso protegido, los miembros están destinados a ser utilizados dentro de la clase y la clase heredada, y no son accesibles desde el objeto de la clase.

Ejemplo:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena

Interfaz en TypeScript

Una de las características principales de TypeScript Las interfaces son conjuntos de reglas que debe implementar la entidad que las utiliza. Esta entidad puede ser una clase, una función o una variable. Una interfaz puede estar compuesta por propiedades y métodos. Se puede marcar una propiedad o un método como opcional mediante el signo de interrogación (?). La interfaz añade una comprobación de tipos estricta para cualquier función, variable o clase que la implemente.

Sintaxis de una interfaz en TypeScript

interface Dimension {
    width: string;
    height: string;
}

Has definido una interfaz llamada Dimension que tiene las propiedades width y height, ambas de tipo string.

Esta interfaz puede implementarse mediante una variable, una función o una clase. Aquí se muestra un ejemplo de una variable que implementa la interfaz Dimensión.

Ejemplo:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

La firma de la interfaz Dimension tiene ancho y alto, y ambos son obligatorios. Si falta alguna propiedad o se cambia un tipo, dará un error de compilación al compilar el código. JavaGuión.

El código anterior, cuando se compila a JavaEl script tiene el siguiente aspecto:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Veamos ahora cómo utilizar una interfaz con una función.

Utilizar una interfaz en una función como tipo de retorno

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

En el ejemplo anterior, la interfaz Dimension se utiliza como tipo de retorno de la función getDimension(). El valor de retorno debe coincidir con las propiedades y los tipos declarados en la interfaz.

El compilado JavaEl código del script será el siguiente:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Durante la compilación, si el tipo de retorno no coincide con la interfaz, se producirá un error.

Interfaz como parámetro de función

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

En el ejemplo anterior, se ha utilizado la interfaz Dimension como parámetro de la función getDimension(). Al llamar a la función, el parámetro que se le pasa debe coincidir con las reglas definidas por la interfaz.

El compilado JavaEl código del script será el siguiente:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Clase que implementa una interfaz

Para utilizar una interfaz con una clase, debe usar la palabra clave implementos.

Sintaxis para una clase que implementa una interfaz:

class NameofClass implements InterfaceName {
}

El siguiente ejemplo muestra una interfaz que funciona con una clase.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

En el ejemplo anterior, se ha definido la interfaz Dimension con las propiedades width y height, ambas de tipo string, y un método llamado getWidth() que devuelve una cadena.

El compilado JavaEl código del script será el siguiente:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Funciones en TypeScript

Las funciones son conjuntos de instrucciones ejecutadas para llevar a cabo una tarea. JavaEn un script, la mayor parte del código está escrito en forma de funciones y estas juegan un papel importante. TypeScript Tienes clases, interfaces, módulos y espacios de nombres disponibles, pero las funciones siguen desempeñando un papel importante. La diferencia entre una función en JavaGuión y TypeScript ¿Están disponibles los tipos de parámetros y de retorno con un TypeScript función.

JavaFunción de script:

function add (a1, b1) {
   return a1+b1;
}

TypeScript función:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

En la función anterior, el nombre de la función es add, los parámetros son a1 y b1, ambos de tipo número, y el tipo de retorno también es un número. Si pasas una cadena a la función, generará un error de compilación al compilar a JavaGuión.

Realizar una llamada a la función: agregar

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

Los parametros a1 y b1 Son obligatorios y su omisión provocará un error. Los tipos de parámetros y el tipo de retorno son igualmente importantes y no pueden modificarse una vez definidos.

Parámetros opcionales de una función.

In JavaEn el script, todos los parámetros de las funciones son opcionales y se consideran indefinidos si no se pasan. Lo mismo no es cierto en TypeScriptUna vez definidos los parámetros, deberá proporcionarlos. Si desea que un parámetro sea opcional, añada un signo de interrogación después del nombre del parámetro, como se muestra a continuación:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

Tenga en cuenta que los parámetros opcionales deben definirse al final. No puede tener el primer parámetro opcional y el segundo obligatorio, ya que el compilador no sabría qué valor se proporcionó.

Asignar valores predeterminados a los parámetros

Puede asignar valores predeterminados a los parámetros como se muestra a continuación:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Al igual que los parámetros opcionales, los parámetros inicializados por defecto también deben mantenerse al final de la lista de parámetros.

Parámetros de descanso

Has visto como TypeScript maneja parámetros obligatorios, parámetros opcionales y parámetros con valores predeterminados. Ahora veremos los parámetros rest. Los parámetros rest son un grupo de parámetros opcionales definidos juntos, usando tres puntos (…) seguido del nombre del parámetro, que es una matriz.

Sintaxis de los parámetros de descanso:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Como se muestra arriba, el parámetro rest es un array precedido por tres puntos. Este array contendrá todos los argumentos restantes que se pasen a la función.

Ejemplo:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

Funciones de flecha

Una función de flecha es una de las características importantes lanzadas en ES6 y está disponible en TypeScript También. La sintaxis tiene una flecha gruesa, de ahí viene el nombre.

Sintaxis de la función de flecha:

var nameoffunction = (params) => {
 // code here
}

¿Para qué sirve una función flecha?

Veamos un ejemplo para comprender el caso de uso de una función flecha.

Ejemplo:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Has creado una función con una propiedad score inicializada a 0, y un método getScore que internamente usa setTimeout y, después de un segundo, registra this.score. El valor registrado es indefinido a pesar de que this.score está definido e inicializado. El problema radica en el este vídeo palabra clave. La función dentro de setTimeout tiene su propio this, y como score no está definido en él, el resultado es indefinido.

Lo mismo se puede lograr usando una función flecha, como se muestra a continuación:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Una función de flecha no tiene su propia este vídeo y, en cambio, comparte la de su ámbito padre, por lo que las variables declaradas fuera son accesibles con esto dentro de una función flecha. Son útiles por su sintaxis más corta, así como para funciones de devolución de llamada, manejadores de eventos y funciones de temporización.

TypeScript Enumeraciones

A TypeScript Un enum es un objeto que contiene una colección de valores relacionados almacenados juntos. JavaScript no admite enumeraciones de forma nativa. La mayoría de los lenguajes de programación como Java, C y C++ admitir enumeraciones y TypeScript También los hace disponibles. Los enumerados se definen utilizando la palabra clave enum.

¿Cómo declarar una enumeración?

Sintaxis:

enum NameofEnum {
   value1,
   value2,
    ..
}

Ejemplo: enumeración

enum Directions {
    North,
    South,
    East,
    West
}

En el ejemplo anterior, se ha definido una enumeración llamada Direcciones con los valores Norte, Sur, Este y Oeste. Los valores se numeran desde 0 para la primera entrada y aumentan en 1 para cada entrada subsiguiente.

Declara una enumeración con un valor numérico.

Por defecto, si a un miembro de una enumeración no se le asigna un valor, se le asigna un número que comienza en 0. El siguiente ejemplo muestra una enumeración con valores numéricos explícitos.

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

También puede asignar un valor inicial, y los miembros siguientes recibirán valores incrementados. Por ejemplo:

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

Ahora bien, el norte comienza en 5, por lo que el sur es 6, el este es 7 y el oeste es 8.

También puede asignar valores de su elección en lugar de los predeterminados. Por ejemplo:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

¿Cómo acceder a una enumeración?

El siguiente ejemplo muestra cómo utilizar una enumeración en su código:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

El compilado JavaEl guion es el siguiente:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Desde JavaEl script no admite enumeraciones; el compilador convierte la enumeración en una función autoinvocada, como se muestra arriba. La doble asignación es lo que crea el mapa inverso.ping del número al nombre.

Declara una enumeración con un valor de cadena.

Puedes asignar valores de cadena de texto a tu elección, como se muestra en el ejemplo siguiente.

Ejemplo:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

El compilado JavaEl guion es el siguiente:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

¿Cuáles son los módulos en TypeScript?

Archivos creados en TypeScript tienen acceso global, lo que significa que las variables declaradas en un archivo pueden ser accedidas en otro archivo. Esta naturaleza global puede causar conflictos de código y problemas en tiempo de ejecución. La funcionalidad de exportación e importación de módulos puede usarse para evitar conflictos de variables y funciones globales. Esta característica llegó en JavaScript con la versión ES6 y también es compatible con TypeScript.

¿Por qué necesitas módulos en TypeScript?

El siguiente ejemplo muestra el problema sin módulos.

Ejemplo prueba1.ts

let age : number = 25;

Ha definido una edad variable de tipo número en test1.ts.

Ejemplo prueba2.ts

En test2.ts puedes acceder a la variable edad Definido en test1.ts y también modificado, como se muestra a continuación:

age = 30; // changed from 25 to 30.
let _new_age = age;

Esto puede generar muchos problemas, ya que las variables están disponibles globalmente y pueden modificarse desde cualquier lugar.

Con módulosEl código escrito permanece local al archivo y no se puede acceder a él desde fuera. Para compartir cualquier elemento de un archivo, este debe exportarse mediante la palabra clave `export`. Exportar Se utiliza cuando se desea que una variable, clase, función o interfaz se utilice en otro archivo. Importar Se utiliza cuando se desea acceder a un elemento exportado. De esta forma, el código permanece intacto dentro del archivo, e incluso si se definen los mismos nombres de variables, no se mezclan.

Usando Exportar e Importar

Existen muchas formas de exportar e importar. Analizaremos la sintaxis más utilizada.

La sintaxis para importar y exportar 1:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

A continuación se muestra un ejemplo práctico que utiliza exportar e importar.

prueba1.ts

export let age: number = 25;

La palabra clave `export` se utiliza para compartir la variable de edad con otro archivo.

prueba2.ts

import { age } from "./test1"
let new_age :number = age;

La palabra clave import se utiliza para acceder a edad variable y debe especificar la ubicación del archivo como se muestra arriba.

Sintaxis para importar y exportar 2:

Existe otra forma de exportar e importar, y la sintaxis es la que se muestra a continuación:

export = classname;

import classname = require("file path of modulename")

Cuando estas usando exportar = Para exportar su módulo, la importación debe usar require(“ruta del archivo del nombre del módulo”).

Aquí hay un ejemplo práctico que ilustra ese caso.

Cliente.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

pruebaCliente.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Cargador de módulos

Los módulos no pueden funcionar por sí solos, por lo que necesita un cargador de módulos para localizar las dependencias de importación, como se ve en el TypeScript ejemplos anteriores. Los cargadores de módulos disponibles son CommonJS para Node.js y Require.js para ejecutarse en el navegador.

Para compilar código utilizando el formato de módulo CommonJS, utilice el siguiente comando:

tsc --module commonjs testCustomer.ts

Para compilar código utilizando el formato de módulo Requirejs, utilice el siguiente comando:

tsc --module amd testCustomer.ts

Los archivos dependientes se convertirán a archivos js con el comando anterior.

Ejemplo de conversión de testCustomer.ts a testCustomer.js usando Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Ejemplo de conversión de Customer.ts a Customer.js usando Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Para probarlo usando require.js, necesitas crear un archivo llamado main.js que haga referencia a las dependencias como se muestra.

Aquí está la estructura de carpetas:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

principal.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

Espacios de nombres en TypeScript

Un espacio de nombres contiene una colección de clases, interfaces, variables y funciones juntas en un solo archivo.

Sintaxis del espacio de nombres

namespace name{

export class {
}

export interface {
}

export const constname;

}

El código relacionado está disponible bajo un mismo espacio de nombres.

Ejemplo de trabajo del espacio de nombres: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

El nombre del espacio de nombres es Configuración del estudiantey has añadido una interfaz StudDetails, una función addSpace y una clase llamada Student.

Acceso a un espacio de nombres

A continuación se muestra el código donde se utiliza el espacio de nombres. Configuración del estudiante.

pruebaStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

La clase, interfaz o función disponible dentro de un espacio de nombres debe referenciarse utilizando el nombre del espacio de nombres, por ejemplo StudentSetup.addSpace para acceder a la función y ConfiguraciónEstudiante.Estudiante para acceder a la clase.

Puedes compilar ambos archivos en un único archivo js como se muestra a continuación:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Compruebe la salida en la línea de comandos utilizando el siguiente comando:

node namespace.js

Salida:

The name is :H a r r y

Declaraciones ambientales en TypeScript

TypeScript te permite usar terceros JavaArchivos de script que utilizan declaraciones ambientales. La ventaja de esta característica es que no es necesario reescribir la biblioteca y, sin embargo, se pueden utilizar todas sus características con comprobación de tipos. TypeScript.

Sintaxis ambiental

Para declarar un módulo ambiental:

declare module moduleName {
   //code here
}

El archivo de entorno debe guardarse como:

filename.d.ts

Para usar el archivo nombre de archivo.d.ts En tu archivo .ts debes hacer referencia a él de la siguiente manera:

/// <reference path="filename.d.ts"/>

La declaración de tipo ambiental en TypeScript Se refiere a la biblioteca de terceros y redeclara las funciones requeridas con sus propios tipos. Por ejemplo, considere el pequeño JavaBiblioteca de scripts que se muestra a continuación.

Terceros JavaArchivo de script: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Tienes un objeto llamado StringChecks que tiene las funciones isString, convertToUpperCase, convertToLowerCase y convertToStringBold.

Creación de un módulo ambiental en TypeScript

Ahora crearemos un módulo ambiental que haga referencia al JavaEl script funciona como se indica arriba y agrega comprobaciones de tipo según sea necesario.

Nombre de archivo: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Se define un módulo llamado TestString y se exporta la interfaz StringsFunc. Cada firma indica qué acepta y qué devuelve la función:

• isString(cadena: cadena): booleano – Recibe una cadena de texto y devuelve un valor booleano. Si se le pasa un número o cualquier otro tipo, se producirá un error de compilación.
• convertirAMayúsculas(str: cadena): cadena – Recibe una cadena de texto y devuelve una cadena de texto.
• convertiraMinúsculas(str: cadena): cadena – Recibe una cadena de texto y devuelve una cadena de texto.
• convertToStringBold(cadena: cadena): cadena – Recibe una cadena de texto y devuelve una cadena de texto.

Puesto que el JavaEl archivo de script expone el nombre del objeto StringChecks, y finalmente nos referimos al mismo nombre en el archivo .d.ts:

declare var StringChecks: TestString.StringsFunc;

Utilizando un módulo Ambient en TypeScript

Aquí está el archivo test.ts que utiliza el archivo de entorno tstring.d.ts.

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Compila con tsc test.ts para generar test.js:

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Ahora puedes usar test.js en un archivo HTML junto con el archivo de biblioteca testString.js.

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

Salida:

true
HELLO WORLD
hello
<b>Hello World</b>

Para continuar, compare los dos idiomas directamente en TypeScript vs JavaScript, volver a visitar JavaMétodos de matriz de script para los equivalentes no tipificados utilizados aquí, y estudio bucles en JavaScript y interno y externo JavaScript para los fundamentos del navegador en los que se basa la salida compilada.

Preguntas Frecuentes