Number, Boolean y String

Clase 9 de 32 • Curso de TypeScript 3

Clase anteriorSiguiente clase

Jhon Alexander Romero Gonzaga

student•

Tiene una forma de enseñar demasiada detallada con pocas palabras y eso es excelente.

Gonzalo Blasco

student•

igual lo tengo hablando como Topo Yiyo a toda velocidad...

Jean Nuñez

student•

asi mismo es

Francisco Javier Antúnez Durán

student•

Por si ayuda.

console.log('prueba!');

// Number Explicit

let phone: number;
// phone = '+367128815'; --&gt; Error de tipo
phone = 924234669;

// Number inferred
let phoneMovil = 637128815;
// let phoneMovil = true; --&gt; Error esta definido antes

let hex: number = 0xf00d;
let binary: number = 0b101;
let octal: number = 0o744;

// Type: Boolean
let isPro: boolean;
isPro = true;
// isPro = 1; --&gt; Error

// String
let username: string = 'anbreaker';
username = 'Javier';
// username = true; --&gt; Error

// Template String with use of back-tick ``
let userInfo: string;
userInfo = `
    User info:
    username: ${username}
    firtsname: ${username + ' anbreaker'}
    phone: ${phone}
    isPro: ${isPro}
`;

console.log('userInfo', userInfo);

Jimmy Buriticá Londoño

student•

Claro que si ayuda, gracias.

Alex Camacho

teacher•

Tipos de datos

Dentro de los tipos explícitos que maneja TypeScript, tenemos:

Number. Este tipo de dato incluye valores numéricos, hexadecimales, binarios y octales.

// Explícito
let phone: number
phone = 3315015804

let hex: number = 0xf00d
let binary: number = 0b1010
let octal: number = 0o744

// Implícito
let phoneNumber = 3315015804

Boolean. Es el tipo de dato más simple en TypeScript ya que solo acepta dos tipos de valores que son true o false.
```
// Explícito
let isTrue: boolean = true

// Implícito
let isFalse = false
```

String. Es el tipo de dato para trabanar con datos textuales o cadenas, para definir este tipo de dato se puede usar comilla dobles "" o simples ''.

// Explícito
let userName: string = 'Alejandra'

// Implícito
let lastName = 'Camacho'

Dentro del tipo de dato string también podemos crear templates de la siguiente forma:

// Template string
// Uso de back-tick ``
let userInfo: string = `
  User info:
  firstName: ${firstName}
  lastName: ${lastName}
  phone: ${phone}
  isValid: ${isTrue}
`

Sergio Brandon De Lucio Chavero

student•

No sabia lo de template strings en ts, gracias :)

Reinaldo Mendoza

student•

Los backticks los hereda de JS

Omar Rivas

student•

Hola veo que se van a usar los comandos tsc --watch y node dist/main constantemente. Sugiero agregar un package.json con el comando npm init -y en tu directorio del proyecto.

Una vez que genere el package.json agregar los siguientes comandos dentro de scripts

  "scripts": {
    "watch": "tsc --watch",
    "start": "node dist/main"
  },

Deja el archivo de referencia:

{
  "name": "typeScript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc --watch",
    "start": "node dist/main"
  },
  "keywords": [
    "typeScript",
    "javaScript"
  ],
  "author": "Tu Nombre",
  "license": "MIT"
}

Una vez que tienes el archivo abrir una terminal agregar el comando:

npm run watch

Para validar los cambios en consola, en otra terminal agregar el comando

npm start

Saludos!!

Danilo Valenzuela

student•

Este profesor me hizo acordar del profe ecuatoriano que da bash, también es muy profesional.

Pablo Daniel Amé

student•

te obliga a ponerte corbata antes de darle play al video

Reinaldo Mendoza

student•

Yo pense que era el mismo en la primera clase, este es un poco no tan formal, mas llevadera la clase

Jorge Alfredo Pulido Guzman

student•

Hola, ¿es válido definir un tipo de dato con la primera letra en mayúscula? por ejemplo let phone: Number

Manuel Ojeda

student•

En ese caso tomaría el tipo nativo de JavaScript que es una clase: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number

Por ello debemos declarar los tipos de TS en minusculas para evitar la confusión de la clase de JavaScript con el tipo de TS.

Luis Aviles

teacher•

Los tipos primitivos en TypeScript empiezan en minúsculas.

Angelo Zambrano

student•

Allan Jair Escamilla Hernández

student•

Código ACII del carácter back-tick: alt + 96

Reinaldo Mendoza

student•

