TypeScript Tutorial: qué es, interfaz, enumeración, matriz con ejemplo

¿Qué es TypeScript?

TypeScript es un superconjunto de JavaGuión. TypeScript es un lenguaje de programación puro orientado a objetos que admite clases, interfaces, etc. 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 Nodejs.

Todas las funciones más recientes lanzadas para ECMAScript son compatibles con TypeScript y además de ello TypeScript tiene sus propias características orientadas a objetos como interfaces, declaración de entorno, herencia de clases, etc., que ayudan a desarrollar una aplicación grande que de otra manera sería difícil de hacer en JavaGuión.

Cómo descargar e instalar TypeScript

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

Paso 1) Descargue e instale Nodejs

Vaya al sitio oficial de nodejs: https://nodejs.org/en/download/ y descargue e instale nodejs según su sistema operativo. Las instrucciones detalladas sobre cómo descargar nodejs están disponibles aquí: https://www.guru99.com/download-install-node-js.html

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

Para verificar si nodejs y npm están instalados, simplemente verifique la versión en su símbolo del sistema.

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Entonces tienes instalados nodejs v10 y npm 6.

Paso 3) TypeScript Instalación

Cree el directorio de su proyecto tipoproject/ y ejecute npm init, como se muestra en el siguiente comando:

npm init

Paso 4) Inicie la instalación

Ahora crearemos el paquete .json que almacenará las dependencias de nuestro proyecto.

Una vez hecho instalar 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ás usar TypeScript tsc comando desde cualquier directorio ya que está instalado globalmente. En caso de que no quieras instalar TypeScript use globalmente el siguiente comando:

npm --save install typescript

Cree la carpeta src/ en el directorio de su proyecto y en la carpeta src/ cree 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 está instalado globalmente use el siguiente comando:

tsc test.ts

If TypeScript está instalado localmente en su proyecto, debe utilizar la ruta de TypeScript desde node_modules como se muestra:

node_modules/typescript/bin/tsc test.ts

El comando anterior creará un archivo test.js y tendrá el código compilado en javascript.

Ejemplo: prueba.js

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

Implementación Javascript usando nodejs

En este TypeScript tutorial, ejecutaremos test.js en nodejs de la siguiente manera:

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

El valor consolado se muestra en la ejecución de 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 Es compatible con todas las funciones de Ecmascript publicadas y los desarrolladores pueden utilizarlas mientras codifican. Sin embargo, no todas las nuevas funciones son compatibles con navegadores más antiguos, por lo que es necesario compilar JavaScript en una versión anterior de Ecmascript. TypeScript proporciona opciones de compilación que pueden hacerlo.

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

De forma predeterminada, el objetivo es ES3. En caso de que desee cambiarlo, puede utilizar el comando anterior.

Actualmente usaremos ES6 en este TypeScript tutorial como objetivo:

tsc --target ES6  test.ts

prueba.ts a prueba.js

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

addnumbers(10, 20);

El código permanece como está, ya que la función de flecha que ha utilizado es una característica de ES6 y la misma cuando se compila en ES6 no cambia.

De forma predeterminada, el objetivo es ES3, por lo que sin el objetivo se obtiene test.js como:

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

Aquí, la flecha gruesa se cambia a 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 JavaGuión. Entonces, aprendamos a declarar y asignar valores a variables en TypeScript.

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

var palabra clave,

let keyword

const keyword

Trabajar con variables en TypeScript es similar a javascript y los usuarios familiarizados con javascript lo encontrarán muy fácil. Solo variables como let y const no se utilizan mucho en comparación con var.

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 var palabra clave.

Ejemplo 1:

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

