Transcription
1. Intro: Vous en avez peut-être entendu
parler, mais savez-vous pourquoi et comment utiliser le tapuscrit
au lieu de Typescript est un surensemble
sécurisé de
Javascript qui permet
d' utiliser les mêmes fonctionnalités
et capacités que
Javascript tout en
empêchant les
erreurs imprudentes d' empêchant les
erreurs imprudentes en ligne dans
votre application Web Aujourd'hui, nous allons passer en
revue tout ce que vous devez savoir pour apprendre
et utiliser le tapuscrit Bonjour, je m'appelle Zoé. Je suis ingénieur logiciel
et ancien professeur qui aime aider les autres à
se lancer dans le codage. J'ai créé des tonnes de
sites Web et d'applications Web en utilisant React CSS, HTML et plus encore. Aujourd'hui, nous allons
passer en revue Typescript et comment
vous pouvez l'utiliser pour améliorer considérablement votre temps de développement et votre expérience Pour ce faire, nous allons construire
ce projet en texte dactylographié. Nous verrons quels sont les types, comment les utiliser et
pourquoi ils sont utiles. Ensuite, nous allons nous
plonger directement dans notre tutoriel. Le didacticiel sera
divisé en trois parties. Nous allons d'abord initialiser notre
nouveau projet Typescript. Ensuite, nous le mettrons en
service sur nos navigateurs. Enfin, nous allons créer notre
site Web à l'aide de Typescript. Ce cours s'adresse à tous ceux qui souhaitent
apprendre le dactylographié, bien qu'il soit essentiel d'avoir une
compréhension générale de Javascript si vous avez
besoin d'apprendre le Javascript J'ai un cours complet sur le
lien ci-dessous Cependant, si vous connaissez
déjà Javascript et que vous
avez juste besoin de vous rafraîchir, j'ai inclus quelques
leçons ici pour assurer que nous sommes
tous sur la même longueur d'onde. À la fin de ce cours,
vous devriez être capable de créer vous-même une application
Web entièrement dactylographiée une application
Web entièrement dactylographiée. Commençons.
2. Projet de classe: Projet de classe. Notre
projet pour cette classe sera de créer une application
Web simple à l'aide de dactylographiés Pour ce cours, il
sera essentiel avoir accès
à un
ordinateur sur lequel vous pouvez exécuter le code Visual Studio ou un autre éditeur
de code de votre choix. Vous devez également disposer d'un
navigateur tel que Google Chrome , car nous l'
utiliserons pour afficher notre page Web. Enfin, il sera essentiel d'avoir une compréhension
générale de Javascript. Si vous connaissez
Javascript, nous avons juste besoin d'une mise à jour. Ne vous inquiétez pas, je l'ai inclus dans les
prochaines leçons. Je laisserai tous les liens
vers les actifs et ressources dont vous aurez
besoin dans l'onglet projet et ressources ci-dessous.
3. Introduction JavaScript: Introduction au Javascript. Il existe deux endroits où le
Javascript peut être écrit dans des fichiers HTML ou dans son propre fichier
Javascript dédié. Si nous voulons écrire du
Javascript dans un fichier HTML, il suffit d'ajouter la balise script dans la
section d'en-tête du document. Cette balise de script est
réservée à tous les langages de script,
qui sont des langages avec lesquels vous
pouvez exécuter des commandes, et c'est dans ce langage que notre Javascript
pourrait théoriquement vivre Tout ce que vous écrivez entre
ces balises sera compilé et interprété
en tant que Javascript. Bien que cela convienne aux
très petites applications, cela peut devenir un peu
plus compliqué une fois que nous commençons à créer des sites Web de
plus en plus complexes. Dans ce cas, nous pouvons utiliser le second endroit où
Javascript peut être écrit dans son propre fichier et simplement utiliser la
balise script comme référence. Nous allons créer des applications de
fichier Javascript distinctes et connecter les deux. Et voilà, nous avons ajouté du
Javascript à notre projet. Découvrons les
tenants et les aboutissants du Javascript et des
langages de programmation en général.
4. JavaScript et autres langages de programmation: Javascript et autres langages
de programmation. Comme nous l'avons déjà mentionné, Javascript est un
langage de script qui
vous permet d' introduire de la logique et des fonctionnalités dans vos pages Web Mais comment fait-il cela ? Comme nous l'avons également mentionné, Javascript est un langage
de programmation. Il y a plusieurs
points communs à la plupart des
langages de programmation,
sinon à tous. Tout comme les autres types de langages
informatiques, les langages de
programmation sont
dans leur forme la plus simple, juste un moyen pour nous, les humains, de parler
à l'ordinateur. Javascript, en particulier, nous
permet, en tant que programmeurs, d'interagir avec le
navigateur Web via le Dom, ou le Document Object Model Le Dom est l'interface de
programmation pour les documents Web et agit comme une représentation de cette page afin qu'elle
puisse être utilisée, mise à jour et modifiée en
fonction des entrées et des interactions de l'utilisateur Javascript, en particulier, est le langage que nous utilisons
pour interagir avec le Dom, et 98 % de tous les sites Web utilisent Javascript côté
client. Les langages de programmation
ont également tous leur propre syntaxe unique. Tout comme dans d'autres langues
telles que l'anglais et le français, il existe une syntaxe qui définit et explique la manière dont mots s'assemblent pour former des phrases, des paragraphes,
etc. la même manière, les langages
de programmation ont
chacun leur propre
syntaxe pour déterminer ce qui constitue une ligne de code
complète. Par exemple,
les langages de
programmation ont tous leur
propre cas et leur propre objectif. Vous avez peut-être entendu parler
d'autres
langages de programmation tels que Python, Ruby, Java, etc. Selon le type d' applications qu'ils
cherchent à créer, l'un de ces
langages de programmation peut être mieux adapté
à cette tâche que d'autres, car l'objectif de ce
cours est d'apprendre à interagir avec le Web et à créer
des applications pour le Web. Le meilleur langage de programmation
que nous puissions apprendre est Javascript, ou dans ce cas, Typescript.
Plongeons-nous dans le vif du sujet.
5. Qu'est-ce que TypeScript ?: Qu'est-ce que le tapuscrit ? Typescript est simplement un
sur-ensemble de Javascript. Cela signifie qu'il possède
les mêmes capacités Javascript avec quelques fonctionnalités
supplémentaires qui profitent au développeur. L'une des principales fonctionnalités
de Typescript consiste à utiliser des types, qui garantissent que
la valeur vous accédez est
du type correct Mais revenons en arrière.
Quels sont les types ?
6. Types: Des types. Il existe
de nombreux types accessibles en dactylographie Commençons donc par parler des
problèmes les plus courants que vous êtes susceptible de rencontrer dans
votre travail quotidien. Certains de ces types courants que vous connaissez peut-être déjà Javascript, tels que les chaînes
de
caractères numériques et les booléens Une chaîne est une valeur qui peut être mise et lue entre
guillemets. Un nombre est une valeur
numérique normale telle que 1234, etc., et un booléen peut être l'
une des deux valeurs, Il existe également des tableaux qui,
comme dans Javascript, sont des listes ordonnées pouvant
contenir plusieurs types de données Cependant, le script de type a un type
spécial appelé any. Any est un type qui peut être utilisé lorsque vous
ne souhaitez pas vérifier une valeur particulière ou ne savez pas encore
quel type utiliser. Dans le second cas, vous
pouvez également utiliser Inconnu, mais n'importe lequel fera l'affaire pour le moment.
7. Erreurs: Erreurs que vous pourriez trouver. Lorsque vous commencerez à utiliser Typescript, vous commencerez à voir beaucoup
plus d'erreurs au Mais c'est une bonne
chose car cela vous
aidera à l'apprendre
beaucoup plus rapidement. Non seulement le script de type génère des erreurs pour les types incompatibles, mais il génère également des erreurs pour divers scénarios
que vous souhaitez éviter Comme lorsque vous appelez une fonction, mais que vous oubliez de
fournir tous les arguments requis
en Javascript, une telle erreur
sera considérée comme une erreur non corrigée qui
passe silencieusement Cependant, c'est quelque chose que
vous ne voulez pas car si les arguments supplémentaires cette fonction sont essentiels, votre fonction
ne fonctionnera probablement pas comme prévu. Mais c'est un script de type
théorique suffisant, plongeons-nous dans son écriture
.
8. Comment installer TypeScript: Très bien, donc pour
commencer avec le script de type, nous pouvons le faire de deux manières. Nous pouvons installer le compilateur
dactylographié et travailler uniquement sur un simple fichier
dactylographié, ou nous pouvons l'intégrer à
notre ensemble d'applications create, react Je vais suivre la voie de
l'échelle, mais je vais vous montrer comment l'
installer rapidement sur votre ordinateur
dans le monde entier si vous le souhaitez. Donc, si vous souhaitez installer un tapuscrit globalement,
c'est assez simple Il suffit d'
installer le compilateur. Typescript, comme vous l'avez mentionné, est un sur-ensemble de Javascript. Mais le navigateur ne lit pas
réellement le texte dactylographié, il ne lit que le Javascript La façon dont nous pouvons
utiliser Typescript sur le navigateur consiste à le recompiler
en
Javascript Vous vous souviendrez de ce processus de compilation d'un
langage à l'autre, à partir de CSS et de CSS Scss a été compilé en CSS. Il en va de même pour
Typescript et Javascript. Si vous souhaitez utiliser Typescript globalement
sur votre ordinateur, il vous
suffit de l'installer Installez le compilateur Typescript. Alors vous optez pour NPM I, et c'est pour le monde entier Ensuite, vous saisirez Typescript. Et puis une fois
que vous l'avez fait, vous aurez installé le compilateur dactylographié globalement et il devrait fonctionner
sur votre Après cela,
vous venez de
vérifier si vous l'avez
fait correctement. Tscv et moi l'avons déjà fait. La version 4.2
0.8 est
donc disponible. Ainsi, après avoir
installé Typescript dans le monde entier,
nous pouvons maintenant créer
un projet React avec après avoir
installé Typescript dans le monde entier, nous pouvons maintenant créer
un projet React
9. TypeScript et React: Ce que je vais faire,
c'est copier une ligne de code que j'ai ici
qui dit essentiellement que je vais
créer une application React et que nous allons l'appeler
Learn Type Script. Il va utiliser
ce
drapeau très spécial appelé ici template. Nous l'avons peut-être déjà vu
une ou deux fois. Le modèle, cette fois
plutôt que rouge, sera dactylographié Il nous donnera
donc
un modèle de script de type
afin que nous n'ayons pas à nous soucier comprendre comment
configurer correctement l'application à l'
aide Nous allons simplement l'exécuter et une fois que ce sera prêt, nous commencerons. Très bien, nous avons donc
notre
dossier de script de type appris prêt à être utilisé. Allons-y, lançons-le par
NPM et jetons un œil à ce que nous
avons sur le navigateur Comme vous pouvez le voir
ici, il s'agit à peu près de la même application, à
une différence près. Il disait modifier l'application source TSX au lieu de JSX pour enregistrer et
recharger. À peu près ça. C'est la seule
différence que nous avons ici avec notre script de type. Donc, ce que nous allons faire maintenant,
c'est accéder à notre dossier public. Nous disons que
tout est pareil. Allons dans notre dossier source et voyons ce qui se
passe ici. Comme vous pouvez le constater, nous avons plusieurs fichiers différents dans
ces deux dossiers. Dans notre
répertoire plus vaste, dans l'application et dans
notre dossier source. Jetons un œil à ce fichier
de configuration TS. Il s'agit donc d'un nouveau fichier que
nous n'avions pas la dernière fois. Ce fichier indique essentiellement au compilateur de script de type comment nous voulons qu'il
compile le code. Il existe donc
différentes versions de Javascript actuellement
disponibles sur le Web. Maintenant, lorsque nous compilons un script
de type en Javascript, nous voulons essentiellement le
compiler version
la plus ancienne qui soit
encore parfaitement utilisable Parce que nous voulons nous assurer
qu'il soit le plus compatible
possible avec le plus grand nombre de
machines possible. Si nous le compilons uniquement la dernière version
de Javascript, certaines machines plus anciennes
pourraient ne pas avoir accès à la plupart des fonctionnalités
qu'il implémente. Ensuite, nous rendrions nos
sites Web plus inaccessibles. Dans ce cas, nous l'avons donc
compilé en ES five, qui est une
version légèrement plus ancienne du script Java. Je pense que Ron a déjà sept
ou huit ans. Et puis il y a quelques autres options que
vous remarquerez. Tout cela se trouve également dans l'objet Jon
Json. Il dit que cela
vous permettra de mettre du Javascript car tous les fichiers Javascript
sont des fichiers dactylographiés valides Vous pouvez donc réellement
écrire du Javascript dans un projet dactylographié, cela n'a peut-être
pas beaucoup de sens, mais vous pouvez le faire si vous Et puis est-ce strict ? Il va donc imposer une vérification de type
stricte. Vous pouvez ou lorsque vous apprenez, vous
voudrez peut-être laisser cette option activée. Mais cela peut
créer ou non des règles difficiles
plus tard dans votre projet. Cela dépend de ce
qui fonctionne pour vous
, puis de quelques autres valeurs qu' ils nous ont
en quelque sorte automatiquement saisies. Comme nous travaillons avec un script de type. Nous
verrons de plus en plus quand et quand nous n'aurons pas besoin d'interagir
avec ces fichiers. Mais pour l'instant, nous allons le
laisser tel quel. Ensuite, nous
allons examiner notre fichier TSX et
notre fichier d'index TSX et voir
ce qu'ils contiennent Le fichier d'index TSS et le fichier TSX ont à
peu près le même aspect Rien de vraiment différent
là-bas. examinons notre fichier TSX, Pour être honnête, lorsque nous
examinons notre fichier TSX, c'est à
peu près la même
chose Et comme vous pouvez déjà le constater, Typescript et Javascript sont à
peu près la même chose Il n'y a pas grand-chose
de très différent, mais il y a quelques éléments clés qui feront la différence. Allons-y et créons une petite application
pour fonctionner avec eux. J'ai donc créé un composant appelé Counter, tout comme notre compteur précédent. Ce compteur peut
faire des choses comme compter vers le haut par un
ou vers le bas. le moment, il
ne fait rien, c'est juste un composant vide. Mais allons-y
et essayons de lui transmettre quelques accessoires afin d'y ajouter
des fonctionnalités Donc, ce que nous allons
faire dans notre application, c'est créer quelques
variables ici. Disons le titre et
nous donnerons le titre, une valeur de mon compteur. Cela pourrait donc être le
titre de notre comptoir. Nous allons dire le texte du bouton const et nous pourrions dire que cela
pourrait être plus un Nous allons donc simplement lui donner quelques variables de
base. Tout cela est juste pour montrer
comment fonctionne le script de type. Nous verrons que cela nous donne
un petit
soulignement jaune c'était le cas par le passé. Comme les variables ont été déclarées mais
qu'elles ne sont pas rouges, elles ne sont pas encore utilisées. Ne
vous inquiétez pas, nous y arriverons. Ce que nous allons faire maintenant, c'est les
transmettre pour contrer. Nous dirons que le titre est égal au
titre et au bouton. Égal au texte du bouton. Cool, nous recevons toujours
cette erreur parce que, mais maintenant c'est en fait
une erreur de type. Il indique donc que le
type de titre de chaîne et le type de chaîne de texte
du bouton ne sont pas assignables à l'attribut
intrinsèque du type Le titre de propriété n'existe pas
sur les attributs intrinsèques. Alors, qu'est-ce que
cela signifie ? Donc, en gros, tapuscrit permet cette
chose très spéciale appelée Et taper nous permet
de nous assurer que les valeurs que nous transmettons sont
d'un certain type, n'est-ce pas ? Vous savez, dans un titre où nous voulons que ce soit du texte,
nous voulons que ce soit une chaîne. Nous ne transmettons pas un
objet, par exemple, nous passons simplement une chaîne. Le script de type nous permet donc de
vérifier cela avant de passer
à la phase de
compilation
et de nous passer
à la phase de
compilation rendre compte que notre application est
simplement cassée sans raison Donc, si nous allons à notre comptoir, nous pouvons réellement introduire ces variables, comme
nous l'avons fait auparavant titre et le texte
du bouton,
et nous pouvons les enregistrer. Mais nous avons
quelques erreurs ici. Nous obtenons donc que tous les
éléments déstructurants ne sont pas utilisés. Le titre de l'élément de liaison est
implicitement de n'importe quel type. Très bien, nous avons
donc deux erreurs. Un message d'erreur s'affiche car
nous ne les avons pas encore utilisés. Bien. Mais nous recevons également la deuxième erreur que
nous n'avions jamais vue auparavant. Le titre de l'élément de liaison est
implicitement de n'importe quel type. Maintenant, les types et le
tapuscrit sont exactement comme les différents types de données dont
nous avons parlé précédemment Nous avons un objet
numérique booléen sous forme de chaîne, mais il y a ce truc dans le script
de type appelé an et ce n'est
pas vraiment un bon Tout le monde dit littéralement
que cela peut être de n'importe quel type et cela va à l'encontre de l'
objectif de l'utilisation d'un script de type Si jamais vous essayez de taper
quelque chose du type any, cela vous
donnera en fait une erreur. Il existe donc plusieurs
façons de contourner cette erreur. Très bien, la façon dont nous allons d'abord contourner
ces erreurs, allons-y et
implémentez-les dans notre projet. Mettons donc simplement un H
et nous lui donnerons un titre. Nous lui donnerons la propriété
quel qu'en soit le titre. Nous allons l'enregistrer, puis
nous allons créer un bouton. Nous lui donnerons la propriété
du texte du
bouton . Cool. Nous allons continuer et
enregistrer cela. Maintenant, nous nous sommes au moins débarrassés
de cette première erreur, mais nous avons toujours
l'erreur de type Eddy. Ce que nous devons faire
dans le script de type est en fait créer ce
qu'on appelle une interface. Une interface est essentiellement
un ensemble de règles qui indique au composant ce qu' doit faire avec les variables
qui ont été transmises, ce qu'il doit faire avec les propriétés qui lui ont été
transmises. La façon dont vous créez une
interface est de sortir de votre composant juste au-dessus, peut-être
là où vous
importeriez quelque chose juste
entre ces deux espaces. Allez-y,
vous dites interface, puis vous
lui donnez simplement un nom. En général, les gens l'appellent
simplement accessoires, mais vous pouvez l'appeler comme
vous voulez Vous pouvez l'appeler des accessoires de comptoir
ou des accessoires d'application pour être spécifique
à votre composant Mais vous pouvez l'appeler comme
bon vous semble car nous n'avons qu'un seul
composant qui prend des accessoires Nous l'appellerons simplement accessoires, mais
il faut que ce soit du capital. Quel que soit le nom que vous choisissez, assurez-vous que la première lettre
est une majuscule Interfaces et qu'il s'agit d'un objet. Nous allons donc simplement y créer
notre objet. Ce n'est pas pareil, il utilise
juste les bretelles bouclées. Ensuite, ce que nous voulons faire,
c'est que pour chaque accessoire envoyé pour contrer, nous voulons indiquer à l'interface
quel doit être ce type Si je tape le titre ici, je peux utiliser deux points pour
lui attribuer un type. Je vais donc dire que le titre est de
type chaîne et l'enregistrer. Et nous en avons fait une. Le suivant est le texte du bouton, qui est également de type chaîne. Et nous allons mettre une chaîne ici
, puis l'enregistrer et fonctionner correctement. Maintenant, nous avons
cette autre erreur ici et nous avons
toujours ces erreurs ici. C'est parce que ces deux-là ne
sont pas encore connectés. Ils existent dans le même fichier. Mais il faut dire
au composant, au d'utiliser réellement ces accessoires. La façon dont vous procédez avec SX est de simplement
mettre deux points ici, juste à côté de ces
crochets ondulés, et de taper le nom de
votre interface Donc, dans notre cas, accessoires et économisez. Et une fois que vous aurez fait cela, vous verrez que toutes nos erreurs
ont disparu. Et maintenant, nous avons
initialisé nos valeurs avec une
sorte de type Maintenant, si c'était le cas, et si vous consultez votre page, nous aurons mon compteur
avec un numéro, n'est-ce pas ? C'est assez simple. Il existe également
différents types disponibles. Supposons que vous vouliez
transmettre une fonction, n'est-ce pas ? Supposons que nous créions une fonction
onclick on click equals M console point
log cliqué, Vous voulez donc simplement créer une fonction
onclick très simple Et on passe ça
en plus d'un accessoire. Comme d'habitude, nous remarquerons qu'il devient jaune car
il s'agit d'une fonction. Et nous devons l'ajouter à
nos accessoires ici en un clic. Ajoutons-le en un
clic sur notre bouton. Dis ça. Mais le
problème, c'est qu'il n'est pas jaune ici parce qu'il ne sait pas de quel
type il s'agit, n'est-ce pas ? Parce que nous ne l'avons pas mis
sur nos accessoires actuels ici. Alors allons-y et mettons-le
réellement sur nos accessoires. Nous allons donc dire « au clic ». Mais la différence
ici, c'est que c'est une fonction. Et si vous vous souvenez de
votre Javascript, une fonction n'est pas comme un
type dans un script Java, n'est-ce pas ? C'est comme une
chose que nous utilisons, non ? Je veux dire, je suppose que les fonctions sont des objets, mais comme
vous ne
le voudriez pas, elles appartiennent simplement à
une classe différente, elles sont d'un type différent. Ainsi, dans les scripts de type, ils ont en fait quelque chose
pour les fonctions dans lequel vous pouvez dire s'ils renvoient quelque chose ou
non. Donc, la syntaxe pour cela n'est en fait que vos parenthèses
habituelles Ensuite, vous devez taper
la flèche, puis vous tapez void si elle
ne renvoie rien. S'il renvoie quelque chose, vous pourriez peut-être dire chaîne
ou quoi que ce soit d'autre. Et s'il faut des arguments, vous pouvez les transmettre ici, comme s'il fallait un art de type
string si c'était vrai. Cela n'est pas vrai pour
notre fonction ici. Mais dans la plupart des cas, la
plupart des fonctions
ne
transmettront que
notre simple argument, moins les fonctions qui
deviennent nulles et
la raison pour laquelle elles deviennent
nulles est qu'elles ne renvoient
rien, n'est-ce pas ? Si une fonction renvoie quelque chose, ce sont des données
significatives à stocker dans une variable
ou autre chose. Mais dans la plupart des
cas, lorsque vous
transmettez une fonction, elle
déclenche simplement quelque chose dans l'autre application. Ainsi, si nous avions, par exemple, pris un bouton et créé notre propre
composant de bouton, comme nous le faisions
auparavant avec l'annonce dans
le bouton de soustraction, nous pourrions simplement passer le
clic comme un vide et laisser toute la logique dans
la fonction de compteur. C'est
une option que nous pourrions avoir. Maintenant que nous avons mis les parenthèses vides
comme une fonction de flèche, vous savez, entre parenthèses, elle ne
retournera Nous l'avons ajouté ici à nos accessoires et nous l'avons ajouté
à notre fonction Lorsque nous cliquons sur plus un, nous le remarquerons dans notre version actuelle, et laissez-moi clarifier cela Si nous allons vérifier
notre console ici, nous remarquerons qu'il est écrit « cliquez ». Et chaque fois que nous cliquons
dessus, il en ajoute simplement un à la pile afin que nous sachions qu' il fonctionne correctement.
Tapez un script. Il faut un
peu de temps pour s'y habituer, mais une fois qu'on s'y est habitué, il est beaucoup plus facile de travailler avec. Personnellement, je trouve que
l'une des choses les plus difficiles
à gérer lorsque vous
travaillez avec un script de saisie est lorsque vous avez des objets plus grands, n'est-ce pas ? Alors disons que nous avions un objet ou peut-être que nous avons à nouveau un objet
appelé maison, n'est-ce pas ? Et c'est un objet, c'est un objet qui a pour
valeur le nom de ma maison. Et puis peut-être qu'il y a
des chambres, ce qui est un chiffre. Et puis peut-être qu'il
a des appareils, est-à-dire une gamme de « Oui »,
et qu'il a des appareils électroménagers. Mettons donc cela au même niveau et disons que nous passons à notre service de
comptoir. Nous devrions probablement
renommer ce composant, mais disons que nous passons la maison
à notre comptoir Nous pouvons gérer cela de plusieurs manières. Si nous importons House, enregistrons-le simplement sur console pour le moment. Pour nous débarrasser de cette première erreur, nous voulons l'ajouter à nos accessoires. Nous allons donc ajouter de la maison à nos accessoires. Mais quel type lui
donnons-nous, non ? On pourrait le donner, je suppose,
au type d'objet, mais en théorie, comme quand
on y pense, tout en Javascript
est un objet. Donc, lui donner le type d'objet n'est
peut-être pas la meilleure idée. Je veux dire, ça marche.
Mais ce n'est peut-être pas le meilleur moyen de vérifier s'il
fonctionne correctement, n'est-ce pas ? Je veux dire, nous l'avons enregistré
sur console. C'est bon, ça marche. Mais dans
un monde idéal, nous aurions en fait un peu plus spécifique,
une saisie un peu plus stricte
afin de savoir si nous avons obtenu ou non la bonne forme de notre objet. Vous savez,
une maison avec son nom ses appareils et ses chambres. Vous savez, nous
voulons nous assurer
que c'est vraiment
le bon objet. Donc, une façon de le faire
est de démarrer dans l'application, vous pouvez créer un type pour la maison, donc nous dirons interface et vous pouvez également avoir
plusieurs interfaces. Vous n'avez pas besoin d'
en avoir un, mais vous pouvez dire Interface House. Ensuite, vous pouvez essentiellement utiliser la forme de cette
maison pour créer ce type. Vous pouvez dire que le nom sera une chaîne, que
les pièces seront un numéro, que
les appareils
seront un ensemble de chaînes. La façon dont vous l'écririez est
de taper une chaîne, puis placer le
symbole matriciel à côté. Cela nous indique qu'il s'
agit en fait d'un tableau de ces chaînes. S'il s'agissait d'un tableau de
nombres,
vous pourriez, vous pourriez simplement
taper tableau et nombre, mais dans notre cas, ce seront des chaînes de
caractères. Alors, ce que vous
allez vouloir faire, c'est
vous
assurer d'exporter cette interface d'
exportation directement, puis de l'importer
dans le compteur. Souvenez-vous donc que j'ai
dit que vous pouvez nommer les interfaces,
comme vous le savez. Assurez-vous simplement que cela correspond à ce que c'est. Et vous pouvez également taper maison. Vous pouvez mettre vos deux points ici, puis donner à
house le type de maison afin que le compilateur
sache des deux côtés, par exemple
, si cette maison
correspond à cette maison. Ils sont tous les deux du même type. Donc, si nous allons à notre comptoir, nous pouvons aller en
haut de notre fichier où
toutes nos déclarations d'importation devraient figurer et où nous
devrions les héberger à partir de l'application Dot Slash Ensuite, nous irons à
notre objet domestique ici. Ensuite, il suffit de laisser
passer le type de maison. Et maintenant, cela ne
change rien dans notre application, mais nous savons maintenant que la saisie est
plus précise, n'est-ce pas ? Nous savons maintenant que ces deux choses correspondent à coup sûr, sachez que la maison est de type maison et que
l'autre est également de
type maison. Donc, si nous avions vraiment le mauvais type d'
interface, disons que j'ai créé une autre
interface ici et que je l'ai appelée maison, que j'avais un nom et c'était juste un numéro
et c'est tout. Et j'ai essayé de transmettre
cela à ce type de foyer. Cela devrait signaler une erreur. Et vous verrez que dans nos abdos
, c'est déjà devenu rouge. Vous verrez donc ici que cela nous
indiquera que le type house n'
est pas assignable au type home car les propriétés
du nom sont incompatibles Chaîne que vous ne pouvez pas
attribuer à un numéro de type. C'est là que le script de type
montre sa véritable force. Nous pouvons avoir deux
types très similaires, comme la maison et la maison. Qu'ils sont presque
identiques et qu' ils ont tous les deux la propriété
name. Cependant, la propriété name elle-même n'est pas du même type. Je sais que cela peut être un peu délicat et un
peu confus, mais au fur et à mesure que vous travaillerez
un peu plus sur le tapuscrit,
il deviendra beaucoup plus clair sens
et ce qui ne Mais pour l'instant, vous pouvez voir
que, en gros, tant que vous tapez les
choses de la même manière, Typescript fera
les vérifications pour vous
et s'assurera que vous ne
commettez aucune erreur imprudente Personnellement, je trouve le
tapuscrit vraiment essentiel. Je préfère écrire avec ce logiciel
lorsque je crée des applications. Tout simplement parce qu'il
fait tout cela. Je vérifie mes petites
erreurs stupides avant de passer à la
phase de production proprement dite, puis je n'
arrive pas à comprendre ce qui ne
va pas avec l'application n'était donc qu'une
introduction rapide à la dactylographie, et nous y
travaillerons un peu plus tard Si vous avez des
questions sur ce que vous pouvez ou
ne pouvez pas faire avec le tapuscrit,
je vous laisserai un lien vers
le site Web qui contient
la documentation dactylographiée
afin que vous puissiez accéder à
toutes les informations dont
vous pourriez avoir besoin ou rechercher toutes
les informations dont vous pourriez avoir
besoin si vous ne savez pas comment écrire
quelque chose je vous laisserai un lien vers
le site Web qui contient la documentation dactylographiée
afin que vous puissiez accéder à toutes les informations dont
vous pourriez avoir besoin ou rechercher toutes
les informations dont vous pourriez avoir
besoin si vous ne savez pas comment écrire
quelque
10. TypeScript et Next.js (styles): Très bien, alors
allons-y et
commençons à développer notre application
de script de type. Si vous jetez un coup d'œil
au dossier de conception ici, c'est
ce que nous allons
développer. Il s'agit d'une simple application de
calcul de pourboires
qui implique différents types implique différents types
avec lesquels nous pouvons travailler, vérifier que notre projet fonctionne correctement
et apprendre les types de script. Alors plongeons-nous dans le vif du sujet. Tout d'abord,
je vais commencer par mon dépôt ici. Maintenant, j'ai déjà utilisé
cette application de démarrage ici. C'est sur mon Github,
ça s'appelle l'application Muck. Cela permet de combiner quelques éléments rapides pour
être opérationnel plus rapidement en utilisant le matériau Y
next S, et de taper un script. La plupart d'entre eux sont
simplement liés au style et au
lancement d'une application rapide. Alors n'hésitez pas à l'
utiliser si vous le souhaitez. Mais ce n'est pas le cas,
vous pouvez simplement démarrer une application normale à l'aide de
React et de type script. Nous avons donc trois ou
quatre sections ici. Nous avons le montant de la facture,
le pourcentage du pourboire, le nombre de personnes,
puis le
montant du pourboire par personne. Il s'agit de la
pièce calculée et de la pièce réinitialisée. OK, c'est assez simple. Ce que je vais faire, je suppose qu'avec cette application vous voudrez pouvoir
saisir le montant de la facture. Vous voudrez donc utiliser une
sorte de saisie. Ensuite, une fois que
vous l'avez saisi, vous voudriez ajouter, mettre le montant du pourboire
à ce nombre,
puis ajouter le nombre de personnes, comme si tout
le côté gauche vos entrées et le côté
droit était votre sortie, résultat
essentiellement
de tout cela. Pour
ce faire, je pense que je vais créer une
entrée de pointe et une sortie de pointe. Je vais peut-être créer
un nouveau fichier pour indiquer,
disons, la facture ou la saisie des coûts. Et je vais le mettre ici et ensuite nous
dirons dirons A encore une fois. Tu peux les nommer
comme tu veux. C'est juste la première chose qui m'
est venue à l'esprit. Sortie. C'est bon, génial. Vous
avez donc l'entrée et la sortie. Maintenant, pensez à l'état initial de votre
application, surtout lorsque
vous travaillez avec script de type
réacteur ou toute autre
technologie de ce vous surtout lorsque
vous travaillez avec un script de type
réacteur ou toute autre
technologie de ce type. Est-ce dans chaque composant, et avons-nous alors un gestionnaire d'État mondial
plus important ? Est-ce qu'il vit dans un composant
supérieur ? Comment circulent
vos données ? Essentiellement, pour cela, je pense que c'est une application assez
simple, donc je ne voudrais pas
utiliser une situation plus complexe, je pense à une situation de données
rouges. Je pense que ce que je veux faire, c'est essayer de le maintenir
au sein de l'État local. Mettez-le peut-être sur un support en Z, mais voyons ce que nous pouvons faire sans trop
le bousculer. Très bien, tout d'abord, finissons de construire ça. Nous voulons que le pourboire, le pourcentage et le nombre de
personnes soient inclus dans notre calcul des coûts. Nous allons ajouter
quelques éléments différents dans notre boîte. Nous allons dire que c'
est un peu de la typographie pour indiquer loi S. pourcentage du projet de
loi S.
T. Oh, génial. OK, cool. Ensuite, nous allons avoir une
sorte de saisie de texte. Oh, donnez-moi simplement la
même erreur ici, car je dois
faire une saisie directe. Importations directes, je
dirais pas d'intrants. Très bien, importons la boîte
et importons la timpographie. C'est bon, génial. Maintenant, ma saisie comporte un
composant de champ de texte, c'est ce que c'est. Nous allons donc juste
emprunter ceci. Nous allons
emprunter l'élément de champ
de texte de base du plan élément de champ
de texte de base du pour notre facture et pour
notre nombre de personnes. Je vais juste y aller et
l'importer ici. Cool, génial. ce cas, cela ressemblera davantage à une sélection basée sur un bouton
avec une entrée à la fin. C'est un peu plus
complexe en ce sens.
Ce que je vais
faire, c'est les emballer dans des boîtes juste pour ne pas
confondre lequel est lequel. Très bien, c'
est pour le projet de loi. Cette case
sera le pourcentage de pourboire. Je vais en ajouter d'autres dans cette boîte. Ajoutez les boutons, puis cette case indiquera
le nombre de personnes. Génial Juste pour vraiment structurer les choses un
peu plus clairement parce que je pense que cela
va devenir un
peu difficile à manier. C'est bon, cool. Nous avons donc maintenant le problème
avec ces entrées, n'est-ce pas ? exemple, nous pourrions faire en
sorte que la valeur, quelle que soit la saisie par
l'utilisateur, soit la valeur. Et je devrais aussi
changer la couleur ici pour que nous puissions réellement voir la couleur. OK, cool. Donc oui, je pourrais simplement le
régler de telle sorte que, lorsque je saisis le
montant dans l'entrée de coût, il soit simplement inclus dans
cette composante. Mais parce que nous devons accéder au montant 142 pour pouvoir obtenir le montant
total du pourboire par personne. ce qui est de la façon dont je
pense à l'État, je pense que je veux
augmenter l'État, ou le relever
et le faire dans le calculateur de pourboires lui-même. Alors à quoi
ça ressemble ? Eh bien, pour moi, cela ressemble à
la création de quelques éléments, quelques éléments d'état. Nous finirions par créer
un prix total à zéro, puis par le
répercuter sur nos applications. Nous le ferons dans une seconde. Finissons-en
avec le style. Nous allons donc donner
cette couleur de fond. Couleurs de fond, d'accord ? Et comme je l'ai dit, n'hésitez pas à utiliser le style que vous souhaitez. Ça, ça dépend entièrement de toi. J'utilise juste Maly, non ? Parce que c'est un
peu plus rapide pour moi. D'accord. Et puis, oh, tu sais, c'est
l'autre problème, je dois en faire une boîte flexible. D'accord ? Génial OK,
alors maintenant, dans ces limites, allons-y et finissons allons-y et finissons
. Quelle est la largeur de ce 379 ? Quelle est la largeur de ce 379 ? Je n'ajoute rien à cela. Le
plus bas aussi. Ces deux-là vont en quelque sorte
avoir des styles identiques. Je me demande si quelqu'un a peut-être fait un commentaire à ce sujet. Allons-y. Je me demandais pourquoi
cela ne prenait pas effet sur le style global. Il y a comme une
réinitialisation globale que j'ai introduite ici, ce qui est utile mais cela
annulait ma marge et
Paddy, je l'ai supprimée Très bien, alors allons-y. Très bien, il y a donc
une étiquette ici et elle
va dire « gens », puis celle-ci, ça va être, l'étiquette de facture portera juste 1$, signez ces deux identifiants parce qu'ils ne nous sont pas
utiles pour le moment. Vous pouvez les modifier quand ils seront utiles, puis
je vais également définir la
couleur comme cette couleur
pour les deux, afin que nous puissions voir le texte à l'intérieur. Je vais réparer le gobelet dans une seconde. Notre prochain article ici considérez cela. OK, ajoutons donc ces
cinq boutons et une entrée. L'une de ces entrées sera l'une de ces
entrées sans la largeur. Alors je vais
faire quelque chose rapidement. Je vais dire
pourboire par pourcentages, et je vais le
définir comme un tableau de chiffres. Je vais dire 5 %, je suppose. 5 %, 10 %, 50 %, 20 % et 25 %. Est-ce que c'est 25 % Oh non, désolée. 50 % 25 % et 50 % 25 % et 50 % Très bien. Cool. Ce sont donc les pourcentages
de pourboires Maintenant, en bas, je vais juste les
cartographier. Je vais dire
pourcentages de pourboires Cartographiez chaque pourcentage. Je veux ensuite retourner un bouton avec le
pourcentage comme bouton et il pourrait également être indiqué ici. Laisse-moi m'en
débarrasser. Je ne peux pas dire que je devrais le retourner, mais Altos Key, la
clé vendue, est le pourcentage, parce que ceux-ci
seront uniques C'est bon, cool. Maintenant, nous
avons nos boutons. Génial Changeons la couleur de
fond pour qu'elle soit aussi cool. Ensuite, nous allons définir
la largeur de chacun à 117, je crois. 48. Parfait Génial Alors, vous savez quoi, j'
ai une colonne flexible. Je veux que ce soit une colonne flexible, mais je pense que je veux les
emballer dans la boîte. J'emballe les boutons dans
le champ de texte d'une boîte. Allons-y. Et puis
je vais dire que Display Flex Wrap
va être, puis je vais dire largeur. Disons. Le 353 ? Oui, trois d'affilée. Supposons donc que la largeur soit de 450. Génial Je vais simplement copier ces
styles dans cette interface
de texte , les enregistrer et peut-être
ajouter un peu de marge. Nous avons l'air plutôt
bons dans ce domaine ici. Génial Cela me semble
plutôt bon. Je pense que je suis plutôt
content de cela en termes de style général. Ce que je vais faire
maintenant avec ces boîtes, ajouter une
marge en haut et
en bas pour chacune d'entre elles, comme des
boîtes extérieures, nous avons un bon espacement Je pourrais aussi me contenter d'une boîte flexible, ce qui serait
probablement mieux. Faisons de cette
boîte extérieure une boîte flexible. Je dirais l'espace. Maintenant, l'espace est uniforme
de haut en bas. C'est bon, cool. Ça a l'
air plutôt bien. Voyons voir maintenant, que
devons-nous faire d'autre ? Ah oui, il faut
passer de l'autre côté. Réfléchissons un
peu à la facture. Bill Output, nous avons
cette boîte vert foncé. Commençons par cela.
Reprenons encore une fois cette couleur. Disons tout à l'heure. Ensuite, nous lui donnerons
une largeur, 413 x 41714. Juste 413 par 413, mais ça n'a pas vraiment d'importance. 417, Disons que j' ai besoin de l'ajouter au calculateur
de pourboires. Il n'est pas ici. C'est pour monter ici. Marge zéro O pour le calculateur de
pourboires lui-même, je dois aligner les éléments au centre, d'accord ? Parfait Cool, cool,
cool. Ça a l'air bien. Très bien, donc la prochaine
chose que je veux faire maintenant, ajouter
les pièces que nous voulons, les vider, faire le total
et un bouton de réinitialisation. Créons quelques éléments
de typographie. Nous dirons qu'il suffit de corriger cette
erreur en haut ici. Je vais dire le
montant du pourboire par personne, puis ce sera un montant. Nous allons régler
ce problème en 2 secondes. Je peux l'emballer dans une boîte. Ensuite, nous allons
recommencer, mais nous allons
dire le total par personne. Ensuite, en bas,
nous allons avoir un bouton qui indique les réinitialisations. Même bouton. OK, bouton de réinitialisation, nous y arriverons. C'est arrivé. D'accord ? OK, génial. Appliquez donc également ce produit dans
la case suivante. Cool. Parfait Ensuite, nous allons les
emballer dans une boîte. Et la raison en est que
ces deux éléments sont dans une boîte, c'est que lorsque je dis qu'ils justifient l'espace
entre les boutons en bas et les
montants des prix en haut. Génial Per cool. Allons-y. C'est assez basique. Je vais juste retoucher
quelques styles supplémentaires
, puis nous
travaillerons avec notre script ty. D'accord, tu sais, je
pense que je dois cibler. J'essaie juste de cibler la couleur pour qu'on puisse la voir. Je pense que je dois cibler. Permettez-moi de saisir la base. Je peux tirer, oui. C'est bon, parfait.
C'est ce que je veux faire. Très bien, donc je vais juste prendre
, enlever cette couleur. Enlève cette couleur, peux enlever cette couleur,
tu ne fais rien. Et il suffit de prendre ce graphique. C'est bon, cool. Il suffit donc de taper des choses ici, nous
pouvons maintenant les voir. Tout autre petit ajustement. Ce côté est plutôt beau. Maintenant, je pense que c'est le bon côté, peut-être que nous pourrions simplement
changer cette couleur, la pointe de la couleur blanc et lui donner un
peu plus d'espacement Ensuite, nous devrions être prêts
à passer à notre
espace de script de type espace entre les deux.
11. TypeScript et Next.js (types): Bien, maintenant que tout cela est intégré,
intégrons la
fonctionnalité de script de type, intégrons la
fonctionnalité de script de le but de cette leçon,
et
voyons
en quoi cela est un
peu différent de l' utilisation
de
Javascript ou de JSX classiques Notre style
est à peu près terminé. Mais il y a une chose à observer et à remarquer
dont j'ai déjà parlé avec l'État. Nous voulons réfléchir à
la situation de l'État dans cette application, car nous avons trois ou quatre éléments différents. Ici, nous avons la section de saisie, où l'utilisateur peut sélectionner le pourboire et indiquer le nombre de personnes ou
le montant total de la facture. Ensuite, nous avons le résultat,
qui nous donnera montant
du pourboire et le coût
total par personne, montant du
pourboire par personne,
le coût par personne. Ensuite, nous avons un bouton de
réinitialisation ici. Maintenant, pour que tout
cela fonctionne, l'État doit être quelque peu, pas nécessairement
tout à fait
mondialisé, mais disponible à un niveau supérieur pour être transmis entre
ces deux composantes Je vais essayer de le
faire en utilisant simplement un état de réaction normal. Si cela ne semble pas
être une solution appropriée,
nous passerons à quelque
chose comme un stand. Ce que j'essaie de faire, c'est d'éviter d' utiliser Reduct parce que cela
implique
tellement de passe-partout et que ce sont des applications assez simples Voyons si nous pouvons le faire
en utilisant simplement quelques solutions simples. Dans mon esprit, je dois
adopter le montant total de
la facture, le pourcentage de pourboires
et le nombre de
personnes de
gauche à droite. Je pense qu'il doit figurer dans la partie supérieure
du calculateur de
pourboires ici. Allons-y et
faisons en sorte que cela se produise dans le calculateur de pourboires ici. Ce que je vais faire,
c'est commencer par définir quelques variables. Je vais dire,
disons la facture totale. Je vais dire que la facture
totale est égale à l'état, qui sera importé depuis React. Nous allons l'
initialiser à zéro. Maintenant, une chose avec
le script de saisie ici, nous pouvons réellement ajouter un type et spécifier qu'il
doit s'agir d'un type numérique. Maintenant que vous avez
également mis zéro,
cela en déduit qu'il doit s'
agir d'un type numérique Nous recevons une erreur ici parce que nous n'avons pas utilisé le client ici, car il ne s'agit
que de la prochaine erreur GS. n'a rien à voir avec
le script de saisie, mais nous pouvons spécifier le type dont
cette facture a besoin pour
être de type numérique. Le montant doit
être un chiffre pour que nous
puissions réellement faire des calculs. C'est l'un des points à partir desquels nous commençons
à utiliser le tapuscrit Et vous verrez comment cela se
répercute sur notre facture Faisons la même
chose pour
définissons le pourcentage de pourboire,
le pourcentage . Ce sera
également un chiffre. Oui, ce sera
un chiffre,
puis un certain nombre de personnes.
Nous allons en faire une de plus. Je vais dire un nombre de personnes, un nombre fixe de personnes. Et encore une fois, vous l'indiquez et le numérotez pour l'initialiser à zéro, pour que nous
commencions par un simple dérapage Bien, maintenant que nous avons
initialisé ces variables, utilisons-les dans notre application pour ma saisie des coûts Je veux maintenant adopter
ces paramètres de facture totale et définir la facture, pourcentage
total, le
pourcentage total de personnes, nombre de personnes par rapport
au coût d'entrée. Parce que cela va
avoir des implications en termes de ce qui se passera. En fait, nous pouvons le faire de
deux manières. Nous pourrions transmettre
les deux ou définir les
fonctions dans la calculatrice. Permettez-moi de commencer par simplement transmettre la variable initiale.
Disons la facture totale. Facture totale, pourboire par pourcentage, pourcentage égal au
pourboire par pourcentage et nombre de personnes
égal au nombre de personnes. Vous voyez, je
reçois déjà une erreur ici parce que le
script de type nous indique que nous n'avons pas réellement la propriété sur le
composant lui-même. C'est donc l'un des
avantages du script de type. Vous ne pouvez pas simplement
transmettre des choses au hasard et vous attendre à ce que cela fonctionne. Vous devez réellement
utiliser un script de type. Vous devez préciser, je dois dire, quels
types vous attendez. S'il m'arrive de
saisir les frais ici et que j'importe le montant total de la facture, je prendrai en compte le pourcentage du pourboire et
le nombre de personnes. Encore une fois, s'il s'agit d'une application React
normale, vous pouvez simplement
les intégrer comme ça. Mais comme il ne s'agit pas d'une réaction normale, il ne s'agit pas simplement d'une application Javascript, devrais-je dire, React. Vous verrez qu'il s'agit en fait
d'une erreur ici. Nous dirons que l'élément liant
le nombre de personnes, par
exemple, est implicitement de
n'importe quel type Et comme vous vous en souvenez plus tôt,
nous en
avons parlé de n'importe quel type, nous
ne voulons pas nécessairement avoir un type générique. Ce que nous voulons faire,
c'est aller de l'avant et taper
spécifiquement
ces variables. Laissez-moi vous montrer comment
nous allons procéder. ce faire, nous allons
créer ce que l'
on appelle une interface. Une interface est essentiellement
un moyen de taper un script, pour nous de le dire à un script de type. Hé, je m'attends
à ce que
ces variables entrent dans ces propriétés et je veux qu'elles soient d' certain type et ce sont
les types auxquels je m'attends. Si ce n'est pas le cas,
veuillez signaler une erreur. Je vais
le créer, je vais l' appeler accessoires. Tu peux
l'appeler comme tu veux. Et je vais décrire
ces différentes propriétés. Je vais dire la facture totale. Ce sera un
chiffre. Je vais dire
le pourcentage de pourboires. Ce sera un chiffre en
tant que nombre de personnes. Ce sera le cas, alors je
vais dire à type script que vous
pouvez utiliser cette carte, cette interface pour obtenir
le type de cultures. Et vous verrez ici que je
n'y suis plus, les choses fonctionnent jusqu'à présent. La dernière chose que nous devons
faire maintenant est de le
connecter aux
emplacements réels de notre application. En ce qui concerne la propriété Textfield, je pense qu'il existe une
valeur que nous pouvons utiliser Je crois que c'est ce qu'on appelle
la valeur. Laissez-moi vérifier. Passons à l'API. Je suis presque sûr que c'est
comme une entrée normale, mais je veux m'assurer que nous n'ayons pas d'erreurs erronées Très bien, oui, je pense que
nous avons juste mis de la valeur. Essayons ce projet de loi. Nous allons dire que la valeur
est égale à la facture totale. Nous dirons que c'est ici que vous devez vérifier. Génial Nous
obtenons donc 0$, c'est parfait. Nous allons juste le faire pour
les trois pourcentages de pourboire. Le pourcentage va être
un peu différent, mais pour le dernier champ de texte, nous allons dire que la valeur
est égale au nombre de. Là, nous avons un nombre
de personnes fixé à zéro. Parfait. Nous sommes prêts à partir. En ce sens, la prochaine chose que
je veux faire est de créer
un ensemble, non ? Lorsque la valeur de
ces entrées change, nous voulons déclencher
une fonction. Allons-y et nous allons
écrire cette fonction. Et nous pouvons réellement
écrire cette fonction dans calculateur de
pourboires ou nous
pouvons l'écrire dans cost. Peu importe, cela
dépend juste de ce qui est pour nous. Si je vais de l'avant et que je l'
écris dans la saisie des coûts, je peux dire que je dois
transmettre le set. Je veux réussir le
setter. Voulez-vous vous
transmettre une fonction aléatoire ? Nous allons passer le test parce que
je pense que je vais être plus propre. D'accord, et puis elle nous donne une série d'erreurs
similaires Oui, nous allons juste
les déposer ici, puis je
les déposerai ici. Alors la différence ici, c'est que
nous allons vraiment réussir, ce sera
entre parenthèses égales à vide Et c'est ainsi que vous dites à
Typescript que c'est une fonction que nous sommes en train de suivre. Essentiellement, si la fonction prenait quelque chose
comme si elle prenait un R, c'était tout le
numéro de type par exemple, alors nous pourrions également le spécifier
. C'est très bien de
le laisser vide pour le moment. Mais nous pourrions certainement
spécifier le type si nécessaire. Et vous voyez, nous avons
déjà une erreur ici. En fait, il ne peut pas
définir son type void, nous devons le définir sur ce type. C'est vraiment bien. Il nous donne le type exact qu'
il veut que nous utilisions. S'il s'agissait d'une fonction normale,
nous pourrions utiliser le type void. Mais comme il s'agit d'actions étatiques
définies, nous devons utiliser les types très spécifiques qu'
elles nous proposent. C'est bon, nous
importons simplement ces types et
nous devrions être prêts à partir. Génial, c'est une bonne chose
à propos de la dactylographie. Il vous indiquera
quels types sont importés. Bien, maintenant nous voulons dire, pour notre champ de texte, nous
voulons dire « en cas de modification », « En cas de modification », nous voulons définir la facture
totale comme étant la valeur. Permettez-moi de créer
une fonction ici indiquant facture de mise à jour
constante que
nous allons transmettre, ce qui sera l'événement. Je dis que set bill sera Targetvalue C'est ce que
nous allons être en mesure de
saisir ou de réellement faire. En fait, nous n'avons pas besoin de
faire tout cela. Désolée. Nous pouvons simplement nous asseoir
sur la facture de modification, nous allons simplement transmettre la valeur de Sarge Et il devrait être capable
de simplement les attraper. Il devrait être capable de simplement
récupérer la valeur de E, ce qui est comme l'
événement en cours, il écoute le type d'
argument ou de contrainte, non assignable au type de
paramètre des nombres. Dites-moi que la
valeur que je vais récupérer est en fait une chaîne,
pas un nombre. Mais ce que je peux faire
,
c'est simplement le transformer en chiffre. Dites-lui que ce sera un numéro qui corrigera ce
type d'erreur. Parfois un peu embêtant. Vous devez modifier beaucoup
de petites choses afin de vous
assurer de
ne pas avoir d'erreurs de frappe. Mais je pense que
ça vaut le
coup parce que ça marche au final, tapez 57, puis le chiffre dans
l'État, je veux dire, nous ne pouvons pas le voir ici,
mais le chiffre dans l'État serait
57, ce qui est génial. C'est donc bon de partir. Très bien, nous
avons donc cette configuration. Faisons de même pour ici. Au lieu de la facture totale,
nous allons dire
définir un nombre fixe de personnes pour la
même chose, la valeur cible. Lorsque cette valeur change, nous
changeons le nombre de personnes. Je me demande si vous passez à la valeur
par défaut si cela
fait une différence. Très bien, nous allons juste en
faire un jeu de valeur pour le moment. Très bien, nous
avons donc ces deux ensembles. Le dernier point que je veux aborder est le pourcentage dont nous avons besoin pour le
gérer de deux manières. En gros, lorsqu'
un utilisateur change, il
tape quelque chose dans le champ de texte
personnalisé ici. Et je vais vraiment le donner
. Est-ce qu'il a une étiquette ? Je pense qu'il a besoin d'une valeur ou une valeur par défaut est égale à la
personnalisation par pourcentage. Maintenant, un pourcentage de bits, 1 000 % Oui Lorsqu'un utilisateur tape
ici ou clique sur un bouton ici, nous devons nous assurer que le pourcentage est
mis à jour en conséquence. Ce que je veux faire, c'est
dire soit en cliquant, eh bien, cela n'a pas vraiment d'importance, c'est vrai, nous listons pour les deux. Mais l'un d'eux est cliqué, la valeur change lorsque quelque chose est ajouté à ce
nombre qui change, la dernière
éventualité
est celle qui change Au clic, je vais
créer une fonction au clic. Nous allons dire qu'au
clic, nous allons
dire que les ensembles dont le pourcentage est un pourcentage sont
des pourcentages. Et
cela nous donne la même erreur, mais cette fois, il est correct de nous
donner la même erreur parce que nous avons dit que c'était une chaîne. Ce que je
vais faire en fait, c'est les
transformer en objets. Je vais dire pourcentage, puis le montant de
multiplication réel que nous
utiliserions est de 0,05. Et c'est ainsi
que nous allons
résoudre ce problème Nous avons notre chaîne,
puis nous
avons également notre numéro réel
que nous pouvons utiliser. Cela devrait être une solution assez
simple. je vais dire.
Et maintenant, la clé doit être le pourcentage. Ah, Ash. En fait, ce n'était pas la bonne façon de faire
ce titre en pourcentage. Ce pourcentage, c'est ce que j'
aurais dû faire. C'est bon. Désolée. Laisse-moi
régler ça très rapidement. C'est bon. Génial Supposons donc que le titre en pourcentage soit la clé, valeur en pourcentage soit le
montant et que le titre en pourcentage
soit ce qui apparaît dans le fond. Cela a
résolu ce problème. Maintenant, nous avons réglé
toutes ces choses. Le dernier élément à définir
est le fichier texte. Nous allons simplement emprunter la fonctionnalité de
modification ici, la base de
pourcentage, tout ce que nous
obtenons de la valeur cible. Oui, nous devrions être
bons dans ce sens. Je vais revenir au
calculateur Tip et nous pouvons tester, pour voir si cela fonctionne, nous pouvons dire journal des points de la console. Supposons que le
pourcentage total de pourboires sur la facture et le nombre de personnes sur console enregistrent chacun de
ces éléments et inspectent chacun de ces éléments
dans notre console. heure actuelle, ils sont tous
nuls, ce qui est
logique car nous
les avons définis sur zéro par défaut. Ensuite, si je dis que la facture
totale est de 100, vous verrez le premier
chiffre changer. suffit d'en sélectionner dix pour obtenir 0,1, Il suffit d'en sélectionner dix pour obtenir 0,1, ce qui est ce à quoi nous nous attendons si j'
ajoute cinq personnes, la dernière change,
afin que nous sachions tout fonctionne
correctement. C'est bon d'y aller. En ce sens, je vais supprimer ce journal de console
pour le moment car c'est génial. Nous savons donc que les
informations sont
correctement transmises au calculateur de pourboires, sorte que les choses se
passent correctement. La raison pour laquelle je ne
voulais pas utiliser calculateur
de
pourboires plus tôt avec toutes ces petites fonctionnalités, étant donné que vous
allez maintenant créer quelques fonctions dans le calculateur de
pourboires, nous devons calculer le montant du pourboire par personne et le total
par personne Pour ce faire, nous devons
créer deux fonctions. Nous disons « obtenir un pourboire constant par personne », puis nous en
créerons un autre. Obtenez le total par personne. Nous pouvons le faire ici
ou nous pouvons le faire
dans le cadre de la saisie des coûts. Cela
n'a pas vraiment d'importance. Mais si nous le faisons ici, que nous n'avons pas besoin d'ajouter un ensemble
d'accessoires supplémentaires dois dire que nous n'avons pas besoin d'ajouter un ensemble
d'accessoires supplémentaires à la
production de la facture Si j'obtiens le niveau ou
peut-être que nous
voulons approfondir les choses dans Yeah, peut-être que nous voulons le
faire, en fait, désolée. Faisons-le pour la production des factures,
juste pour que les choses restent propres. Très bien, nous allons donc
créer ces deux éléments ici, mais ce que nous
devons faire, c'est transmettre trois accessoires à la sortie de la facture Tout comme nous avions une
interface pour la saisie des coûts. Je vais créer une
interface dans la sortie des factures. Il suffit de le copier-coller
à partir du, de les
récupérer ici, là. Alors maintenant, dans la fonction ici, je vais dire «
obtenir un pourboire par personne ». Le pourboire par personne
serait la facture totale multipliée le pourcentage de pourboire divisé par le nombre de personnes divisé
par le nombre de personnes. Ce sera la personne qui donnera le pourboire. Nous pouvons dire que c'est ce montant ou que nous n'avons pas besoin de
créer une fonction complète, nous allons simplement dire
pourboire constant par
personne, personne égale, et voilà. Ensuite, nous dirons que
c'est le pourboire par personne, c'est le pourboire par personne. Oui, nous venons de dire que le pourboire par personne est une facture totale multipliée le pourcentage de pourboire divisé par le nombre de personnes actuellement. Ce n'est pas un chiffre parce que nous
n'avons pas ces chiffres. Mais nous allons régler ce problème
en une seconde. Bien, la prochaine
chose que nous allons
faire , c'est le total par personne. total par personne sera le pourboire par personne, la facture totale divisée par le nombre de personnes
plus le pourboire par personne. De cette façon, nous pouvons réellement l'utiliser pour notre
deuxième fonction. Nous dirons que
ce sera notre total par personne, par personne. C'est logique. Facture totale calculée en fonction du nombre de personnes
plus le pourboire par personne. Génial En ce moment,
nous obtenons un chiffre. Je me demande si c'est non, ils devraient
venir car les chiffres peuvent être précisés. Je me demande s'ils ne sont pas présentés
sous forme de numéro pour une raison ou une autre. Voyons ce qui se passe si
je change le numéro ici. Ou, vous savez, c'est peut-être parce que
je pense que je sais
où est le problème. Nous ne
transmettons pas réellement les variables, ce qui créerait probablement un très gros problème. C'est bon, génial.
Nous l'avons donc déjà connecté. Donc oui, si vous pouvez voir ici
en fixant le pourboire à 10 %, le montant du pourboire
finirait par être de 2$ par personne. Et puis le total par personne serait alors de
22$, ce qui est logique 100$ divisés par cinq personnes
équivaudraient à 20$ par
personne plus 102$ de pourboire 22$. Nous pouvons faire une
petite somme de formulaires ici juste pour que les choses aient
l'air un peu plus propres Nous pouvons simplement ajouter le signe de 1$ ici. Ajoutez 1$, inscrivez-vous ici. Tu peux le
modifier. Voyez si lorsque j'appuie sur le bouton, cela
change, cela change les montants. La dernière chose que nous pourrions
probablement faire est simplement brancher notre bouton de réinitialisation. Il suffit de tout remettre à zéro. Donc oui, comme vous pouvez le voir, Typescript n'est pas si
différent de Javascript C'est assez similaire à la
façon dont vous fonctionneriez dans une application React ou
simplement dans une simple application Web
dactylographiée en Javascript La seule différence
est de pouvoir voir
les erreurs
avant qu'elles ne se produisent. Donc, comme ici, l'erreur était que nous n'avions
même pas réussi S'il s'agissait d'une application
Javascript, nous aurions peut-être passé dix ou 50 minutes à essayer de déboguer le problème et de comprendre
quel est le problème L'avantage du script
de type c'est qu'il vous permet simplement, hé, c'est là que réside le problème. Cette gestion rapide des erreurs
avant lancer votre application
et que les choses ne
fonctionnent pas, vous ne le savez pas. Oui, c'est ainsi que l'on peut
configurer un script de type, application
React,
j'espère que cela a été utile.
12. Conclusion: Conclusion dont nous avons
beaucoup parlé dans cette vidéo. Des bases de la dactylographie à la
création de votre propre application Web
dactylographiée l'avenir, vous devriez
pouvoir commencer à créer vos propres sites Web à partir de
zéro en utilisant du tapuscrit N'oubliez pas de rechercher quelque chose lorsque
vous n'en êtes pas sûr. J'adorerais voir le résultat de
votre site Web Veuillez
donc laisser un lien vers
votre code, une capture d'écran ou le site hébergé
dans l'onglet Projet et ressources ci-dessous, afin que je puisse voir tout le
travail que vous avez accompli. Je lis chaque commentaire, chaque critique et je regarde
chaque proposition de projet. Donc, si vous avez des questions, hésitez pas à
laisser un commentaire dans la section d'évaluation ci-dessous ou
à me contacter directement. Consultez ma page de profil pour plus d'informations à ce sujet. Si vous souhaitez en savoir
plus sur le codage, regardez les autres vidéos
que j'ai sur ma page de profil. J'ai également des vidéos
sur Next GS et React disponibles sur ma chaîne
Youtube et mon site Web. Je les lierai ci-dessous
et sur mon profil si vous souhaitez également les
apprendre, et je verrai dans le prochain.
Zoë Davidson, Software Engineer & Cinematographer
