Transcripciones
1. Introduccion: Puede que hayas oído hablar de
él, pero ¿sabes por qué y cómo usar mecanografiado
en lugar de Typescript es un superconjunto
seguro de tipo de Javascript que permite
todas las mismas características y capacidades de
Javascript al tiempo que
evita que los
errores descuidados en su
aplicación web Hoy vamos a
recorrer todo lo que necesitas saber para aprender
y usar el mecanografiado Hola, mi nombre es Zoe. Soy ingeniero de software
y ex profesor que le encanta ayudar a otros a
comenzar con la codificación. He creado toneladas de
sitios web y aplicaciones web usando React CSS, HTML y más. Hoy vamos
a repasar Typescript y cómo
puedes usarlo para mejorar sustancialmente tu tiempo de desarrollo y experiencia Para ello, estaremos construyendo
este proyecto en mecanografiado. Hablaremos de qué tipos son, cómo usarlos y
por qué son útiles. Luego nos sumergiremos directamente
en nuestro tutorial. El tutorial se
dividirá en tres partes. Primero inicializaremos nuestro
nuevo proyecto de Typescript. Entonces lo pondremos en
marcha en nuestros navegadores. Y finalmente, construiremos nuestro
sitio web usando Typescript. Este curso es para cualquiera que esté interesado en
aprender mecanografiado, aunque tener una
comprensión general de Javascript será esencial si
necesitas aprender Javascript, tengo una clase completa sobre
ese enlace abajo Sin embargo, si
ya estás familiarizado con Javascript y solo
necesitas repasarlo, he incluido algunas
lecciones aquí para asegurarme de que
todos estamos en la misma página. Al final de este curso,
deberías poder construir una aplicación web completamente mecanografiada por ti mismo. Empecemos.
2. Proyecto de clase: Proyecto de clase. Nuestro
proyecto para esta clase será construir una aplicación
web simple usando mecanografiado Para esta clase,
será fundamental tener acceso
a una
computadora en la que
puedas ejecutar código de Visual Studio u otro editor
de código de tu elección. También querrás tener un
navegador como Google Chrome funcionamiento, ya que
lo usaremos para mostrar nuestra página web. Por último, tener una comprensión
general de Javascript será esencial. Si estás familiarizado
con Javascript, solo
necesitamos un repaso. No te preocupes, lo he incluido en las próximas lecciones. Dejaré cualquier enlace
a cualquier activo y recurso que
necesite en la pestaña de proyectos y recursos a continuación.
3. Introducción de JavaScript: Introducción a Javascript. dos lugares donde
Javascript se puede escribir en archivos HTML o en su propio archivo
Javascript dedicado. Si queremos escribir
Javascript en un archivo HTML, es tan sencillo como agregar la etiqueta script a la
sección head del documento. Esta etiqueta de script está reservada
para cualquier lenguaje de scripting, que son lenguajes con los que
puedes ejecutar comandos, y es donde teóricamente
podría vivir nuestro Javascript. Todo lo que escribas entre
estas etiquetas será compilado e interpretado
como Javascript. Si bien esto está bien para aplicaciones
realmente pequeñas, esto podría complicarse un poco
más una vez que empecemos a construir sitios web cada vez
más complejos. En este caso, podemos usar el segundo lugar en el que
Javascript se puede escribir en su propio archivo y simplemente utilizar la
etiqueta script como referencia. Haremos un
archivo Javascript por separado y conectaremos las dos. Y voilá, hemos agregado
Javascript a nuestro proyecto. Vamos a sumergirnos en los
entresijos de Javascript y los
lenguajes de programación en general.
4. JavaScript y otros lenguajes de programación: Javascript y otros lenguajes
de programación. Como ya hemos comentado, Javascript es un
lenguaje de scripting que
te permite introducir lógica y funcionalidad en tus páginas web Pero, ¿cómo hace esto? Como también hemos mencionado, Javascript es un lenguaje
de programación. Hay varias
cosas que la mayoría, si no todos, los
lenguajes de programación tienen en común. Al igual que otros tipos de lenguajes basados en
computadoras, los lenguajes de
programación están
en su forma más simple, solo una forma para
que nosotros los humanos hablemos con la computadora. Javascript, en particular, nos
permite como programadores, interactuar con el
navegador web a través del Dom,
o el Document Object Model El Dom es la interfaz de
programación para documentos web y actúa como una representación de esa página para que
pueda ser interactuada, actualizada y modificada
en función de la entrada y la interacción del usuario Javascript, en particular, es el lenguaje que utilizamos
para interactuar con el Dom,
y el 98% de todos los sitios web utilizan Javascript en
el lado del cliente. lenguajes de programación también
tienen su propia sintaxis única. Al igual que en otros idiomas
como el inglés y el francés, existe una sintaxis que define y explica las formas en que
las palabras se unen para formar oraciones, párrafos,
etcétera lenguajes
de programación de la misma manera, cada uno tiene su propia
sintaxis para determinar qué constituye una línea
completa de código. Por ejemplo,
todos los lenguajes de
programación tienen su propio caso y propósito
únicos. Es posible que hayas oído hablar
de otros
lenguajes de programación como Python, Ruby, Java y otros. Dependiendo del tipo de aplicaciones que
busquen construir, uno de estos
lenguajes de programación podría ser más adecuado para
la tarea que otros, ya que el objetivo de este
curso es aprender a interactuar y construir
aplicaciones para la web. El mejor lenguaje de programación
que podemos aprender es Javascript, o en este caso, Typescript.
Vamos a sumergirnos en ello.
5. ¿Qué es TypeScript?: ¿Qué es mecanografiado? Typescript es simplemente un
superconjunto de Javascript. Eso significa que tiene todas
las mismas capacidades de Javascript con algunas características
adicionales que benefician al desarrollador. Una de las características principales
de Typescript es el uso de tipos, que aseguran que
el valor al que se está accediendo sea
del tipo correcto Pero retrocedamos.
¿Qué son los tipos?
6. Tipos: Tipos. Hay
muchos tipos diferentes accesibles en mecanografiado Así que comencemos hablando los más comunes con los que
probablemente te encuentres en
tu trabajo diario. Algunos de estos tipos comunes con los que puede que ya esté familiarizado desde Javascript, como el número de
cadena y el booleano Una cadena es cualquier valor que se
puede poner y leer
entre comillas. Un número es un valor
numérico regular como 1234, etcétera, y un booleano puede ser uno de dos valores,
verdadero También hay matrices que al
igual que en Javascript, son listas ordenadas que pueden
contener múltiples tipos de datos. Sin embargo, el script tipo tiene un tipo
especial llamado any. Cualquiera es un tipo que se puede usar cuando
no quieres escribir
verificar un valor en particular o no estás muy seguro de
qué tipo usar todavía. En el segundo caso, también
podrías usar Desconocido, pero a cualquiera le irá bien por ahora.
7. Errores: Errores que podrías encontrar. A medida que empieces a usar Typescript, empezarás a ver muchos
más errores al Pero esto es
algo bueno porque te
ayudará a
aprenderlo mucho más rápido. No solo el script de tipo arroja errores para tipos no coincidentes, sino que arrojará errores para una variedad de escenarios
que desea evitar Al igual que cuando llamas a una función, pero olvidas proporcionar todos
los argumentos requeridos
en Javascript, un error como este se
consideraría error
uncuht que
pasa Sin embargo, esto es algo
que no quieres porque si esos argumentos adicionales en esa función son esenciales, tu función probablemente no
funcionará como esperabas. Pero eso es suficiente guión de tipo
teórico, vamos a sumergirnos en
escribirlo por nosotros mismos.
8. Cómo instalar TypeScript: Muy bien, así que para
empezar con el tipo script, podemos hacerlo de dos maneras. Podemos instalar el compilador
mecanografiado y trabajar solo en un archivo
typescript simple, o podemos incorporarlo a
nuestro set de aplicaciones create Voy a ir por
la ruta de la escalera, pero te voy
a mostrar cómo
instalarla rápidamente en tu computadora
globalmente si quieres. Entonces, si quieres instalar un mecanografiado globalmente,
es bastante fácil Solo necesitas
instalar el compilador. Mecanografiado, como mencionaste, es un superconjunto Pero el navegador
en realidad no lee la escritura mecanografiada, solo lee Javascript La forma en que podemos usar Typescript en
el navegador es
a través de él siendo compilado de nuevo a
Javascript Recordarás este proceso de compilar de un
idioma a otro, de CSS y CSS Scss se compiló hasta CSS. Lo mismo es cierto para
Typescript y Javascript. Si querías usar Typescript globalmente
en tu computadora, todo lo que tienes que
hacer es instalarlo Instale el compilador Typescript. Entonces vas NPM I, y es para lo global Y luego escribirías
Mecanografiado. Y luego una vez
que hiciste eso, habrías instalado el compilador mecanografiado globalmente y debería funcionar
en Después de hacer eso, solo
revisaste para ver si lo habías
hecho correctamente. Tscv y yo ya hicimos esto, así que viene con la versión 4.2 0.8 Y así después de haber
instalado Typescript globalmente, ahora
podemos seguir adelante y crear
un proyecto react
9. TypeScript y React: Lo que voy a hacer es copiar una línea de código que tengo aquí
que básicamente va decir que voy a
crear una app de reacción y la
vamos a llamar
aprender tipo script. Se va a utilizar
esta
bandera muy especial aquí llamada plantilla. Podríamos haberlo visto
una o dos veces antes. La plantilla, esta vez en
lugar de roja va
a ser mecanografiada, así que nos va a dar
una plantilla de script de tipo para que no tengamos
que preocuparnos tratar de averiguar cómo configurar la aplicación correctamente
usando Simplemente ejecutaremos eso y una vez que esté listo, empezaremos. Bien, así que tenemos
nuestra
carpeta de script tipo aprendida lista y lista para funcionar. Entonces vamos a seguir adelante y
NPM iniciarlo y echar un vistazo a lo que
tenemos en el navegador Entonces, como puedes ver
aquí, es más o menos la misma aplicación excepto por
una diferencia clave. Dijo editar la aplicación fuente TSX en lugar de JSX para guardar y
recargar. Más o menos eso. Esa es la única
diferencia que tenemos aquí con nuestro script tipo. Entonces lo que vamos a hacer ahora
es que vamos a entrar en nuestra carpeta pública. Decimos que
todo es igual. Entremos en nuestra carpeta de fuentes y veamos qué está
pasando aquí. Como puede ver, tenemos un par de archivos diferentes dentro de
estas dos carpetas. Dentro de nuestro
directorio más grande y dentro la aplicación y dentro de
nuestra carpeta de fuentes. Echemos un vistazo a este archivo de configuración
TS. Entonces este es un nuevo archivo que no
tuvimos la última vez. Este archivo básicamente le dice al compilador de script tipo cómo queremos que
compile el código Por lo que hay
diferentes versiones de Javascript que actualmente están
disponibles en la web. Ahora, cuando estamos compilando script de
tipo para Javascript, queremos
compilarlo básicamente a la versión más antigua que
sigue siendo perfectamente utilizable Porque queremos asegurarnos de
que sea lo más compatible
posible con tantas
máquinas como sea posible. Si solo lo compilamos a la última versión
de Javascript, algunas máquinas más antiguas
podrían no tener acceso a gran parte de la funcionalidad
que implementa. Y entonces haríamos que nuestros
sitios web fueran más inaccesibles. Así que en este caso lo hemos
compilado hasta ES five, que es una
versión un poco más antigua del script Java. Creo que Ron siete
u ocho a estas alturas. Y luego hay un par de opciones más que
notarás. Todo esto está en el objeto
Jon Json también. Dice que
te permitirá poner Javascript porque todos los archivos Javascript
son archivo mecanografiado válido Así que en realidad puedes
escribir Javascript en un proyecto mecanografiado puede que
no tenga mucho sentido, pero puedes hacerlo si quieres ¿Y entonces es estricto? Por lo que va a hacer cumplir
una estricta comprobación de tipos. Puede que o cuando esté aprendiendo, es posible que
desee dejar esto encendido. Pero puede o no crear algunas reglas difíciles
más adelante en tu proyecto. Depende de lo que
funcione para ti y luego de algunos otros valores que acaban de poner
para nosotros automáticamente. Como trabajamos con escritura tipo. Cada vez más
veremos cuándo y cuándo
no necesitamos interactuar
con estos archivos. Pero por ahora lo
dejaremos como está. A continuación
vamos a entrar en nuestro archivo TSX y
nuestro archivo TSX índice y ver
qué tienen esos ahí El archivo índice TSS, archivo TSX se ve
más o menos igual No hay nada realmente diferente
ahí. Cuando entramos en nuestro archivo TSX, más o menos es
lo mismo, para ser honestos Y como ya puedes ver, Typescript y Javascript son más
o menos lo mismo No hay mucho que
sea muy diferente, pero hay algunas piezas clave que marcarán alguna diferencia. Sigamos adelante y creamos un poco de una app
para trabajar con esas. Así que he seguido adelante y creé un componente llamado Contador, igual que nuestro contador anterior. Este contador podría
hacer cosas como contar hacia arriba por uno
o contar atrás. En este momento
no hace nada, es solo un componente vacío. Pero sigamos adelante
y tratemos de pasarle algunos accesorios para que podamos agregarle
alguna funcionalidad Entonces, lo que vamos
a hacer dentro de nuestra app, vamos a crear un par
de variables aquí. Digamos título y le
daremos el título, un valor de mi contador. Entonces este podría ser el
título para nuestro mostrador. Diremos const button text y podríamos decir que esto
podría ser más uno Entonces solo le daremos algunas variables
básicas básicas. Todo esto es solo para mostrar
cómo funciona el script de tipo. Veremos que eso nos está dando
un poco de subrayados amarillos lo
que ha hecho desde antes Debido a que las variables han sido declaradas pero
no
son rojas, aún no se utilizan. No
te preocupes, ya llegaremos a eso. Lo que vamos a hacer ahora es
pasar estos para contrarrestar. Digamos título es igual a
título y botón. Es igual al texto del botón. Genial, seguimos recibiendo
ese error porque, pero ahora en realidad es
un error de tipo. Entonces dice tipo título
tipo de cadena y botón tipo
de texto de cadena no es asignable para escribir atributo
intrínseco El título de propiedad no existe
en los atributos intrínsecos. Entonces, ¿qué
significa eso? Entonces básicamente, mecanografiado permite esta
cosa muy especial llamada Y
mecanografiar nos permite asegurarnos de que los valores que pasamos son
de cierto tipo, ¿verdad? Estamos, ya sabes, en un título donde queremos que sea texto,
queremos que sea una cadena. No estamos pasando un
objeto, por ejemplo, solo
estamos pasando una cadena. Entonces, escriba script nos permite
verificar esto antes llegar
a la etapa de
compilación y darnos cuenta de que nuestra aplicación
simplemente está rota sin motivo alguno Entonces, si vamos a nuestro contador, en realidad
podemos traer estas variables como
lo hemos hecho antes del título y el texto del botón
y podemos guardar eso. Pero aquí estamos recibiendo
algunos errores. Así que estamos consiguiendo que todos los
elementos destructuredr no se utilicen. El título del elemento vinculante tiene
implícitamente cualquier tipo. Bien, entonces estamos
recibiendo dos errores. Estamos recibiendo un error porque aún no los
hemos usado. Bien. Pero también estamos recibiendo el segundo error que no
habíamos visto antes. El título del elemento vinculante tiene
implícitamente cualquier tipo. Ahora los tipos y el
mecanografiado son
igual que los diferentes tipos de datos de los
que hemos hablado antes Tenemos cadena objeto de
número booleano, pero hay esta cosa en tipo script llamado an y en realidad
no es un buen Cualquiera está diciendo literalmente
como esto podría ser de cualquier tipo y derrota el
propósito de usar script de tipo Si alguna vez intentas escribir
algo con el tipo de cualquiera, en
realidad te
dará un error. Entonces hay un par de formas en las que podemos
sortear este error. Bien, la forma en que vamos a sortear
estos errores primero, sigamos adelante e
implementarlos en nuestro proyecto. Entonces pongamos una H uno
y le daremos un título. Le daremos la propiedad
de cualquier título que sea. Lo guardaremos y luego
crearemos un botón. Le daremos la propiedad de cualquier texto
de botón que
sea . Fresco. Vamos a seguir adelante y
ahorrar eso. Ahora al
menos nos hemos deshecho
de ese primer error, pero aún tenemos
el error de tipo Eddy. Lo que tenemos que hacer
en el tipo de script es en realidad crear algo
llamado interfaz. Una interfaz es básicamente
solo un conjunto de reglas que le dice al componente qué hacer con las variables
que se han pasado, qué hacer con las propiedades que se han
pasado a través de ella. La forma en que creas una
interfaz es que sales de tu componente justo encima de
él tal vez donde
importarías algo justo
entre esos dos espacios. Sigues adelante y
dices interfaz, y luego solo le
das un nombre. Normalmente la gente
solo lo llama accesorios, pero podrías llamarlo como
quieras Podrías llamarlo accesorios de contador
o accesorios de aplicaciones para que sean específicos de tu
componente Pero puedes llamarlo como
quieras porque solo tenemos un
componente que está tomando accesorios Sólo lo llamaremos accesorios, pero
sí tiene que ser capital. Sea cual sea el nombre que elija, asegúrese de que la primera letra
sea Interfaces mayúscula y que sea un objeto. Así que simplemente crearemos
nuestro objeto ahí. No es igual a eso,
solo usa las llaves rizadas. Entonces lo que queremos hacer
es por cada prop que
tenemos que se está
enviando a contrarrestar, queremos decirle a la interfaz
cuál debe ser ese tipo. Si escribo título aquí, puedo usar dos puntos para
luego asignarle un tipo. Entonces voy a decir title es de
tipo string y guárdalo. Y tenemos uno hecho. El siguiente es el texto de botón, que también es de tipo string. Y pondremos cuerda aquí y
luego la guardaremos y funcionaremos bien. Ahora estamos recibiendo
este otro error aquí y todavía estamos
recibiendo estos errores aquí. Eso es porque estos dos aún no
han sido conectados. Existen en el mismo expediente. Pero el componente, el componente necesita que se le diga que realmente use ese utilería La forma en que haces esto con SX es que en realidad solo
pones un poco de dos puntos aquí, justo al lado de esos corchetes
squiggly, y escribes el nombre de
cualquiera que sea tu interfaz Así que en nuestro caso, utilería y ahorra. Y una vez que hagas eso, verás que todos nuestros errores se
han ido. Y ahora hemos
inicializado nuestros valores con algún tipo de
algún tipo de tipo Ahora si realmente lo estuviéramos, y si revisas tu página, tendremos mi contador
con un número, ¿verdad? Bastante simple. También hay
diferentes tipos disponibles. Digamos que quieres pasar
una función, ¿verdad? Entonces digamos que vamos a crear una función
onclick en click es igual a M consola dot
log clicked, Así que solo quieres crear una función
onclick realmente simple Y eso lo pasamos así
como un utilero. Como es habitual, notaremos que se vuelve amarillo
porque es una función. Y tenemos que agregarlo a
nuestros apoyos aquí al click. Vamos a agregarlo al
click de nuestro botón. Di eso. Pero el
problema es, uno, aquí no
es amarillo porque no sabe de qué
tipo es, ¿verdad? Porque aquí no lo hemos puesto
en nuestros accesorios reales. Así que sigamos adelante y de
hecho lo pongamos en nuestros accesorios. Entonces diremos al hacer clic. Pero lo diferente
aquí es que es una función. Y si recuerdas
tu Javascript, una función no es como un
tipo en script Java, ¿verdad? Es como una
cosa que usamos, ¿verdad? Quiero decir, las funciones supongo que son objetos pero como
no
lo querrías solo son de
una clase diferente, son de un tipo diferente. Entonces en el tipo script, realidad
tienen algo
para funciones donde dirías si devuelve algo o
no. Entonces, la sintaxis para esto es en realidad solo tus paréntesis
regulares Entonces escribirías
la flecha y luego escribirías void si
no devuelve nada. Si devuelve algo, tal vez
podrías decir cadena
o lo que sea que devuelva. Y si se necesitan argumentos, podrías pasarlos aquí, como si se necesitara arte uno de tipo
cadena si eso fuera cierto. Esto no es cierto para
nuestra función aquí. Pero en su mayor parte, la mayoría de las funciones
van a estar transmitiendo solo
nuestro simple argumento, menos funciones que
van a anular y la razón por la que van a
anular es porque en realidad
no devuelven
nada, ¿verdad? Si una función devuelve algo, entonces eso sería datos
significativos para almacenar en una variable
u otra cosa. Pero en su mayor parte, cuando estás
transmitiendo una función, solo
va a
desencadenar algo dentro de la otra aplicación. Entonces, si tuviéramos, por ejemplo, si tomamos botón e hicimos nuestro propio
componente de botón como lo teníamos antes con el anuncio en
el botón restar, podríamos simplemente pasar el
clic como un vacío y dejar toda la lógica en
la función de contador. Esa es
una opción que podríamos tener. Entonces ahora que hemos puesto los paréntesis vacíos
igual que una función de flecha, ya
sabes, paréntesis, y luego no va a
devolver Lo hemos agregado aquí a nuestros accesorios y lo hemos agregado
a nuestra función Cuando vayamos y hagamos clic más uno, lo notaremos en nuestro real, y déjame borrar esto y si vamos y registramos
nuestra consola real aquí, notaremos que dice click. Y cada vez que hacemos clic en
él, solo agrega uno a la pila para que sepamos
que está funcionando correctamente.
Escriba script. Hace falta un
poco acostumbrarse, pero una vez que estás acostumbrado,
es mucho más fácil trabajar con él. Personalmente, una de las cosas más desafiantes
para trabajar cuando estás trabajando con script tipo es cuando tienes objetos más grandes, ¿verdad? Entonces digamos que teníamos un objeto de tal vez tenemos un objeto
llamado house otra vez, ¿verdad? Y esto es un objeto, este es un objeto que tiene un
valor de nombre de mi casa. Y entonces tal vez tenga
habitaciones, que es un número. Y entonces tal vez
tenga electrodomésticos, que es una variedad de Sí,
y tiene electrodoméstico. Así que vamos incluso a eso y digamos que
pasamos casa a nuestra función de
contador. Probablemente deberíamos
cambiar el nombre de este componente, pero digamos que pasamos casa
a nuestro mostrador. Hay un par de formas en las
que podríamos manejar esto. Si importamos casa, solo
vamos a
registrarla en consola por ahora. Para deshacernos de ese primer error, queremos agregarlo a nuestros accesorios Entonces agregaremos casa a nuestros apoyos. Pero, ¿qué tipo le
damos, verdad? Podríamos darle, supongo
al tipo de objeto,
pero en teoría, como cuando se
piensa en ello, todo en Javascript
es un objeto. Entonces darle el tipo de objeto
podría no ser la mejor idea. Quiero decir, funciona.
Pero podría no ser la mejor manera de verificar si está
funcionando correctamente, ¿verdad? Como, quiero decir, la consola la
registramos. Está bien, funciona. Pero en, y en un mundo ideal, en realidad
tendríamos una tipificación un poco más específica, una
escritura un poco más estricta para que sepamos si hemos conseguido o no la forma correcta de nuestro objeto. Ya sabes, casa
con el nombre y los electrodomésticos y las habitaciones. Ya sabes, queremos
asegurarnos de que
ese es en realidad
el objeto correcto. Entonces, una forma de hacer esto
es comenzar en la aplicación, puedes crear un tipo para casa, así que diremos interfaz y también puedes tener
múltiples interfaces. No necesitas
solo tener uno, sino que puedes decir Interface House. Entonces básicamente puedes usar la forma de esta
casa para crear ese tipo. Se puede decir que el nombre
va a ser una cadena, las habitaciones van
a ser un número, los electrodomésticos van a
ser o una matriz de cadenas. La forma en que escribirías esto es
que escribes una cadena y luego pondrás el
símbolo de matriz junto a él. Nos está diciendo que en realidad
es una matriz de esas cadenas. Si fuera una matriz de
números, podrías, en realidad
podrías simplemente
escribir array y number, pero en nuestro caso
van a ser cadenas. Entonces, lo que
vas a querer hacer, vas a
asegurarte de exportar esta
casa de interfaz de exportación y luego
quieres importar la interfaz
al contador. Así que recuerda como
dije puedes nombrar las interfaces,
cualquier cosa que sepas. Solo asegúrate de que sea como relevante para lo que es la cosa. Y también podrías mecanografiar casa. Puedes poner tus dos puntos aquí y luego darle a
casa el tipo de casa para que así el compilador
sepa por ambos lados como,
bien, esta casa
coincide con esta casa Ambos son del mismo tipo. Entonces, si pasamos a nuestro mostrador, podemos pasar a la
parte superior de nuestro archivo donde deberían vivir
todos nuestros estados de cuenta de importación y
deberíamos alojar desde la aplicación dot slash Y luego iremos a
nuestra casa objeto aquí. Y luego solo dale
pases el tipo de casa. Y ahora en realidad no
cambia nada en nuestra app, pero ahora sabemos que se escribe con
más precisión, ¿verdad Ahora sabemos que
seguro estas dos cosas coinciden seguro saber que la casa es de tipo casa y la otra es de
tipo casa también. Y así si en realidad teníamos el tipo de
interfaz equivocado, bien, digamos que he creado otra
interfaz aquí y la llamé casa y tenía nombre y era solo un número
y eso era todo. E intenté pasarle
eso a este tipo de casa. Debería llamar a un error. Y verás en nuestros Abs
ya se puso roja. Entonces verás aquí que nos
dirá que tipo casa no
es asignable al tipo home porque las propiedades
de nombre son incompatibles Cadena que no se puede
asignar al número de tipo. Aquí es donde el script tipo
muestra su fuerza real. Podríamos tener dos
tipos muy similares como casa y hogar. Que son casi lo
mismo y ambos
tienen el
nombre propiedad. Pero sin embargo, el nombre de propiedad en sí no es del mismo tipo. Sé que este tipo de cosas puede ser un poco complicado y un
poco confuso, pero a medida que trabajes
un poco más en la escritura mecanografiada, se volverá mucho más claro cuanto a qué tiene sentido
y qué no Pero por ahora, puedes ver
que,
ya sabes, básicamente, siempre y cuando escribas
las cosas de la misma manera, mecanografiado hará
la comprobación por ti y se asegurará de que no cometas ningún error
descuidado Personalmente, encuentro el
mecanografiado realmente esencial. Prefiero escribir con él
cuando estoy creando aplicaciones. Sólo porque
hace todo eso. Comprobando mis pequeños
errores tontos antes de llegar a la
etapa de producción real y luego no
puedo entender qué tiene de
malo la aplicación. Así que eso fue solo una
introducción rápida al mecanografiado,
y seguiremos adelante y
trabajaremos con él un poco más
un poco más tarde Si alguna vez tienes
alguna duda sobre qué cosas puedes y qué
no puedes hacer con el mecanografiado, te
dejaré un enlace al
sitio web que tiene la documentación del mecanografiado
para que puedas acceder a toda la información que
puedas necesitar o buscar toda la información que puedas
necesitar si no estás seguro cómo escribir
algo
10. TypeScript y Next.js (estilo): Bien, así que sigamos
adelante y
comencemos a construir nuestra aplicación
de script tipo. Si echas un vistazo
al archivo de diseño aquí, esto es lo que vamos
a construir. Se trata de una sencilla aplicación de
calculadora de propinas que involucra algunos tipos diferentes con los
que podemos trabajar y ver que nuestro proyecto está funcionando correctamente
y aprender tipos script. Entonces, vamos a sumergirnos en ello. primero es lo primero,
voy a seguir adelante y comenzar en mi repositorio aquí. Ahora ya he usado
esta app de inicio aquí. Está en mi Github,
se llama aplicación Muck. Lo que hace es combinar algunas cosas rápidas para
ponerse en marcha más rápido usando material Y
siguiente S, y escribir script. La mayoría de estos
solo están relacionados con el estilo y la
activación de una aplicación rápida. Así que siéntete libre de
usarlo si lo deseas. Pero no tienes, solo
puedes iniciar una aplicación regular usando
react y type script. Entonces tenemos tres o
cuatro secciones aquí. Tenemos el monto de la factura,
el porcentaje de propina, el número de personas, y luego al
monto de propina por persona. Esta es la
pieza calculada y la pieza de reinicio. Bien, así que bastante sencillo. Lo que voy a hacer, estoy asumiendo que con esta app querrás poder
ingresar el monto de la factura. Así que querrás usar
algún tipo de entrada. Luego una vez que ingreses eso, entonces
querrás agregar, poner la cantidad de propina
a ese número y luego agregar el número de personas como todo
el lado izquierdo son tus entradas y luego el lado
derecho es tu salida, esencialmente resultados
de todo eso. Para hacer eso, creo que
lo que voy a hacer es crear una
entrada de propina y una salida de propina. A lo mejor voy a crear
un nuevo archivo para decir, digamos Bill o Cost input. Y voy a poner eso
aquí y luego volveremos a decir A. Puedes ponerles el nombre que
quieras. Apenas lo primero que me
vino a la mente. Salida. Muy bien, increíble. Entonces
tienes la entrada y la salida. Ahora cosa en la que pensar, especialmente cuando
estás trabajando con script tipo
reactor o cualquier
tipo de tecnología como esta, quieres pensar en dónde está viviendo
el estado inicial de tu
aplicación. ¿Está en cada componente, y entonces tenemos algún gerente estatal global
más grande? ¿Vive en un componente
superior? ¿Cuál es la forma en que fluyen
tus datos? Esencialmente, para esto, creo que es una aplicación bastante
sencilla, así que no me gustaría
usar una más compleja, estoy pensando como situación de datos
rojos. Creo que lo que quiero hacer es intentar y simplemente sostenerlo
dentro del estado local. Tal vez ponlo en el stand de Z, pero veamos cuánto podemos hacer sin realmente
empujarlo demasiado. Bien, primero lo primero, terminemos de construir esto. Queremos propina de facturas, porcentaje y número de
personas en nuestro insumo de costos. Vamos a tener
algunos elementos diferentes agregaremos en nuestra caja. Vamos a decir un poco
es tipografía para decir factura S T número por ciento Oh, increíble. Bien, genial. Y luego vamos a tener
algún tipo de entrada de texto. Oh, solo dame el
mismo error aquí, porque necesito
hacer entrada directa. Importaciones directas,
debo decir n insumos. Bien, vamos a importar caja
y vamos a importar timpografía. Muy bien, increíble. entrada tiene un
componente de campo de texto, eso es lo que es. Así que sólo vamos
a pedir prestado esto. Vamos a
tomar prestado el componente de campo de texto
básico de esquema componente de campo de texto
básico para nuestra factura y para
nuestro número de personas Yo sólo voy a seguir adelante e
importar eso ahí. Genial, increíble. Entonces para estos ahora
va a ser más como una selección basada en un botón
con una entrada al final. Es un poco más
complejo en ese sentido, lo que en realidad voy
a hacer es envolverlos en cajas solo para que no
mezclemos cuál es cuál. Bien, así que esto
es para la factura. Esta caja va a
ser el porcentaje de propina. Voy a añadir un poco más en esta caja. Agrega los botones, y luego esta casilla va a ser
para el número de personas. Impresionante. Sólo para estructurar realmente las cosas un
poco más claramente porque creo que se
va a poner un poco
inmanejable . Bien, genial. Entonces tenemos eso ahora la cosa
con estos insumos, ¿no? Al igual que podríamos tenerlo
para que el valor, sea cual sea el
tipo de usuario en el valor. Y también debería
cambiar el color aquí para que podamos
ver realmente el color. Bien, genial. Entonces sí, podría simplemente
configurarlo para que el, para que cuando ponga la
cantidad en el ingreso de costos, simplemente viva dentro de
este componente. Pero porque necesitamos acceder a la cantidad 142 para que podamos obtener el monto de propina
en el total por persona. En cuanto a la forma en que estoy
pensando sobre el estado, creo que quiero
elevar el estado, o levantar el estado
y tenerlo vivo en la calculadora de propinas sí. Entonces, ¿qué aspecto tiene
eso? Bueno, para mi parece
crear unos cuantos elementos, cuantos elementos de estado. Terminaríamos creando
un precio total a cero y luego pasándolo
a través de nuestras aplicaciones. Eso lo haremos en sólo un segundo. Terminemos
con el estilo. Entonces vamos a darle
este color de fondo. Colores de fondo, ¿de acuerdo? Y como dije, siéntete libre de
usar el estilo que quieras. Esto, depende totalmente de ti. Solo estoy usando a Maly, ¿verdad? Porque es un
poco más rápido para mí. Bien. Y entonces oh, ya
sabes, ese es
el otro tema, necesito hacer de esta una caja flexible. ¿Todo bien? Impresionante. Bien, entonces entonces ahora dentro de estos, sigamos adelante y terminemos esta línea del cielo
será ¿cuál es el ancho en ese 379? Yo no agrego eso. El
inferior también. Estos dos van a
tener estilos de espejado. Me pregunto si hubo como
alguno tal vez comentar eso. Ahí vamos. Me preguntaba por qué
eso no estaba tomando efecto el estilo global. Hay como un
reset global que puse aquí, lo cual es útil pero estaba anulando mi margen y
Paddy, lo saqué Bien, así que ahí vamos. Bien, entonces tiene
una etiqueta aquí y
va a decir gente,
entonces esta, va a ser, la etiqueta de factura
va a ser solo $1 firmar estas dos identificaciones porque no nos son
útiles en este momento. Puedes cambiarlos cuando sí se vuelvan útiles entonces también
voy a establecer color para que sea este color
para ambos, que podamos ver el texto dentro. Voy a arreglar la taza en un segundo. Nuestra siguiente pieza aquí toma en cuenta eso. Bien, así que agreguemos estos
cinco botones y una entrada. Una va a ser una de estas
entradas sin el ancho. Entonces voy a
hacer algo rápido. Voy a decir
propina de costos por porcentajes, y voy a establecer que
sea una matriz de números. Voy a decir 5% supongo. 5% 10% 50% 20% y 25. Es 25% Oh no, perdón. 50% 25% Y 50% 25% y 50% Todo bien. Fresco. Entonces esos son
los porcentajes de propina. Ahora en el fondo aquí, sólo
voy a
mapear sobre esos. Voy a decir propina
porcentajes Mapa cada por ciento. Entonces quiero seguir
adelante y devolver un botón con el
porcentaje por ciento como, como el botón y también
podría darse aquí. Déjame deshacerme de
eso. No puedo decir que deba devolverlo, pero altos Key,
llave vendida es el porcentaje, porque esos
van a ser únicos. Bien, genial. Entonces ahora
tenemos nuestros botones. Impresionante. Cambiemos el color de
fondo para que sea
así así genial. Y entonces vamos a establecer
el ancho de cada uno para que sea 117, creo. 48. Perfecto. Impresionante. Entonces esto, ya
sabes qué,
tengo una columna flex. Yo sí quiero que sea columna flex, pero creo que quiero
envolver estos en la caja. Estoy envolviendo los botones en
el campo de texto en una caja. Ahí vamos. Y entonces
voy a decir display flex wrap
va a ser, entonces voy a decir ancho. Digamos. ¿El 353? Sí, tres seguidos. Entonces digamos que el ancho es de 450. Impresionante. Sólo voy a copiar estos
estilos a este texto sentir y guardar eso y tal vez
añadir un poco de margen. Nos vemos bastante
bien en eso aquí. Impresionante. Eso me parece
bastante bien. Creo que estoy bastante contento
con eso en términos de solo el estilo general. Lo que voy a hacer
ahora con estas cajas, voy a agregar algo de
margen a la parte superior e inferior para cada una de
estas como cajas exteriores, ahí
tenemos un buen espaciado. También me vendría bien una caja flexible, que en realidad
probablemente sería mejor. Hagamos de esta
caja exterior una caja flexible. Diré espacio. Ahora hay espacio uniformemente
de arriba a abajo. Bien, genial. Eso se
ve bastante bien. Ahora veamos, ¿
qué más tenemos que hacer? Oh si, tenemos que
hacer el otro lado. Pensemos un poco en la
salida de la factura aquí. Salida de factura, tenemos
esta caja verde oscuro. Empecemos por eso.
Vamos a agarrar este color todavía de nuevo. Digamos antes. Y luego le daremos
un ancho, 413 por 41714. Apenas 413 por 413, pero en realidad no importa. 417, Di que Co O necesito necesito agregar
a la calculadora de propinas. No está aquí. Esto es para subir aquí. Margen cero O para la calculadora de
propinas en sí, necesito alinear los ítems
al centro, ¿de acuerdo? Perfecto. Fresco, genial,
genial. Se ve bien. Bien, así que
lo siguiente que quiero hacer ahora, quiero seguir adelante y agregar
en estas piezas que queremos, darles
propina y total
y un botón de reinicio. Vamos a crear un par
de elementos tipográficos. Diremos que solo arregla ese
error en la parte superior aquí. Diré
cantidad de propina cantidad por persona, y entonces esa va
a ser una cantidad. Vamos a arreglar
esto en 2 segundos. Puede envolverlo en una caja. Y luego lo vamos
a volver a hacer, pero vamos a
decir total por persona. Entonces en la parte inferior aquí,
vamos a tener un botón que dice reinicios Mismo botón. Bien, botón de reinicio, ya lo
lograremos. Esto llegó. ¿Bien? Bien, increíble. Así que aplica estas cosas en
la siguiente caja también. Fresco. Perfecto. Entonces vamos a envolver a estos
dos en una caja. Y la razón de eso,
esos dos en una caja, es que cuando digo
justifican el espacio de contenido
entre los botones
en la parte inferior y los
montos de precio están en la parte superior. Impresionante Por cool. Ahí vamos. Bastante básico. Sólo voy a
retocar algunos estilos más y luego seguiremos adelante y
trabajaremos con nuestro guión ty. Bien, ya sabes,
creo que necesito apuntar. Sólo estoy tratando de apuntar el color aquí para que podamos verlo. Creo que tengo que apuntar. Déjame base de entrada. Puede tirar, sí. Bien, perfecto.
Eso es lo que quiero hacer. Bien, así que voy a agarrar, en realidad sacar ese color. Saca ese color, puedes sacar ese color, no
estás haciendo nada. Y solo toma esta gráfica ahí. Bien, genial. Entonces solo tecleamos las cosas aquí, ahora las
podemos ver. Cualquier otro pequeño ajuste. Este lado se ve bastante bien. Ahora creo que el lado derecho aquí, tal vez podríamos simplemente
cambiar este color, la cantidad de punta color a blanco y darle un
poco más de espaciado. Y entonces deberíamos ser buenos
para seguir adelante y pasar nuestro
espacio de escritura tipo espacio entre.
11. TypeScript y Next.js (tipos): Bien, así que ahora que
tenemos todo esto construido,
sigamos adelante y construyamos en la
funcionalidad de script tipo, el propósito de esta lección y veamos como es un
poco diferente de usar
Javascript o JSX regulares. Tenemos nuestro estilo todo
bastante hecho. Pero una cosa para observar y notar de la que
hablé antes con el estado. Queremos pensar en dónde vive
el estado dentro esta aplicación porque tenemos tres o cuatro piezas distintas. Aquí tenemos la sección de entrada, donde el usuario podría seleccionar la propina y poner el número de personas o
poner el monto total de la factura. Entonces tenemos la salida,
que nos dará el monto de propina y el costo
total por persona, monto de
propina por persona,
costo por persona. Entonces tenemos un botón de
reinicio aquí. Ahora para que todo
esto funcione, el estado necesita ser algo,
bueno, no del todo
globalizado necesariamente, sino disponible a un nivel superior para ser pasado entre
estos dos componentes Voy a intentar
hacer esto usando
solo el estado de reacción regular. Si esa no parece
ser una solución adecuada, haremos la transición a
algo así como stand. Lo que estoy tratando de hacer es evitar uso de reduct
porque hay tanto carácter reiterativo
involucrado y es una aplicación bastante
sencilla Veamos si podemos hacerlo solo usando algunas soluciones simples. En mi mente, necesito
pasar la factura total, el porcentaje de propina,
y el número de personas del
lado izquierdo al lado derecho. Creo que necesita vivir en el componente superior de la calculadora de
propinas aquí. Sigamos adelante y
hagamos que eso suceda en calculadora de propinas aquí. Lo que voy a hacer
es que voy a empezar definiendo algunas variables. Voy a decir,
digamos factura total. Voy a decir set
total bill iguala estado, que va a importar desde react. Vamos a
inicializarlo a cero. Ahora una cosa con
type script aquí, en realidad
podemos seguir
adelante y agregar un tipo y especificar que este
tiene que ser un tipo de número. Ahora porque
también pones cero, infiere que necesita
ser un tipo de número Estamos recibiendo un error aquí porque no hemos usado cliente aquí porque ese es
solo el siguiente error GS. No tiene que ver con el tipo de
script, pero podemos especificar el tipo que esta factura necesita para
ser de un tipo de número. La cantidad tiene que
ser un número para que
podamos hacer cálculos sobre. Ese es uno de los puntos
en los que empezamos
a usar mecanografiado Y ya verás como esto se
escurre hasta nuestro, así que tenemos la factura Hagamos lo
mismo para
fijemos porcentaje de propina, porcentaje porcentual. Eso también va
a ser un número. Sí, va
a ser un número y luego número de personas.
Haremos una más. Diré número de personas, número
fijo de personas. Y otra vez, se indica y número va a
inicializarlo a cero solo así
empezamos con un resbalón limpio Bien, así que ahora que hemos
inicializado estas variables, adelante y
utilicémoslas en nuestra app para mi entrada de costos Ahora quiero pasar
estos parámetros de factura total y establecer para facturar, porcentaje
total, establecer
porcentaje total número de personas, establecer número de personas
al ingreso de costos. Porque esto va
a tener implicaciones en cuanto a lo que sucede. Ahora en realidad hay
dos formas en las que podemos hacer esto. Podríamos pasar ambos
hacia abajo o podríamos definir las
funciones en calculadora. Permítanme comenzar con sólo pasar la variable inicial.
Digamos factura total. Factura total, propina por porcentaje, porcentaje es igual
propina por porcentaje y número de personas
es igual al número de personas. Verás, ya estoy
recibiendo un error aquí porque el tipo
script nos está diciendo que en realidad no tenemos la propiedad en el propio
componente. Entonces este es uno de los
beneficios del tipo script. No puedes simplemente
pasar cosas
aleatorias y esperar que funcione. Es necesario
utilizar realmente el script de tipo. que especificar, debería decir, qué
tipos está esperando. Si me pasa a costar
entrada aquí e importo la factura total, voy a tomar en porcentaje de propina y también tomar en
número de personas. Nuevamente, si esta es una aplicación
regular de reacción, podrías simplemente
traerlas así. Pero como no es una reacción regular, no
es solo una aplicación Javascript, debería decir, React. Verás que en realidad está
recibiendo un error aquí. Diremos elemento vinculante
número de personas, por ejemplo, implícitamente
tiene cualquier tipo Y como recuerdas antes,
hablamos de cualquiera, no necesariamente queremos tener
solo un tipo genérico. Lo que queremos hacer
es seguir adelante y específicamente escribir
estas variables. Déjame mostrarte cómo
vamos a hacer eso. La forma en que vamos
a hacer esto es crear algo
llamado interfaz. Una interfaz es básicamente
una forma para escribir script, para nosotros decirle script de tipo. Oye, estoy esperando que
estas variables vengan en estas propiedades y quiero que sean de ciertos tipos y estos son
los tipos que estoy esperando. Cualquier otra cosa que no sea eso,
por favor declare un error. Voy a
crearlo, voy a llamarlo props. Puedes
llamarlo como quieras. Y voy a delinear
estas distintas propiedades. Voy a decir factura total. Va a ser un
número. Voy a decir porcentaje de propina. Va a ser un número
como un número de personas. Va a ser, entonces
voy a decirle a tipo script que todos estos
pueden usar este mapa, esta interfaz para obtener
el tipo de cultivos. Y ya verás aquí ya
no tengo ahí, las cosas están funcionando hasta el momento. Lo último que tenemos que
hacer ahora es
conectar esto a las
ubicaciones reales en nuestra aplicación. En para la propiedad Textfield, creo que hay un
valor que podemos usar Creo que se llama
valor. Déjame revisar. Vamos a la API. Estoy bastante seguro de que es
como una entrada regular, pero quiero asegurarme para que
no consigamos algunos errores erróneos Muy bien, sí, creo que solo
ponemos en valor. Vamos a probar ese proyecto de ley. Vamos a decir que el valor
es igual a la factura total. Nosotros diremos que echa un vistazo aquí. Impresionante. Así que estamos
obteniendo $0 Perfecto. Simplemente haremos eso para la propina del
tres porcentaje. El porcentaje va a ser
un poco diferente, pero para el último campo de texto, vamos a decir que el valor
es igual al número de. Ahí tenemos un número
de personas puestas a cero. Perfecto. Estamos bien para irnos. En ese sentido, lo siguiente que quiero hacer es crear
algún set, ¿verdad? Cuando el valor en
estas entradas cambia, queremos activar
alguna función. Sigamos adelante y
escribiremos esa función. Y en realidad podemos
escribir esa función en calculadora de
propinas o
podemos escribirla en costo. No importa, solo
depende de lo que sea para nosotros. Si sigo adelante y lo
escribo en entrada de costos, puedo decir que necesito
pasar en el set. Quiero pasar al
setter. ¿Quieres pasarte solo función aleatoria? Pasaremos el setter porque
creo que voy a estar más limpio u. bien, y luego como ella nos está dando un conjunto
similar de errores Sí, sólo vamos
a dejar esto aquí, y luego voy a dejar
esto aquí. Entonces la diferencia aquí es
que en realidad vamos a pasar, va a ser
paréntesis es igual a vacío Y así es como le dices a
Typescript que es una función por la que estamos pasando Esencialmente, si la función tomó algo
así como tomó una R, ese era todo el
número de tipo por ejemplo, entonces podríamos especificar
eso también. Totalmente bien
dejarla como en blanco por ahora. Pero definitivamente podríamos
especificar el tipo si fuera necesario. Y mira ya estamos
recibiendo un error aquí. En realidad no es
capaz de establecer su tipo void, tenemos que configurarlo a este tipo. En realidad es bueno. Nos da el tipo exacto
que quiere que usemos. Si fuera una función regular,
podríamos usar type void. Pero debido a que estas son acciones de estado
establecidas, necesitamos usar los tipos muy específicos que nos
están dando. Eso está bien, solo
importamos esos tipos y luego
deberíamos estar bien para ir. Impresionante, Gran cosa
sobre mecanografiado. Te dirá
qué tipos importan. Bien, ahora queremos decir, para nuestro campo de texto,
queremos decir sobre el cambio, queremos En cambio, queremos establecer la factura
total para que sea el valor. Permítanme realmente crear
una función aquí dice ley de actualización
constante que
vamos a pasar, que va a ser el evento. Yo digo set bill va a ser Targetvalue Esa va a ser la forma en que
vamos a poder agarrar o realmente hacer. En realidad no necesitamos
hacer todo eso. Lo siento. Podemos simplemente sentarnos
en la factura del conjunto de cambios, solo
pasaremos en valor de Sarge Y debería
poder simplemente agarrarlos. Debería poder simplemente
agarrar el valor de E, que es como el
evento que está siendo, está escuchando el tipo de
argumento de tensión, no asignable al tipo de
parámetro de números Dime que el
valor que voy a recuperar es en realidad una cadena,
no un número. Pero lo que puedo hacer
en realidad es simplemente
lanzarlo para que sea un número. Dígale que
va a ser un número que solucionará ese
tipo de error. A veces un poco molesto. Tienes que cambiar muchas pequeñas cosas para
asegurarte
de que
no estás recibiendo errores de tipo. Pero creo que vale la
pena porque
funciona en el tipo final en 57, luego el número en
el estado, quiero decir, no lo
podemos ver aquí,
pero el número en el estado sería
57, lo cual es genial. Entonces eso es bueno para ir. Bien, así que
tenemos eso listo. Hagamos lo mismo por aquí. En lugar de factura total,
vamos a decir
establecer el número de personas establecido en lo
mismo, el valor objetivo. Cuando ese valor cambia,
cambiamos el número de personas. Me pregunto si cambia al valor
predeterminado si eso
hace alguna diferencia. Bien, por ahora solo
lo haremos una jugada de valor. Bien, entonces
tenemos esos dos establecidos. El último que quiero manejar es el porcentaje que necesitamos para
manejarlo de dos maneras. Básicamente, cuando
un usuario cambia como tipos en algo en el campo de texto
personalizado aquí. Y de hecho
lo voy a dar, ¿tiene etiqueta? Creo que necesita valor o un valor predeterminado es igual a
personalizado por porcentaje. Ahora un poco porcentaje, 1,000% Sí Cuando un usuario escribe
aquí o hace clic en un botón aquí, necesitamos asegurarnos de que el porcentaje porcentual se
actualice para que coincida con eso. Lo que quiero hacer es
decir ya sea al click, bueno, realmente no importa, es, estamos listando para ambos. Pero se hace clic en uno, el valor cambia cuando
se agrega algo a este
número que cambia, lo que ocurra último
es el que Al hacer clic, voy a
crear una función on click. Vamos a decir al
click vamos a
decir conjuntos a porcentaje
para ser por ciento. Y nos está dando
ese mismo error, pero esta vez es correcto
darnos ese mismo error porque hemos dicho que es una cadena. Lo que en realidad
voy a hacer es convertirlos en objetos. Voy a decir por ciento, y entonces la cantidad real de
multiplicación que
usaríamos es 0.05 Y así es como vamos
a resolver este problema Tenemos nuestra cadena
y luego también
tenemos nuestro número real
que podemos usar. Esa debería ser una solución bastante
sencilla. voy a decir. Y
entonces la clave ahora tiene que ser por ciento. Ay, Ash. En realidad, esa no era la forma correcta de hacer
este título porcentual. Ese por ciento, eso es lo que
debería haber hecho. Todo bien. Lo siento. Déjame
arreglar esto muy rápido. Todo bien. Impresionante. Entonces digamos que el título por ciento es la clave, entonces el valor porcentual es la
cantidad y luego el título por ciento es lo que muestra en la culata
arregló ese problema ahí. Ahora hemos puesto todas
esas cosas. Lo último que hay que configurar
es el archivo de texto. Sólo vamos a tomar prestada la funcionalidad de
cambio aquí, base
porcentual, Todo lo que
obtenemos del valor objetivo Sí, deberíamos ser
buenos en ese sentido. Volveré a
Calculadora de propinas y podremos probar, en realidad para ver si esto funciona, podemos decir consola dot log. Digamos que el
porcentaje total de propina de facturas y el número de personas en la consola registran cada uno de estos e inspeccionados
en nuestra consola. Ahora mismo son todos
cero, lo cual
tiene sentido porque
los hemos establecido en default a cero. Entonces si digo que la factura
total es de 100, verás los primeros cambios
de número. El solo selecciono diez, obtiene el 0.1 que es lo que
esperamos que suceda si
agrego en cinco personas, la última cambia,
entonces sabemos que
en realidad está funcionando
correctamente. Bueno para ir. En ese sentido, voy a quitar este registro de consola
por ahora igual de genial. Entonces sabemos que la
información se está pasando a la calculadora de propinas
correctamente, manera que las cosas realmente están
sucediendo correctamente. Ahora bien, la razón por la que no
quería hacer una paliza calculadora
de
propinas antes con todas estas pequeñas funcionalidades, porque ahora
vas a crear algunas funciones dentro de la calculadora de
propinas, necesitamos calcular cuál la cantidad de propina por persona y cuál debería ser el total
por persona Para ello, necesitamos
crear dos funciones. Decimos constante obtener propina por persona y luego
crearemos otra. Obtener total por persona. Podemos hacer esto aquí
o podemos hacerlo en insumo de costos. Realmente
no importa. Pero si lo hacemos aquí, entonces no necesitamos
perforar un conjunto adicional de apoyos en la
salida de la factura, debería decir Si consigo nivel o
tal vez sí queremos perforarlo en Sí, tal vez sí queremos
hacerlo, en realidad, lo siento. Hagámoslo en la salida de facturas
solo para mantener las cosas limpias. Bien, entonces vamos
a crear estos dos aquí, pero lo que sí
tenemos que hacer es pasar tres apoyos para facturar la salida Al igual que como teníamos una
interfaz en la entrada de costos. Voy a crear una
interfaz en la salida de facturas. Simplemente copia y pega
eso desde el, agarra estos de aquí, allá. Entonces ahora en la función aquí, voy a decir
obtener propina por persona. Somos la propina por persona
sería la factura total multiplicada el porcentaje de propina dividido por el número de personas dividido
por el número de personas. Esa será la persona de propina. Podemos decir que esta cantidad o en realidad no necesitamos
crear una función completa, solo
diremos
propina constante por persona, persona es igual, ahí vamos. Y luego diremos que
esta es la propina por persona, esa es la propina persona. Sí, acabamos de decir que la propina por persona es una factura total multiplicada el porcentaje de propina dividido por el número de personas actualmente. No es un número porque
no tenemos esos números. Pero lo arreglaremos
en tan solo 1 segundo. Bien,
lo siguiente que vamos a hacer es total por persona. Total por persona va a ser la propina por persona, La factura total dividida por el número de personas
más la propina por persona. De esa manera podemos usar eso para nuestra
segunda función. Digamos que este
va a ser nuestro total por persona, por persona. Eso tiene sentido. Factura total por el número de personas
más la persona de propina. Impresionante. Ahora mismo
estamos consiguiendo un número. Me pregunto si es no, deberían estar
entrando ya que los números se
pueden especificar que. Me pregunto si no van a entrar como número por alguna razón. Veamos qué pasa
si cambio el número aquí. O, ya sabes, podría ser, creo que sé
dónde está el tema. En realidad no estamos
pasando las variables, así que eso probablemente crearía un problema
bonito, bastante grande ahí. Muy bien, increíble. Así
que ya lo hemos enganchado. Entonces sí, si puedes ver aquí
con establecer la propina al 10% el monto de la propina
terminaría siendo de $2 por persona. Y entonces el total por persona sería entonces de
22 dólares lo cual tiene sentido $100 divididos por cinco personas serían $20 por
persona más $102 propina $22 Podemos hacer un
poco de forma sumando aquí solo para que
se vea un poco más limpio Solo podemos agregar un letrero de $1 aquí. Agrega $1 regístrate aquí. Se puede cambiar hacia
arriba. A ver si al pulsar el botón cambia,
cambia los montos ahí. Lo último que
probablemente podríamos hacer es simplemente conectar nuestro botón de reinicio. Simplemente reinicia todo a cero. Entonces sí, como puedes ver, Typescript no es tan
diferente de Es bastante similar en la
forma en que operaría en una aplicación de reacción o en
una aplicación web simple de JavaScript
mecanografiado La única diferencia
es poder ver
los errores
antes de que ocurran. Entonces como por aquí, el error era que
ni siquiera habíamos pasado el, si se trataba de una aplicación
Javascript, podríamos haber pasado como diez, 50 minutos tratando de depurar el problema y averiguar
cuál es el problema. Lo mejor del script tipo es que solo te permite,
oye, aquí es donde está el problema. Ese manejo rápido de errores
antes de continuar e iniciar su aplicación y las cosas no
funcionan, no lo sabes. Sí, así es como
configurar un script tipo, reaccionar aplicación,
ojalá eso fuera útil.
12. CONCLUSIÓN: Conclusión de la que hablamos
mucho en este video. Desde los conceptos básicos del mecanografiado hasta la creación de tu propia aplicación web
mecanografiada futuro, deberías
poder comenzar a construir tus propios sitios web desde
cero usando mecanografiado Solo recuerda buscar
algo cuando no
estés seguro de ello. Me encantaría ver cómo resulta
tu sitio web, así que por favor deja un enlace a
tu código, una captura o el sitio alojado
en la pestaña Proyecto y recursos a continuación, para que pueda ver todo el trabajo
duro que has hecho. Leo cada comentario, cada reseña y miro
cada envío de proyectos. Entonces, si tiene alguna pregunta, no
dude en
dejar un comentario en la sección de revisión
a continuación o comunicarse conmigo directamente. Consulta mi página de perfil para obtener más información al respecto. Si quieres saber
más sobre codificación, consulta los otros videos
que tengo en mi página de perfil. También tengo videos
en Next GS y React disponibles en mi canal de
Youtube y sitio web. Los vincularé a continuación
y en mi perfil si estás interesado en
aprenderlos también, y los veré en el siguiente.
Zoë Davidson, Software Engineer & Cinematographer
