DEV Community

loading...
Cover image for ¿Qué es Typescript?
4GeeksAcademy

¿Qué es Typescript?

Manuel Ortega Carcamo
Software Engineer, Full Stack developer, passionate about code, Surfing, Snowboard. Mostly working with Javascript and Nodejs. Mentor in 4Geeks Academy
Updated on ・5 min read

Javascript es un lenguaje que tiene un tipado débil, esto quiere decir que las variables son declaradas sin un tipo y dependiendo del valor que se asigne es el tipo de dato que asume la variable. Podemos modificar, operar y comparar los los valores entre ellos sin que tengamos que hacer una conversión previa.

En el siguiente ejemplo podemos ver como cambiamos el tipo de datos sin algún tipo de conversión:


let name = "Aprendiendo Javascript"
console.log(typeof name)
// "string"

name = 33
console.log(typeof name)
// "number"
Enter fullscreen mode Exit fullscreen mode

¿Qué es typeScript?


Typescript es un lenguaje de programación que agregar nuevas funcionalidades a Javascript, esto es conocido como un superset. Un superset se escribe tomando como base otro lenguaje de programación aplicando mejoras en el lenguaje original. Por esta razón Typescript se escribió sobre javascript para agregar nuevas funcionalidades que veres más adelante.

Typescript es la solución a muchos de los problemas de JavaScript, está pensado para el desarrollo de aplicaciones robustas, implementando características en el lenguaje que nos permitan desarrollar herramientas más avanzadas para el desarrollo de aplicaciones.

Tipado estático


El tipado estático define que :

  • Las variables tienen un solo tipo de datos

  • Los valores asignados a las variables deben tener el mismo tipo que la variable.

En el siguiente ejemplo se está declarando la variable message del tipo string. El valor que asignaremos a nuestra variable debe ser del mismo tipo, por esta razón se asigna el string Conociendo TypeScript

let message: string;
message: 'Conociendo TypeScript';
Enter fullscreen mode Exit fullscreen mode

Tipos de Datos en TypeScript


Las variables pueden tener diferentes tipos de valores, a continuación detallaremos como podemos definir cada tipo usando TypesCript:

  • Boolean: Solo acepta valores: Verdadero o Falso
let isExist:boolean =  true
Enter fullscreen mode Exit fullscreen mode
  • String: Cualquier serie de caracteres
let message:string = "Conociendo TypeScript"
Enter fullscreen mode Exit fullscreen mode
  • Number: Solo acepta números
let age:number = 33
Enter fullscreen mode Exit fullscreen mode
  • null: Acepta valores indefinidos o vacíos
let isNotExist:null = null
Enter fullscreen mode Exit fullscreen mode
  • Array: Una lista con un tipo de dato.
let arrayNumber:Array<number> = [1, 2, 3, 4]
let arrayNumber:Array<string> = ["uno", "dos", "tres", "cuatro"]
Enter fullscreen mode Exit fullscreen mode
  • Tuplas: Acepta una lista con tipos de datos predefinidos.
let arraytupla: = [number, string, number]
arraytupla = [23, 'Hello World', true]
Enter fullscreen mode Exit fullscreen mode
  • Void: Se utiliza para indicar que no tenemos un tipo de datos definido
let notDataType:void = undefined
Enter fullscreen mode Exit fullscreen mode
  • Enum: Permite definir posibles valores que pueden ser asignados a la variable
enum Animals {cat, lion, dog, cow, monkey}
let c: Animals = Animals.cat;
Enter fullscreen mode Exit fullscreen mode
  • Any: Se utiliza cuando el tipo de datos puede ser cualquiera de los anteriores
let wherever: any = 14;
wherever = "people";
Enter fullscreen mode Exit fullscreen mode

Clases

Así como en cualquier otro lenguaje de programación orientado a objetos, en TypeScript las clases tienen campos, constructores, propiedades y funciones. Las clases actúan como contenedores que encapsulan código para ser consumidos de una manera más fácil.

Al definir una clase utilizamos la palabra class y cerramos con llaves {}, así como en c# y java por ejemplo y luego definimos adentro nuestros campos, constructores, propiedades y funciones.


class User {
    # fields
    private name: string;
    private lastName: string;

    # Constructor
    constructor(name: string, lastName: string){
        this.name = name;
        this.lastName = lastName;
    }

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