function test() {
    var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
    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; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    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(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

Declarar variables usando let

La TypeScript La sintaxis de let es la siguiente:

Sintaxis:

let name="Roy";

El funcionamiento de let La variable es casi igual que var, pero con una pequeña diferencia y entenderá lo mismo usando un TypeScript ejemplo.

Ejemplo:

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

test(); // throws an error : Uncaught ReferenceError: t is not defined.

Above TypeScript El ejemplo arroja un error, pero lo mismo habría funcionado bien si fuera con el var palabra clave. variables usando let están disponibles dentro del alcance del bloque declarado, por ejemplo, la variable t está disponible solo dentro del bloque if y no para toda la función.

Además, si declara una variable dentro de cualquier función, o bucle for, bucle while, TypeScript cambiar bloque, estará disponible para usted solo dentro de ese bloque y no habrá referencia a él fuera del bloque, y arrojará un error si la variable se usa fuera del bloque. Esta es la principal diferencia entre las variables declaradas por palabra clave var y let.

Declarar variables usando const

Const significa variables constantes. Son similares a las variables let, con la única diferencia de que una vez que se les asigna un valor no se pueden cambiar.

Sintaxis:

const name;

Ejemplo:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

Por lo tanto, los usuarios pueden usar variables constantes solo en los casos en que saben que no tienen que cambiar los valores asignados a ellas.

tipos en TypeScript

TypeScript es un lenguaje fuertemente tipado, mientras que JavaScript no lo es. Una variable que tiene un valor definido como una cadena se puede cambiar a un número sin ningún problema. Javascript. No se tolera lo mismo en TypeScript. En TypeScriptEl tipo de una variable se define solo al inicio y durante la ejecución debe mantener el mismo tipo; cualquier cambio provocará un error en tiempo de compilación durante la compilación a JavaScript.

Los siguientes son los tipos:

Número
Cordón
Boolean
Año
Void

Número

Solo toma números enteros, flotantes, fracciones, etc.

Sintaxis:

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

A continuación se muestran algunos métodos importantes que se pueden utilizar en tipos de números:

toFixed () – convertirá el número en una cadena y mantendrá los decimales dados al método.

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

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 String

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";

A continuación se muestran algunos métodos importantes que se pueden utilizar en tipos de cadenas:

split(): este método dividirá la cadena en una matriz.
charat(): este método proporcionará el primer carácter del índice dado.
índice de(): este método proporcionará la posición de la primera aparición del valor que se le haya asignado.
Reemplaza (): este método toma 2 cadenas, primero el valor a buscar en la cadena y, si está presente, lo reemplazará por el segundo y devolverá una nueva cadena.
Trim (): este método eliminará los espacios en blanco de ambos lados de la cadena.
substr() – este método dará una parte de la cadena que dependerá de la posición dada como inicio y final.
subcadena() – este método dará una parte de la cadena que dependerá de la posición dada como inicio y final. El carácter en la posición final será excluido.
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 is the value does not exist in the string.
_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

Aceptará valores lógicos como verdadero, falso, 0 y 1.

Sintaxis:

let bflag :boolean = 1;
let status :boolean = true;

Año

Sintaxis:

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

Variables declaradas usando cualquier El tipo puede tomar la variable como una cadena, número, matriz, booleana o nula. TypeScript no arrojará ningún error en tiempo de compilación; esto es similar a las variables declaradas en JavaScript. Utilice cualquier tipo de variable solo cuando no esté seguro del tipo de valor que se asociará con esa variable.

Void

El tipo vacío se usa principalmente como tipo de retorno en una función que no tiene nada que devolver.

Sintaxis:

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

TypeScript Formación

An Formación in TypeScript es un tipo de datos en el que se pueden almacenar múltiples valores. Aprendamos a declarar y asignar valores para operaciones de matriz en TypeScript.

Since TypeScript Es un lenguaje fuertemente tipado, debes indicar cuál será el tipo de datos de los valores de una matriz. De lo contrario, se considerará que es 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 will all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

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.

Ejemplo:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
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 TypeScript para una loops como se muestra a continuación:

Usando TypeScript en bucle

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

Output:
2016
2017
2018
2019

Usando bucle for-of

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

Usando foreach loop

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

TypeScript Métodos de matriz

TypeScript El objeto de matriz tiene muchas propiedades y métodos que ayudan a los desarrolladores a manejar matrices de manera fácil y eficiente. Puede obtener el valor de una propiedad especificando nombrematriz.property y la salida de un método especificando nombrematriz.método().

propiedad de longitud

=> Si desea saber la cantidad de elementos en una matriz, puede usar la propiedad de longitud.

Revmétodo alternativo

=> Puede invertir el orden de los elementos en una matriz utilizando un método inverso.

Método de clasificación

=> Puede ordenar los elementos en una matriz usando el método de clasificación.

método pop

=> Puedes eliminar el último elemento de una matriz usando un método pop.

Shift Método

=> Puede eliminar el primer elemento de una matriz utilizando el método shift.

Método de empuje

=> Puede agregar valor como último elemento de la matriz.

método concat

=> Puede unir dos matrices en un elemento de matriz.

Ejemplo de propiedad de longitud

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

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

Ejemplo de método inverso

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

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

Ejemplo de método de clasificación

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

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

Ejemplo de método pop

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

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

Ejemplo de método de turno

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

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

Ejemplo de método push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
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 JavaGuión, así que todo lo que sea posible hacer en JavaEl script también es posible en TypeScript. La clase es una nueva característica agregada desde ES6 en adelante, por lo que anteriormente JavaSe probó la funcionalidad del tipo de clase mediante una función con funcionalidad de prototipo para reutilizar el código. Al usar la clase, puede tener nuestro código casi similar a lenguajes como Java, C#, Python, etc., donde el código se puede reutilizar. Con la característica de la clase en TypeScript/JavaEl script hace que el lenguaje sea muy poderoso.

Definición de una clase en TypeScript

Aquí hay una sintaxis de clase básica 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 propiedades edad, nombre y roll_no.

Constructor en un TypeScript Clase

El ejemplo de la clase Estudiantes que hemos definido 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 parámetros edad, nombre y roll_no. El constructor se encargará de inicializar las propiedades cuando se llame a la clase. Se accede a las propiedades mediante este vídeo palabra clave. Ejemplo this.age para acceder a la propiedad age, this.roll_no para acceder a roll_no, etc. También puede tener un constructor predeterminado, como se muestra a continuación:

constructor () {}

Métodos dentro de un TypeScript Clase

En el ejemplo de la clase Estudiantes hay métodos definidos por ejemplo getRollNo(), getName(), getAge() que se utilizan para dar detalles de las propiedades roll_no, nombre y edad.

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

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

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

Creando instancia de clase en TypeScript

Ejemplo:

In TypeScript Para crear una instancia de una clase, es necesario utilizar el operador new. Cuando creamos una instancia de una clase utilizando el operador new, obtenemos el 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

Compilación TypeScript clase a JavaGuión

Puede usar el comando tsc como se muestra a continuación para compilar en Javascript.

Command: tsc  Students.ts

La salida de Javascript El código de 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 Javascript, la Clase se convierte en una función autoinvocada.

Herencia de clase

Las clases se pueden heredar usando el ampliar 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í hay un ejemplo práctico de una clase que usa 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. La clase Student extiende Person y el objeto creado en Student puede acceder a sus propios métodos y propiedades, así como a la clase que ha extendido.

Ahora agreguemos algunos cambios más 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);
    }
    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