Buen dato

jesus gomez

student•

let name = "Jesus" as any

La as palabra clave es una afirmación de tipo en TypeScript que le dice al compilador que considere el objeto como un tipo diferente al tipo que el compilador infiere que es el objeto. Es como una trampa que le puedes hacer a Typescript para cambiarle el tipo de dato que Typescript cree que es

César Palma

student•

esto es de ayuda

David Alejandro García Graterón

student•

Me ha gustado la forma de explicar. Realmente estoy muy contento para poder seguir aprendiendo y aplicando conocimientos a los futuros proyectos.

Daniel Enrique Astudillo Guzmán

student•

Es bastante conciso y nada aburrido, sobretodo porque todo lo que define lo aplica en el código y te queda mucho mas claro!

Juan Esteban Galvis

student•

Fundamental el curso de ECMAScript de Platzi: https://platzi.com/clases/ecmascript-6/ para entender este tipo de agregados al lenguaje JavaScript.

Jonathan Martin Ortega Jimenez

student•

Para declarar y especificar el tipo de datos podemos hacer lo siguiente:

let num: number = 12345;
const name: string = 'Pablo';

Esto resulta util de manera especial cuando hacemos constantes en vez de variables.

Jorge Cruz Perez

student•

SI, adicionalmente se recomienda que los nombres de constantes se escriban en MAYUSCULAS

César Palma

student•

Siempre y cuando sean variables globales o de entorno. En javascript puedes declarar variables con const en minusculas para variables que quieras controlar su no reasignación.

Félix Moreno

student•

¡Qué bien explica el profe!. Se le entiende todo. ¡Lo felicito!

Cristofher Jumbo Jimenez

student•

Existe alguna extension en el Browser para usar typescript en la consola???

Alex Camacho

teacher•

No, ya que TS no lo entiende nuestro navegador :( pero sería genial.

Jorge Cruz Perez

student•

Hola alex, pues buscando fijate que entonctre algo, lo voy a probar e informo, saludos :) TypeScript-Console

Jorge Méndez Ortega

student•

hasta este punto veo que todo es propio de JS pero si noto que TS le esta brindando un tipeado fuerte, esto me suena tipo java

Cesar Peron

student•

por eso se considera a TS de alto nivel, porque hace frente a grandes proyectos, con JS te la regalo

Juan David González Rodríguez

student•

Todavia no he implementado TypeScript a un proyecto de JavaScript peor lo hare, hasta el momento les dejo los apuntes de la clase:

//--------- Number ------------
// Explicito
let phone: number
phone = 1
phone = 3023455882
// phone = 'hola' // Error

// Inferido
let phoneNumber = 3023455882
phoneNumber = 123
// phoneNumber = true // Error de tipo

let hex: number = 0xf00d
let binary: number = 0b1010
let octal: number = 0o744


//---------- Bolean ----------
// Tipado Explicito
let isPro: boolean 
isPro = true
isPro = false
// isPro = 1 // Error

// Inferido
let isUserPro = false
isUserPro = true
// isUserPro = 10 // Error


//------------ String ------------
// Explicito
let username: string = 'luixaviles'
username = 'Juan'
// username = true // Error

// Template String
// Uso de back-tick `
let userInfo: string
userInfo = `
  User Info: 
  username: ${username}
  firstName: ${username} Gonzalez
  phone: ${phone}
  isPro: ${isPro}
`

console.log(userInfo)

Cesar Roman Santillan

student•

¿Alguien sabe porque solo declara las variables con let y porque no usa var? ¿Y cual es la diferencia entre ellas?

Bernardo Ayala Montezuma

student•

Buen día César.

Las dos diferencias entre var y let tienen que ver con dos conceptos llamados scope y hoisting.

El primero hace referencia al alcance de la función. Mientras que let tiene alcance por bloques de código, var tiene alcance por funciones.

Esto quiere decir que la var estará disponible globalmente siempre a menos que esté dentro de una función, en cambio let te permite tener otros bloques de código, como ciclos, con variables que no se vuelvan globales.

Y el Hoisting tiene que ver con la forma en la que funciona JavaScript, lo primero que hace el intérprete es buscar todas las funciones definidas con function así como todas las variables con var y las manda al principio del código. Esto puede causar algunos efectos secundarios indeseables.

Por estos dos motivos, se trata siempre de usar let en lugar de var en código moderno.

Si quieres saber más a fondo, te comparto un tutorial que escribí para Platzi respecto a cómo funcionan las variables en JavaScript y la diferencia entre const, let y var.