    set setName(value : string): string {
        if(value === undefined) throw 'Ingrese un valor válido';
        this.name = value;
    }

    #Functions
    fullName(){
        return this.name + ' ' + this.lastName
    }
}

const newUser = new User('Juanin','JanJarri');
console.log('El nuevo usuario es:', newUser.fullName())

Enter fullscreen mode Exit fullscreen mode

En el ejemplo anterior se define un método constructor() que recibe los parámetros name: String, lastName: String, estos parámetros son asignados a los valores internos de la clase utilizando el método this para referenciarlos.

Además las Properties nos permiten obtener y asignar datos de variables o métodos internas de la clase. En el ejemplo el método setName() permite asignar el valor recibido como parámetro a la propiedad interna llamada name. El método getName() permite obtener el valor de la propiedad interna 'name'

Las Functions nos permiten ejecutar funciones o métodos internos de las clase, en el ejemplo el metódo fullName() devuelve la unión de las propiedades internas name más lastName.

Para crear una instancia de la clase User definimos la siguiente constante const newUser = new User('Juanin','JanJarri'); En estas lineas de código se puede apreciar que al crear esta instancia se envían los parámetros 'Juanin','JanJarri' al constructor para inicializar la clase con esos valores.

Interfaces


En oportunidades llamadas firmas, es el mecanismo que usa Typescript para definir tipos en las clases. Permiten definir la estructura o el tipo de objetos más complejos.

La forma en que se utiliza una interface es muy similar a como se define una clase, pero solo se declaran atributos y métodos si su implementación.

Al igual que los tipos de variables simples, estos objetos también deberán seguir un conjunto de reglas creadas por ti. Esto puede ayudarlo a escribir código con más confianza y con menos posibilidades de error.

En el siguiente ejemplo definimos una interface llamada Lakes:

interface Lakes {
    name: string,
    area: number,
    length: number,
    depth: number,
    isFreshwater: boolean,
    countries: string[]
}
Enter fullscreen mode Exit fullscreen mode

La Lakes interface contiene el tipo de cada propiedad que vamos a utilizar al crear nuestros objetos. A continuación crearemos un nuevo objeto firstLake que heredará las propiedades que tiene la interface Lakes.

let firstLake: Lakes = {
    name: 'Caspian Sea',
    length: 1199,
    depth: 1025,
    area: 371000,
    isFreshwater: false,
    countries: ['Kazakhstan', 'Russia', 'Turkmenistan', 'Azerbaijan', 'Iran']
}
Enter fullscreen mode Exit fullscreen mode

Como puede ver, no importa el orden en el que asigne un valor a estas propiedades. Sin embargo, no puedes omitir un valor.
Deberás asignar un valor a cada propiedad para evitar errores al compilar el código.

De esta manera, TypeScript se asegura de que no se pierda ninguno de los valores requeridos por error.

Propiedades opcionales

A veces, es posible que necesites una propiedad solo para algunos objetos específicos.

Por ejemplo, supongamos que desea agregar una propiedad para especificar los meses en los que se congela un lago. Si agrega la propiedad directamente a la interfaz, como hemos hecho hasta ahora, obtendrá un error para otros lagos que no se congelan y por lo tanto no tienen la propiedad frozen. De manera similar, si agrega esa propiedad a los lagos que están congelados pero no en la declaración de la interfaz, aún obtendrá un error.

En tales casos, puede agregar un signo de interrogación ? después del nombre de una propiedad para establecerla como opcional en la declaración de la interfaz. De esta manera, no obtendrá un error por propiedades faltantes o propiedades desconocidas. El siguiente ejemplo se vuelve a definir la interface Lakes pero la propiedad area queda como opcional.

interface Lakes {
    name: string,
    area?: number,
    length: number,
    depth: number,
    isFreshwater: boolean,
    countries: string[]
}
Enter fullscreen mode Exit fullscreen mode

Playground

Playground typeScript

Conclusión


Esta lectura presentó todos los tipos que están disponibles en TypeScript. Aprendimos cómo la asignación de un tipo diferente de valor a una variable mostrará errores en TypeScript. Esta comprobación puede ayudarlo a evitar muchos errores al trabajar en aplicaciones grande y robustas.

Discussion (0)