Los cambios que ha agregado en comparación con el ejemplo anterior es que hay un constructor definido en la clase Student. El constructor tiene que tomar los mismos parámetros que la clase base y agregar sus propios parámetros adicionales, si los hay.

In TypeScript necesitas llamar a super will todos los parámetros como los parámetros básicos que contiene. Esto tiene que ser lo primero que se debe hacer dentro del constructor. El super ejecutará el constructor de la clase extendida.

Modificadores de acceso en TypeScript

TypeScript admite modificadores de acceso públicos, privados y protegidos a sus métodos y propiedades. De forma predeterminada, si no se proporcionan modificadores de acceso, el método o propiedad se considera público y será fácilmente accesible desde el objeto de la clase.

En el caso de modificadores de acceso privado, no están disponibles para acceder a ellos desde el objeto de la clase y están destinados a usarse únicamente dentro de la clase. No están disponibles para la clase heredada.

En el caso de modificadores de acceso protegidos, están destinados a usarse dentro de la clase y la clase heredada y no serán 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

Privado: El objeto de la clase y también la clase derivada no pueden acceder a las propiedades o métodos, están destinados a usarse internamente dentro de la clase.
Protegido: El objeto creado tampoco puede acceder a las propiedades y métodos. Son accesibles desde el interior de la clase y están disponibles para la clase que la amplía.
Público: Las propiedades y métodos se declaran sin ninguna palabra clave. Se puede acceder fácilmente a ellos utilizando el objeto de la clase desde fuera.