Luis Lira

student•

Es por cosas de cómo trata javascript cada palabra reservada. En pocas palabras, var tiene un detalle que hasta puede ser declarada otra vez, const y let no.

También puedes ver esta clase del curso básico de JavaScript

Hernan Maza

student•

Cual es la diferencia entre string y String?

Axel Vasquez

student•

Hola. La diferencia es que strings (empezando en minúscula) es un dato primitivo, por lo que en memoria es literalmente lo que escribamos, pero Strings (empezando en mayúscula) es un objeto

¿Por o para qué?

Bueno, al ser string un dato primitivo este no tiene propiedades ni métodos (length, slice, indexOf, etc..) así que cuando llamamos alguno de ellos JavaScript internamente lo envuelve en un objeto String y luego ejecuta dicho método o propiedad.

Mas informacion en MDN

Moisés Manuel Morín Hevia

student•

La mayúscula en los tipos de dato hace referencia a los objetos. Osea lo va a interpretar como si no fuera un dato primitivo lo que causará problemas.

Federico Walovnik

student•

Asi como podemos utilizar valores hex, binarios y octales, se puede usar otro sistemas?

Luis Lira

student•

Hasta ahorita son los únicos que he visto que se pueden usar.¿qué otros sistemas se te ocurren que podrían ser necesarios?

Federico Walovnik

student•

La realidad es que no le buscaba ninugun practico, era mas curiosidad. Igualmente me parece que quiza podria ser util que se pueda usar un sistema sexagesimal(basado en 60) por el manejo del tiempo. Esto ultimo ya es un pensamiento en voz alta

console.log('prueba!');

// Number Explicit

let phone: number;
// phone = '+367128815'; --&gt; Error de tipo
phone = 924234669;

// Number inferred
let phoneMovil = 637128815;
// let phoneMovil = true; --&gt; Error esta definido antes

let hex: number = 0xf00d;
let binary: number = 0b101;
let octal: number = 0o744;

// Type: Boolean
let isPro: boolean;
isPro = true;
// isPro = 1; --&gt; Error

// String
let username: string = 'anbreaker';
username = 'Javier';
// username = true; --&gt; Error

// Template String with use of back-tick ``
let userInfo: string;
userInfo = `
    User info:
    username: ${username}
    firtsname: ${username + ' anbreaker'}
    phone: ${phone}
    isPro: ${isPro}
`;

console.log('userInfo', userInfo);

{
  "name": "typeScript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc --watch",
    "start": "node dist/main"
  },
  "keywords": [
    "typeScript",
    "javaScript"
  ],
  "author": "Tu Nombre",
  "license": "MIT"
}

//--------- Number ------------
// Explicito
let phone: number
phone = 1
phone = 3023455882
// phone = 'hola' // Error

// Inferido
let phoneNumber = 3023455882
phoneNumber = 123
// phoneNumber = true // Error de tipo

let hex: number = 0xf00d
let binary: number = 0b1010
let octal: number = 0o744


//---------- Bolean ----------
// Tipado Explicito
let isPro: boolean 
isPro = true
isPro = false
// isPro = 1 // Error

// Inferido
let isUserPro = false
isUserPro = true
// isUserPro = 10 // Error


//------------ String ------------
// Explicito
let username: string = 'luixaviles'
username = 'Juan'
// username = true // Error

// Template String
// Uso de back-tick `
let userInfo: string
userInfo = `
  User Info: 
  username: ${username}
  firstName: ${username} Gonzalez
  phone: ${phone}
  isPro: ${isPro}
`

console.log(userInfo)

Number, Boolean y String

Introducción a TypeScript

El lenguaje de programación TypeScript

Instalación de herramientas para TypeScript

Instalación de herramientas en Windows

Navegación y refactorización

Entorno de Desarrollo

El compilador de TypeScript

El archivo de configuración de TypeScript

Mi primer proyecto TypeScript

Tipos en TypeScript

Tipado en TypeScript

Number, Boolean y String

Any

Void y never

null y undefined

Object

Array

Tupla

Enum

Unión de Tipos, Alias y Tipos Literales

Aserciones de tipo

Funciones en TypeScript

Resumen

Tipos Personalizados

Interfaces

Interfaces: propiedades opcionales

Extensión de interfaces

Clases

Clases públicas y privadas

Métodos Get y Set

Herencia de clases y propiedades estáticas

Resumen

Módulos

Principios de responsabilidad única

Resolviendo módulos

Webpack y agrupación de Módulos

Cierre

Cierre