Interfaz en TypeScript

Una de las características principales de TypeScript son interfaces. La interfaz es un conjunto de reglas definidas que la entidad que la utiliza debe implementar. La entidad puede ser una clase, una función o una variable. Una interfaz puede estar formada por propiedades y métodos. Puede definir propiedades como opcionales utilizando la sintaxis “?” para esa propiedad o método. La interfaz agrega una verificación de tipo sólida para cualquier función, variable o clase que implemente la interfaz.

Sintaxis de una interfaz en TypeScript

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

Ha definido una interfaz denominada Dimensión que tiene propiedades de ancho y alto, y ambas tienen un tipo de cadena.

Ahora bien, esta interfaz puede implementarse mediante una variable, una función o una clase. Aquí está el ejemplo de variable que implementa la interfaz Dimension.

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. En caso de que al implementar la interfaz, se pierda alguna propiedad o se cambie el tipo, se producirá un error de tiempo de compilación al compilar el código en javascript.

El código anterior, cuando se compila en javascript, tiene el siguiente aspecto:

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

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

Usando la interfaz en una función como tipo de retorno

Ejemplo:

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 implementa en la función getDimension() como tipo de retorno. El tipo de retorno de getDimension() debe coincidir con las propiedades y el tipo mencionados para Interface Dimension.

El código compilado para Javascript será de la siguiente manera:

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 generará 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"}); // will get "300px-250px"

Entonces, en el ejemplo anterior, ha utilizado Interface Dimension como parámetro para la función getDimension(). Cuando llama a la función, debe asegurarse de que el parámetro que se le pasa coincida con la regla de interfaz definida.

El código compilado para Javascript será de la siguiente manera:

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

Interfaz de implementación de clase

Para hacer uso de la interfaz con una clase, necesita usar la palabra clave implementos.

Sintaxis para la clase que implementa una interfaz:

class NameofClass implements InterfaceName {
}

El siguiente ejemplo muestra el funcionamiento de la interfaz con la 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, ha definido la interfaz Dimensión con propiedades ancho y alto de tipo cadena y un método llamado getWidth() que tiene un valor de retorno como una cadena.

El código compilado para Javascript será de la siguiente manera:

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 un conjunto de instrucciones realizadas para realizar una tarea. En Javascript, la mayor parte del código está escrito en forma de funciones y desempeña un papel importante. En TypeScript, tiene clases, interfaces, módulos, espacios de nombres disponibles, pero aún así, las funciones juegan un papel importante. La diferencia entre la función en javascript y TypeScript La función es el tipo de devolución disponible con 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 las funciones anteriores, se agrega el nombre de la función, los parámetros son a1y b1 ambos tienen un tipo como número y el tipo de retorno también es un número. Si pasa una cadena a la función, generará un error en tiempo de compilación al compilarla en JavaGuión.

Realizar una llamada a la función: agregar

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

los parametros a1 y b1 son parámetros obligatorios y arrojarán un error si no se reciben de esa manera. Además, el tipo de parámetro y el tipo de retorno son muy importantes y no pueden cambiar una vez definidos.

Parámetros opcionales de una función.

En javascript, todos los parámetros de las funciones son opcionales y se consideran indefinidos si no se pasan. Pero no sucede lo mismo con TypeScript, una vez que defina los parámetros, también deberá enviarlos, pero en caso de que desee mantener algún parámetro opcional, puede hacerlo usando? contra el nombre del parámetro como se muestra a continuación:

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

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return 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 en una función solo al final, no puede tener el primer parámetro como opcional y el segundo como obligatorio. Cuando llame a la función con un parámetro, el compilador arrojará un error. Por eso es necesario mantener los parámetros opcionales al final.

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 con los parámetros opcionales, aquí también los parámetros inicializados predeterminados deben mantenerse al final de una función.

Parámetros de descanso

Has visto como TypeScript maneja los parámetros obligatorios, los parámetros opcionales y los parámetros inicializados con el valor predeterminado. Ahora, echaremos un vistazo a los parámetros de descanso. Los parámetros de descanso son un grupo de parámetros opcionales definidos juntos y se definen mediante 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 resto de parámetros se definen usando (…param-name); el resto del parámetro es una matriz con el prefijo de tres puntos. A la matriz se le pasarán todos los parámetros. Puede llamar a la función, como se muestra en el siguiente ejemplo:

Ejemplo:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as 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 de la función de flecha tiene una flecha gruesa debido a que la función se llama función de flecha.

Sintaxis de la función de flecha:

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

¿Para qué sirve la función de flecha?

Echemos un vistazo al ejemplo para comprender el caso de uso de la 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();

Ha creado una función anónima que tiene la propiedad this. Score se inicializa a 0 y un método getScore que internamente tiene un setTimeout, y en 1 segundo consuela this.score. El valor consolado da indefinido aunque tenga this.score definido e inicializado. El problema aquí es con this palabra clave. La función dentro de setTimeout tiene su propio this e intenta hacer referencia a la puntuación internamente y, como no está definida, da indefinida.

Se puede hacer lo mismo usando la 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();

Ha cambiado la función dentro de setTimeout a una función de flecha como se muestra a continuación:

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

Una función de flecha no tiene su propia este vídeo definido y comparte su padre este vídeo , por lo que las variables declaradas afuera son fácilmente accesibles usando this dentro de una función de flecha. Son útiles debido a la sintaxis más corta, así como para devoluciones de llamadas, controladores de eventos, funciones de temporización internas, etc.

TypeScript Enumeraciones

TypeScript Enum es un objeto que tiene una colección de valores relacionados almacenados juntos. Javascript no admite enumeraciones. La mayoría de los lenguaje de programación como uno Java, C C++ apoya TypeScript Enum y también está disponible con TypeScript también. Las enumeraciones se definen mediante 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, ha definido una enumeración llamada Direcciones. El valor dado es Norte, Sur, Este, Oeste. Los valores se numeran desde 0 para el primer valor de la enumeración y posteriormente se incrementan en 1 para el siguiente valor.

Declarar una enumeración con un valor numérico

De forma predeterminada, si a una enumeración no se le asigna ningún valor, se considera un número que comienza en 0. El siguiente ejemplo muestra una enumeración con un valor numérico.

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

También puede asignar un valor inicial a la enumeración y los siguientes valores de enumeración obtendrán los valores incrementados. Por ejemplo:

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

Ahora el valor de enumeración Norte comienza con 5, por lo que el Sur obtendrá el valor 6, Este = 7 y Oeste = 8.

También puede asignar valores de su elección en lugar de tomar 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 Enum 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 código compilado en javascript 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]);

Since Javascript no admite enumeraciones, convierte la enumeración en funciones autoinvocadas como se muestra arriba.

Declarar una enumeración con un valor de cadena

Puede asignar valores de cadena de su elección, como se muestra en el siguiente ejemplo:

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 North

El código compilado en javascript 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?

Los archivos creados en TypeScript tienen acceso global, lo que significa que se puede acceder fácilmente a las variables declaradas en un archivo en otro archivo. Esta naturaleza global puede causar conflictos de código y problemas con la ejecución en tiempo de ejecución. Tiene la funcionalidad del módulo de exportación e importación que se puede utilizar para evitar conflictos de funciones y variables globales. Esta función está disponible en JavaScript con versión ES6 y también 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 el archivo test2.ts puede acceder fácilmente a la variable edad definido en test1.ts y también modifíquelo como se muestra a continuación:

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

Entonces, el caso anterior puede crear muchos problemas ya que las variables están disponibles globalmente y pueden modificarse.

Con la Módulos, el código escrito permanece local en el archivo y no se puede acceder a él fuera de él. Para acceder a cualquier elemento del archivo, debe exportarse utilizando la palabra clave export. It se usa cuando desea que la variable, clase, función o interfaz se use en otro archivo. Importar se utiliza cuando desea acceder a la variable, clase, interfaz o función exportada también. Al hacerlo, el código escrito permanece intacto dentro del archivo, e incluso si define los mismos nombres de variables, no se mezclan y se comportan localmente en el archivo donde se declaran.

Usando Exportar e Importar

Hay muchas formas de exportar e importar. Aquí discutiremos la sintaxis que se usa principalmente.

La sintaxis para importar y exportar 1:

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable 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.

Ejemplo:

prueba1.ts

export let age: number = 25;

La palabra clave de exportación se utiliza para compartir la variable de edad en otro archivo.

prueba2.ts

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

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

Sintaxis para importar y exportar 2:

Hay otra forma de exportar e importar y la sintaxis de la misma 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 de archivo del nombre del módulo”) para importarlo.

A continuación se muestra un ejemplo práctico que muestra el caso anterior:

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 ha visto en TypeScript ejemplos mostrados arriba. El cargador de módulos disponible es CommonJS para que nodejs y Require.js se ejecuten en el navegador.

Para compilar código usando el módulo CommonJS use el siguiente comando:

tsc --module commonjs testCustomer.ts

Para compilar código usando el módulo Requirejs, use el siguiente comando:

tsc --module amd testCustomer.ts

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

Ejemplo de testCustomer.ts para 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 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, necesita crear un archivo llamado main.js, que hace 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

El espacio de nombres básicamente tiene 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 en un 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 estudiante, Ha agregado una interfaz StudDetails, una función addSpace y una clase llamada Student.

Accediendo al 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, una función disponible dentro de un espacio de nombres debe ser referida usando el nombre del ejemplo del espacio de nombres. StudentSetup.addSpace para acceder a la función, ConfiguraciónEstudiante.Estudiante para acceder a la clase.

Puede compilar ambos archivos en un js como se muestra a continuación:

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

Verifique el resultado en el símbolo del sistema usando el siguiente comando:

node namespace.js

Mostrará la salida como:

The name is: H a r r y

Declaraciones ambientales en TypeScript

TypeScript le permite utilizar archivos javascript de terceros mediante la declaración ambiental. La ventaja de esta función es que no tiene que reescribir y, sin embargo, utiliza todas las funciones de la biblioteca en TypeScript.

Sintaxis ambiental

Para declarar el módulo ambiental:

declare module moduleName {
   //code here
}

El archivo ambiental debe guardarse como:

filename.d.ts

Para usar el archivo nombre de archivo.d.ts en su .ts debe referirlo como:

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

La declaración de tipo ambiental en TypeScript tendrá una referencia a la biblioteca de terceros y volverá a declarar las funciones requeridas con su propio tipo. Por ejemplo, supongamos que tiene una pequeña biblioteca de JavaScript, como se muestra a continuación:

Terceros JavaArchivo de script: testString.js

Ejemplo: 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();
    }
};

Tiene un objeto llamado StringChecks que tiene funciones como isString, convertToUpperCase, convertToLowerCase y converToStringBold.

Creación de módulo ambiental en TypeScript

Ahora crearemos un módulo ambiental que hará referencia a las funciones js anteriores y también agregará verificación de tipo según nuestros requisitos.

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;

Debe definir un nombre de módulo como TestString y haber exportado la interfaz StringsFunc.

isString(cadena: cadena): booleano

=> Esto tomará el parámetro como una cadena y el tipo de retorno será booleano. Cuando lo use en su archivo .ts, en caso de que pase el parámetro como un número o cualquier otra cosa que no sea una cadena, obtendrá un error de tipo de compilación.

convertToUpperCase(cadena:cadena): cadena

=> Esto tomará el argumento como una cadena y devolverá una cadena. Lo mismo ocurre con convertToLowerCase(cadena: cadena)
: cadena; y convertToStringBold(cadena: cadena): cadena
;

Dado que en el archivo javascript tiene el nombre del objeto como StringChecks, finalmente debemos hacer referencia al mismo en el archivo .d.ts, lo cual se hace como:

declare var StringChecks: TestString.StringsFunc;

Usando el módulo Ambiente en TypeScript

Ahora aquí está el archivo test.ts donde se usará el archivo ambiental tstring.d.ts

Ejemplo: prueba.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);

Compilar TypeScript tsc test.ts a 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 el archivo html y también el archivo de biblioteca testString.js

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

Este es el resultado que se ve en la consola:

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

TypeScript Historia

Veamos hitos importantes de la historia de TypeScript:

Después de dos años de desarrollo interno en Microsoft. TypeScript 0.9, lanzado en 2013
Soporte adicional para genéricos TypeScript 1.0 se lanzó en Build 2014
En julio de 2014, un nuevo TypeScript Llegó un compilador que es cinco veces más rápido que la versión anterior.
En julio de 2015, soporte para módulos ES6, palabra clave de espacio de nombres, para, por supuesto, decoradores.
En noviembre de 2016, se agregó una característica como clave y tipos de búsqueda de tipos mapeados y resto.
El 27 de marzo de 2018, se agregaron tipos condicionales, la clave mejorada con soportes de tipos de intersección en el TypeScript.

¿Por qué utilizar TypeScript?

A continuación se detallan importantes ventajas y ventajas de utilizar TypeScript

Proyecto grande y complejo en JavaLos scripts son difíciles de codificar y mantener.
TypeScript ayuda mucho en la organización del código y, aún así, elimina la mayoría de los errores durante la compilación.
TypeScript admite bibliotecas JS y documentación API
Es un lenguaje de secuencias de comandos escrito opcionalmente.
TypeScript El código se puede convertir a simple. JavaCódigo de script
Mejores técnicas de estructuración de código y programación orientada a objetos.
Permite un mejor soporte de herramientas en el tiempo de desarrollo.
Puede extender el lenguaje más allá de los decoradores estándar, async/await

Quien usa TypeScript?

Estas son algunas de las aplicaciones más comunes de TypeScript:

El equipo angular usa TypeScript.
Instalación de NodeJS y NPM
TypeScript Instalación
Compilar TypeScript codificar a Javascript
Ejecutar código usando Nodejs
Implementación Javascript en el navegador
Compilar TypeScript codificar a Javascript usando la versión EcmaScript
Puedes compilar fácilmente código escrito en TypeScript a JavaScript que utiliza NodeJS.
Así que para trabajar con TypeScript Primero debe descargar e instalar NodeJS.

Resumen

TypeScript es un superconjunto de JavaGuión. TypeScript es un lenguaje de programación puro orientado a objetos que admite clases, interfaces, etc.
TypeScript admite todas las funciones de Ecmascript lanzadas y los desarrolladores pueden usarlas mientras codifican.
Las variables se utilizan para almacenar valores y el valor puede ser una cadena, un número, un valor booleano o una expresión.
In TypeScriptEl tipo de una variable se define solo al inicio y durante la ejecución debe mantener el mismo tipo; cualquier cambio provocará un error en tiempo de compilación durante la compilación a JavaScript.
Una matriz en TypeScript es un tipo de datos en el que puede almacenar múltiples valores.
La clase es una nueva característica agregada desde ES6 en adelante, por lo que anteriormente JavaSe probó la funcionalidad del tipo de clase utilizando una función con funcionalidad de prototipo para reutilizar el código.
TypeScript admite modificadores de acceso públicos, privados y protegidos a sus métodos y propiedades.
Una de las características principales de TypeScript son las interfaces. La interfaz es un conjunto de reglas definidas que debe ser implementada por la entidad que la utiliza.
Las funciones son un conjunto de instrucciones realizadas para realizar una tarea.
TypeScript Enum es un objeto que tiene una colección de valores relacionados almacenados juntos.

¿Qué es TypeScript?

Cómo descargar e instalar TypeScript

Compilar TypeScript codificar a Javascript

Implementación Javascript usando nodejs

Compilar TypeScript codificar a Javascript usando la versión EcmaScript

ARTÍCULOS RELACIONADOS

Variables en TypeScript

Declarar variables usando var

Declarar variables usando let

Declarar variables usando const

tipos en TypeScript

Número

Cordón

Boolean

Año

Void

TypeScript Formación

Declarar e inicializar una matriz

Diferentes formas de acceder a elementos desde una matriz

Usando TypeScript en bucle

Usando bucle for-in

Usando bucle for-of

Usando foreach loop

TypeScript Métodos de matriz

propiedad de longitud

Revmétodo alternativo

Método de clasificación

método pop

Shift Método

Método de empuje

método concat

Ejemplo de propiedad de longitud

Ejemplo de método inverso

Ejemplo de método de clasificación

Ejemplo de método pop

Ejemplo de método de turno

Ejemplo de método push

Ejemplo de método concat

clase en TypeScript

Definición de una clase en TypeScript

Ejemplo: un ejemplo práctico en Class

Constructor en un TypeScript Clase

Métodos dentro de un TypeScript Clase

Creando instancia de clase en TypeScript

Compilación TypeScript clase a JavaGuión

Herencia de clase

Sintaxis de herencia de clases:

Modificadores de acceso en TypeScript

Interfaz en TypeScript

Sintaxis de una interfaz en TypeScript

Usando la interfaz en una función como tipo de retorno

Interfaz como parámetro de función

Interfaz de implementación de clase

Funciones en TypeScript

Realizar una llamada a la función: agregar

Parámetros opcionales de una función.

Asignar valores predeterminados a los parámetros

Parámetros de descanso

Funciones de flecha

¿Para qué sirve la función de flecha?

TypeScript Enumeraciones

¿Cómo declarar una enumeración?

Declarar una enumeración con un valor numérico

¿Cómo acceder a una enumeración?

Declarar una enumeración con un valor de cadena

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

¿Por qué necesitas módulos en TypeScript?

Usando Exportar e Importar

La sintaxis para importar y exportar 1:

Sintaxis para importar y exportar 2:

Cargador de módulos

Ejemplo de testCustomer.ts para testCustomer.js usando Requirejs

Ejemplo de Customer.ts a Customer.js usando Requirejs

Espacios de nombres en TypeScript

Sintaxis del espacio de nombres

Accediendo al espacio de nombres

Declaraciones ambientales en TypeScript

Sintaxis ambiental

Para declarar el módulo ambiental:

El archivo ambiental debe guardarse como: