Learn TypeScript in 50 Minutes - TypeScript Beginner Crash Course

00:48:51
https://www.youtube.com/watch?v=3mDny9XAgic

摘要

TLDRThis in-depth TypeScript tutorial is designed for developers who want to learn how to effectively use TypeScript in their projects. The video begins by explaining what TypeScript is, highlighting its role as a superset of JavaScript, and emphasizing its benefits in preventing coding errors by enforcing strict type definitions. Essential concepts such as type annotations, interfaces, enums, and generics are thoroughly discussed. The tutorial walks through the process of setting up TypeScript on a computer, compiling TypeScript code to JavaScript, and running it with Node.js. It emphasizes the importance of learning JavaScript fundamentals before diving into TypeScript since TypeScript builds on the existing syntax of JavaScript, adding types for better error detection and code maintenance. Key TypeScript features such as interfaces, which define structures for objects, and enums, which create a set of named constants, are thoroughly explored. The tutorial also explains advanced features like generic types, which enhance code flexibility while preserving type safety, and it highlights practical examples and scenarios where these concepts are applied. The video is structured to provide a practical guide to mastering TypeScript, whether for back-end applications with Node.js or front-end applications with frameworks like React, ensuring developers can harness the full power of TypeScript in modern web development.

心得

  • 💻 TypeScript is a powerful language developed by Microsoft to enhance JavaScript with static types.
  • 📚 Learning TypeScript requires understanding JavaScript first, as TypeScript builds upon it.
  • 🔧 Type annotations in TypeScript improve code reliability and error prevention.
  • 📄 Interfaces in TypeScript define clear structures for objects, facilitating robust coding practices.
  • 🔠 Enums provide named constants, simplifying code and reducing errors.
  • 🔄 Generic types allow for flexible, reusable code components while maintaining type safety.
  • ⚙️ TypeScript code needs to be compiled to JavaScript for execution in browsers or Node.js.
  • 🤔 Optional properties in interfaces allow flexibility in object definitions by using '?'.
  • 🛠️ TypeScript ensures that JavaScript code is more scalable and easier to maintain.
  • 📈 Mastering TypeScript is essential for modern web development, especially for large projects.

时间轴

  • 00:00:00 - 00:05:00

    The introduction section outlines the objective of the video, which is a comprehensive tutorial on TypeScript, aimed at viewers who are new to the language. The creator emphasizes the importance of TypeScript, particularly for web developers who need to stay updated with reliable and widely-used technologies. TypeScript is introduced as a better version of JavaScript with static type definitions, which help prevent coding errors that could affect end users. The speaker sets the expectation that knowledge of JavaScript basics is assumed, as TypeScript builds upon JavaScript syntax.

  • 00:05:00 - 00:10:00

    The tutorial begins with instructions on setting up TypeScript within Visual Studio Code using Node.js. The audience is guided through creating a TypeScript file and installing TypeScript via a package manager like npm. The process includes generating a TSConfig file to manage TypeScript code, which involves setting various compiler options such as strict type checking. The importance of setting the strict option to true is emphasized, as it ensures type definitions for every variable.

  • 00:10:00 - 00:15:00

    The tutorial progresses to type annotations in TypeScript, explaining how it differs from JavaScript by requiring explicit type declarations for variables, such as numbers, strings, and booleans. The instructor also introduces arrays and any type, showcasing TypeScript's power in preventing type mismatches and highlighting when 'any' type should be used sparingly.

  • 00:15:00 - 00:20:00

    The session covers creating and using functions with type annotations. The speaker demonstrates how the absence of type annotations can lead to unexpected outcomes, using a function example to illustrate potential JavaScript issues. They guide on defining argument types and return types for functions, ensuring strict adherence to expected data types, thus illustrating TypeScript’s advantage in maintaining consistency and preventing runtime errors.

  • 00:20:00 - 00:25:00

    The concept of interfaces is introduced to define object shapes, showcasing their utility in ensuring consistent object structure. The speaker gives a practical implementation of interface with the 'user' example, pointing out how TypeScript assists in catching type-related errors. Optional fields in interfaces are discussed, explaining how TypeScript handles them, including outputting 'undefined' for missing values. The section touches on using interfaces to include functions within objects.

  • 00:25:00 - 00:30:00

    The video then delves into handling multiple types using union and intersection types. Unions allow variables to accept multiple data types, demonstrated with a function dealing with IDs that can be either a string or a number. Intersections combine different interfaces into a single type, shown with an 'employee' example that combines 'business partner' and 'user identity'. The difference between union and intersection is articulated, emphasizing flexibility and type safety.

  • 00:30:00 - 00:35:00

    The tutorial introduces enums as a method to define a set of named constants, enhancing code readability and usability. Enums are employed to handle error types in a function, with different constants representing various error scenarios. This approach promotes precise control over function inputs and reduces potential errors, allowing for scalable and maintainable code structures.

  • 00:35:00 - 00:40:00

    The concept of generic types is explained, illustrating their role in creating flexible, reusable functions and classes that work with various data types. A class is built as an example, showcasing how generics allow for different data type specifications in instances of the class, improving code versatility. This is particularly useful in scenarios where the same functionality is applied to multiple data types.

  • 00:40:00 - 00:48:51

    The final part discusses read-only properties in TypeScript, used to create immutable object fields that cannot be altered after initial assignment. The tutorial concludes with a brief mention of other related videos for further learning, notably TypeScript with React, emphasizing the importance of type safety in modern web development. The speaker encourages feedback and suggestions for future content.

显示更多

思维导图

Mind Map

常见问题

  • What is TypeScript?

    TypeScript is an open-source programming language developed by Microsoft. It is a superset of JavaScript that adds static types to enhance JavaScript code.

  • Why should I learn TypeScript?

    TypeScript helps developers prevent mistakes by adding static type definitions, which makes JavaScript more robust and reliable for large-scale applications.

  • Do I need to know JavaScript before learning TypeScript?

    Yes, it's recommended to know the basics of JavaScript before learning TypeScript, as TypeScript builds upon JavaScript.

  • How does TypeScript handle variable types?

    TypeScript allows you to define types for variables using type annotations, which helps prevent errors and improves code readability.

  • What are TypeScript interfaces?

    Interfaces in TypeScript define the structure that objects should follow, allowing for clearer and more robust code.

  • What are enums in TypeScript?

    Enums in TypeScript are used to define a set of named constants, which increase code readability and reduce errors.

  • What are generic types in TypeScript?

    Generic types allow you to create flexible and reusable code components that work with any data type, maintaining type safety.

  • Can TypeScript be run directly in Node.js?

    No, TypeScript needs to be compiled to JavaScript before it can be run in Node.js or on web browsers.

  • How do you create an optional property in a TypeScript interface?

    By adding a question mark (?) after the property name, you can define optional properties in an interface.

  • What is the difference between TypeScript and JavaScript?

    TypeScript adds static types to JavaScript, allowing for better error checking, readability, and scalability, while JavaScript is dynamically typed.

查看更多视频摘要

即时访问由人工智能支持的免费 YouTube 视频摘要!
字幕
en
自动滚动:
  • 00:00:00
    hey guys how's it going I'm back here
  • 00:00:01
    with another video and in today's video
  • 00:00:03
    I'm going to be bringing a recently much
  • 00:00:06
    requested tutorial where I'm going to be
  • 00:00:08
    going from zero to explaining everything
  • 00:00:11
    I believe you should learn in order to
  • 00:00:13
    say that you understand and know how to
  • 00:00:15
    use typescript for those who don't know
  • 00:00:17
    typescript is an open-source programming
  • 00:00:19
    language developed and maintained by
  • 00:00:21
    Microsoft it is basically a super set of
  • 00:00:24
    JavaScript which means that any valid
  • 00:00:26
    JavaScript code is also valid typescript
  • 00:00:29
    code typescript is a better version
  • 00:00:31
    technically of JavaScript because it
  • 00:00:33
    adds things that JavaScript can't have
  • 00:00:35
    like static type definitions allowing us
  • 00:00:39
    developers to be able to Define each
  • 00:00:41
    variable with their specific type and
  • 00:00:44
    when you actually compile your
  • 00:00:46
    typescript code um everything will
  • 00:00:48
    become JavaScript but the the point of
  • 00:00:51
    using typescript is not for the end user
  • 00:00:53
    it is for us developers to prevent
  • 00:00:55
    ourselves from making mistakes that
  • 00:00:57
    would then cause issues to the client
  • 00:01:00
    and the users who are using our website
  • 00:01:02
    therefore typescript makes one of my
  • 00:01:04
    favorite programming languages which is
  • 00:01:06
    Javascript be even better so if before
  • 00:01:09
    this video you had any ounce of Doubt of
  • 00:01:12
    whether you needed to learn typescript
  • 00:01:14
    I'm assuring you that you do need it and
  • 00:01:15
    if you want to become a web developer in
  • 00:01:17
    today's day and age especially with how
  • 00:01:19
    competitive the market is there you need
  • 00:01:21
    to be up to date with the most reliable
  • 00:01:23
    and used Technologies and typescript is
  • 00:01:26
    on the top of the list so because I know
  • 00:01:28
    it's annoying to learn new technologies
  • 00:01:31
    especially in the beginning um I
  • 00:01:33
    compiled this video which um I'll
  • 00:01:36
    structure it in a way such that if I was
  • 00:01:38
    the one learning typescript again from
  • 00:01:40
    the beginning how would I approach this
  • 00:01:43
    now do you need to know JavaScript for
  • 00:01:44
    this course well I will assume you know
  • 00:01:47
    the basics because I do think JavaScript
  • 00:01:49
    is important to learn in its core uh
  • 00:01:51
    before learning typescript because at
  • 00:01:54
    the end of the day typescript isn't a
  • 00:01:56
    replace like it isn't some any different
  • 00:01:59
    from JavaScript in the sense that the
  • 00:02:01
    syntax is the same the only difference
  • 00:02:02
    is the extensions that you apply so the
  • 00:02:05
    things you add not actually the things
  • 00:02:07
    you already did in JavaScript and you'll
  • 00:02:09
    understand as we go on through the video
  • 00:02:11
    and before we get into this video if you
  • 00:02:13
    could leave a like And subscribe I would
  • 00:02:14
    massively appreciate it this video is
  • 00:02:16
    not sponsored but if you want to help
  • 00:02:18
    the channel uh you could support the
  • 00:02:19
    channel by checking out one of our
  • 00:02:21
    partners uh which is hostinger uh talked
  • 00:02:24
    about them a bunch of times in my
  • 00:02:25
    channel already you can check out my
  • 00:02:26
    link in the description if you're
  • 00:02:27
    looking to host your website in any
  • 00:02:29
    place place they have a really good
  • 00:02:30
    service and I would appreciate if you
  • 00:02:32
    could check them out uh but yeah that's
  • 00:02:34
    basically it let's get into the
  • 00:02:38
    [Music]
  • 00:02:46
    tutorial okay everyone so right off the
  • 00:02:48
    bat I explained to you guys uh what
  • 00:02:51
    typescript is and uh why I think you
  • 00:02:54
    should use it so now uh let's get into
  • 00:02:57
    the Practical stuff so first off we need
  • 00:02:59
    need to install typescript I opened up
  • 00:03:01
    here vs code and this is where we're
  • 00:03:03
    going to be running our application um
  • 00:03:05
    if you know how to run JavaScript
  • 00:03:07
    applications you might know that there's
  • 00:03:08
    two ways to do it you can either run it
  • 00:03:10
    in a browser by just using normal
  • 00:03:12
    JavaScript and having an HTML page
  • 00:03:14
    however for athetic purposes and for
  • 00:03:17
    Simplicity reasons I actually want to
  • 00:03:19
    run my typescript and my JavaScript all
  • 00:03:21
    inside of my terminal and we do this by
  • 00:03:23
    utilizing nodejs so I will create um a
  • 00:03:27
    file over here called
  • 00:03:31
    tutorial. TS now this will be the file
  • 00:03:34
    where all of our code is going to be
  • 00:03:35
    written um if you notice immediately we
  • 00:03:38
    use a TS extension instead of a
  • 00:03:40
    JavaScript a GS extension because uh
  • 00:03:43
    this will help us distinguish this from
  • 00:03:45
    a Javascript file and here is the file
  • 00:03:50
    now we need to actually install
  • 00:03:51
    typescript inside of our computer all
  • 00:03:54
    computers I Believe come with JavaScript
  • 00:03:56
    but typescript uh definitely needs to be
  • 00:03:58
    installed now in order to install it you
  • 00:04:00
    have to use a package manager um let's
  • 00:04:03
    assume you're using npm and run npm
  • 00:04:06
    install dasg to install this package
  • 00:04:09
    globally and then
  • 00:04:12
    typescript now I've obviously already
  • 00:04:14
    installed this so I'm not going to run
  • 00:04:16
    that however after you do you did that
  • 00:04:18
    you should run the command TSC then D-
  • 00:04:22
    init what this is going to do is it will
  • 00:04:24
    help us generate our TS config file
  • 00:04:27
    which is a Json file um which which
  • 00:04:29
    includes a bunch of configuration stuff
  • 00:04:31
    related to how we want to manage our
  • 00:04:33
    typescript code the file includes
  • 00:04:36
    settings for various compiler options
  • 00:04:38
    such as which files to include or
  • 00:04:40
    exclude the target JavaScript version
  • 00:04:43
    that you want your typescript code to
  • 00:04:45
    run with and additional checks like if
  • 00:04:48
    you want your typescript uh application
  • 00:04:50
    to actually be very strict with the
  • 00:04:51
    typing rules or uh maybe not so strict
  • 00:04:55
    um essentially it's kind of like a road
  • 00:04:57
    map for the compiler detailing all the
  • 00:04:59
    rules that you want your typescript code
  • 00:05:01
    to follow Now by default you see there's
  • 00:05:04
    a bunch of configurations already set up
  • 00:05:06
    for us um thing is I actually want to
  • 00:05:09
    check and you can see this uh strict
  • 00:05:12
    true over here uh should be set to true
  • 00:05:14
    for this tutorial because you actually
  • 00:05:16
    want to enable all checks for typescript
  • 00:05:20
    so if you put this to false it will
  • 00:05:23
    basically uh allow you to write your
  • 00:05:26
    code in typescript but it will also
  • 00:05:27
    allow you to not add type definitions to
  • 00:05:31
    every single variable you create or
  • 00:05:33
    every single function you create which
  • 00:05:35
    kind of goes a bit against of why you're
  • 00:05:37
    using typescript sometimes I use this
  • 00:05:39
    just when I'm annoyed and I'm just
  • 00:05:41
    trying to build a quick project however
  • 00:05:43
    um I definitely recommend setting this
  • 00:05:44
    to true so I'm going to keep this as it
  • 00:05:47
    was I'm going to save this and let's
  • 00:05:49
    start working on the code right off the
  • 00:05:51
    bat I want to introduce you guys to um
  • 00:05:53
    the different type annotations that come
  • 00:05:56
    with typescript so we all know how to
  • 00:05:58
    define a variable right I want to to
  • 00:05:59
    Define a variable called age or ID I
  • 00:06:03
    could come over here and say ID is equal
  • 00:06:06
    to 5 right however in typescript this
  • 00:06:10
    isn't how it works because although uh
  • 00:06:12
    JavaScript would assume that this is a
  • 00:06:14
    number we have to make sure to let our
  • 00:06:17
    code know that this is a number so in
  • 00:06:20
    order to let typescript know that this
  • 00:06:22
    variable should be considered a number
  • 00:06:25
    we would have to come over here and
  • 00:06:26
    Define this variable as an actual number
  • 00:06:29
    so as you can see in typescript we add
  • 00:06:31
    the types for each variable just like
  • 00:06:34
    this and you actually see this whenever
  • 00:06:36
    you're just writing normal JavaScript if
  • 00:06:38
    you hover over a variable you can see it
  • 00:06:40
    assumes that the variable is equal to
  • 00:06:43
    this however us defining it instead of
  • 00:06:46
    letting JavaScript assume will help us
  • 00:06:48
    prevent future bugs that we might not
  • 00:06:51
    even be thinking of so we definitely
  • 00:06:53
    want to keep this as a number now what
  • 00:06:55
    other variables we could Define well we
  • 00:06:58
    could Define a string for example we
  • 00:07:00
    could Define a variable called company
  • 00:07:02
    and set it equal to um I don't know Acme
  • 00:07:06
    Corporation right now how would we
  • 00:07:09
    Define this type as string well we just
  • 00:07:11
    come over here and Define it as a string
  • 00:07:15
    same goes with a buleon um let's create
  • 00:07:18
    a Buon called is published or something
  • 00:07:20
    like that and we would Define it to be a
  • 00:07:23
    bullan by just setting the Boolean type
  • 00:07:26
    now I'll continue on with a couple other
  • 00:07:29
    types and just go over what each of them
  • 00:07:32
    do okay so I added three more types over
  • 00:07:35
    here and I'll go over what each of them
  • 00:07:37
    mean so right off the bat if you want to
  • 00:07:40
    Define an array of a specific type the
  • 00:07:43
    way you do it is by writing the type
  • 00:07:45
    first and then putting open and square
  • 00:07:47
    and closing square brackets just like
  • 00:07:49
    this so this would be to Define an array
  • 00:07:53
    of numbers just as we do over here if I
  • 00:07:55
    wanted to make this into an area of
  • 00:07:56
    strings I would do this now immediately
  • 00:07:59
    you notice that when I try to change the
  • 00:08:00
    type definition starts giving us some
  • 00:08:02
    squiggly lines over here which says that
  • 00:08:05
    the type number is not assignable to the
  • 00:08:06
    type string so you can see the power of
  • 00:08:09
    typescript because anytime you
  • 00:08:11
    mistakenly uh Define variables with um
  • 00:08:15
    the wrong type it will actually let you
  • 00:08:17
    know if this was JavaScript this would
  • 00:08:19
    allow us to do it no matter what right I
  • 00:08:22
    mean JavaScript even allows you to do
  • 00:08:24
    something like this over here which is
  • 00:08:27
    um having an array with different types
  • 00:08:31
    inside of it now necessarily here it
  • 00:08:34
    doesn't give you a red Squigly light
  • 00:08:36
    because there's a specific type in
  • 00:08:38
    typescript called the any type which as
  • 00:08:41
    you might know it just defines a
  • 00:08:44
    variable as any of the types so this
  • 00:08:47
    variable X over here because I set it to
  • 00:08:49
    any could actually be a number it could
  • 00:08:51
    be a bullan it could be um I don't know
  • 00:08:55
    an array if I wanted to um and it kind
  • 00:08:58
    of defies a bit the point of typescript
  • 00:09:00
    so you might see some n's in some
  • 00:09:02
    projects however usually people use any
  • 00:09:05
    whenever they are just they they they
  • 00:09:07
    don't want to actually Define the real
  • 00:09:09
    type or they're confused with the real
  • 00:09:11
    type or they just are annoyed with
  • 00:09:13
    typescript and don't actually want to uh
  • 00:09:15
    learn what the actual type is so this
  • 00:09:18
    over here should only be used the any
  • 00:09:20
    type should only be used in extreme
  • 00:09:22
    scenarios um and obviously there's other
  • 00:09:24
    specific scenarios where you definitely
  • 00:09:26
    want to use it but I'm just saying in
  • 00:09:27
    general I would only keep that for
  • 00:09:29
    extreme scenarios where you actually
  • 00:09:31
    don't know the type now this is cool
  • 00:09:33
    however how would this work with some
  • 00:09:35
    actual functionality well if I were to
  • 00:09:37
    create a function right let's create
  • 00:09:39
    over here a function and let's call it
  • 00:09:44
    concatenate strings or actually let's
  • 00:09:46
    call it concatenate values that would be
  • 00:09:49
    better and let's make it such that this
  • 00:09:52
    function takes in two variables A and B
  • 00:09:58
    and it returns
  • 00:10:00
    the two values um concatenated so for
  • 00:10:04
    those who don't know the word
  • 00:10:06
    concatenate basically is usually used
  • 00:10:08
    for Strings so if I if a over here was
  • 00:10:12
    the word hello and B was the word world
  • 00:10:18
    the result of this function should be
  • 00:10:21
    hello world right so you can see there
  • 00:10:25
    is a red squiggly line here because it
  • 00:10:27
    is immediately telling us that we
  • 00:10:28
    actually didn't didn't Define any type
  • 00:10:30
    for it and it is actually in assuming
  • 00:10:32
    that it has an any type which isn't
  • 00:10:34
    allowed in strict mode so we would have
  • 00:10:37
    to define a type but before we actually
  • 00:10:39
    do that let's see what would happen in
  • 00:10:41
    two scenarios that I think will'll
  • 00:10:43
    exemplify to you guys uh situations in
  • 00:10:46
    which JavaScript could cause some issues
  • 00:10:48
    so let's actually console uh log over
  • 00:10:51
    here um the result of this function and
  • 00:10:54
    first let's call it using hello and then
  • 00:10:59
    world just like we said before and then
  • 00:11:02
    let's actually try to put a number here
  • 00:11:04
    instead of a string let's put five and
  • 00:11:06
    10 right so thing is five and 10 are
  • 00:11:12
    numbers not strings so if we're taking
  • 00:11:15
    the function by what it actually is
  • 00:11:18
    saying that it's doing which is just
  • 00:11:20
    getting two strings and adding them
  • 00:11:21
    together technically this over here
  • 00:11:24
    should return
  • 00:11:26
    510 right however since these are
  • 00:11:28
    numbers
  • 00:11:29
    um and we haven't defined a specific
  • 00:11:31
    type here this will actually return 5 +
  • 00:11:34
    10 which is not 510 it is 15 so you see
  • 00:11:37
    that if I run this file and for those
  • 00:11:40
    who don't know if you're trying to run a
  • 00:11:42
    nodejs file locally you just run node
  • 00:11:45
    and then you run the uh
  • 00:11:50
    tutorial uh you run the the file like
  • 00:11:52
    this um you can see that yeah we got
  • 00:11:54
    hello world and 15 not 510 so we
  • 00:11:58
    definitely want to Define find a type
  • 00:11:59
    for this function and the way we Define
  • 00:12:02
    types for arguments of functions is just
  • 00:12:04
    like how we defined for the variables
  • 00:12:05
    over there we just put over here the the
  • 00:12:08
    values so I'll say string and I'll say
  • 00:12:12
    string perfect and now you should see
  • 00:12:15
    that we it gives us a an error over here
  • 00:12:18
    because we're actually putting five and
  • 00:12:20
    10 as numbers so we know that if we want
  • 00:12:22
    to get the result that we wanted we had
  • 00:12:24
    to do something like this and now if we
  • 00:12:26
    were to come over here and run node
  • 00:12:28
    index
  • 00:12:30
    .ts or tutorial. TS
  • 00:12:33
    actually you should actually see an
  • 00:12:35
    error and the error is pointing to the
  • 00:12:37
    fact that uh we're putting typescript in
  • 00:12:40
    a file that node.js doesn't know how to
  • 00:12:42
    read because node.js like I said isn't
  • 00:12:45
    going to compile or isn't going to read
  • 00:12:48
    and run the typescript code in itself it
  • 00:12:51
    actually runs JavaScript so we actually
  • 00:12:54
    have to compile this into a Javascript
  • 00:12:56
    file to be able to run with the J with
  • 00:12:58
    the typ script notation so in order to
  • 00:13:01
    compile this tutorial. TS file into a
  • 00:13:04
    JavaScript one we can run um TSC and
  • 00:13:08
    you'll see that it automatically
  • 00:13:10
    generates this file as a Javascript file
  • 00:13:13
    so it's basically the same thing as
  • 00:13:14
    before but without the type annotations
  • 00:13:17
    which means that um this is what is
  • 00:13:19
    going to be read by the browser this is
  • 00:13:21
    what is going to be read by the server
  • 00:13:22
    if we're we're deploying this to a
  • 00:13:23
    server so the benefit of typescript goes
  • 00:13:26
    in this file and if you want to run our
  • 00:13:29
    result we actually need to run the
  • 00:13:31
    JavaScript one so I'll say node index.js
  • 00:13:34
    and um what happened um module not found
  • 00:13:39
    oh I keep putting uh index.js let's do
  • 00:13:42
    tutorial. JS uh and yeah you can see it
  • 00:13:46
    correctly said 510 which is perfect now
  • 00:13:49
    one thing I want to point out to you
  • 00:13:51
    guys is um what I what if I actually
  • 00:13:55
    return something else what if I return
  • 00:13:56
    the the the number three this obviously
  • 00:13:59
    is wrong right because how can this
  • 00:14:03
    we're expecting a string not a number so
  • 00:14:06
    there is a way for you to Define um the
  • 00:14:09
    return type of a function and the way
  • 00:14:10
    you do that is by adding the return type
  • 00:14:13
    over here so we'll say that the return
  • 00:14:16
    type for this function is a string so
  • 00:14:18
    that um our code knows that this is what
  • 00:14:21
    it's supposed to return now if I were to
  • 00:14:23
    put three or four over here it would
  • 00:14:24
    give us an error on the return statement
  • 00:14:27
    um telling us that we can't actually
  • 00:14:29
    return a number perfect now that we've
  • 00:14:30
    learned the basics of the basics let's
  • 00:14:32
    start getting where a typescript gets
  • 00:14:34
    really interesting which is when we
  • 00:14:36
    actually start defining objects and
  • 00:14:38
    types ourself so whenever we have an
  • 00:14:42
    object in JavaScript right so if I were
  • 00:14:44
    to define the object
  • 00:14:46
    user we could put various different
  • 00:14:49
    fields inside of here we could put an ID
  • 00:14:52
    right which would be um a number we
  • 00:14:56
    could put a name which would be a string
  • 00:15:00
    and we can also put for example an AG
  • 00:15:02
    right which would be um a number so this
  • 00:15:06
    object over here could be defined in a
  • 00:15:11
    certain way but then you could right
  • 00:15:13
    after this come here and change one of
  • 00:15:15
    the values to something that doesn't
  • 00:15:17
    make sense right now it says over here
  • 00:15:20
    that you can't do that because the
  • 00:15:22
    string is not assignable to a number it
  • 00:15:24
    is assuming that our user object is
  • 00:15:26
    defined this way and it's is actually
  • 00:15:29
    helping us by a by giving us a red
  • 00:15:31
    squiggler line telling us that this
  • 00:15:33
    shouldn't happen however we shouldn't
  • 00:15:36
    let JavaScript assume anything we should
  • 00:15:39
    Define the type for this object
  • 00:15:41
    ourselves and the way I would Define a
  • 00:15:43
    type for an object is by using an
  • 00:15:45
    interface so an interface is basically
  • 00:15:49
    um a road map a blueprint for how our
  • 00:15:53
    object should look like so I'll call
  • 00:15:55
    this interface the user
  • 00:15:57
    interface and inside of here we should
  • 00:16:00
    Define all of the fields that our user
  • 00:16:03
    has but instead of putting the values
  • 00:16:04
    for each of the field we should put the
  • 00:16:07
    types so for ID it will be number for
  • 00:16:10
    age for name it will be string and for
  • 00:16:14
    age it will be number as well now you
  • 00:16:17
    can see that um if I were to put this it
  • 00:16:20
    will still say you can't um but we
  • 00:16:23
    actually haven't assigned this object to
  • 00:16:25
    this interface that's why if I were to
  • 00:16:27
    actually make this into a string this
  • 00:16:30
    would work however we don't want to
  • 00:16:32
    allow a user to be defined with an age
  • 00:16:35
    which is a string so we say that this
  • 00:16:38
    user has Type user interface so now it
  • 00:16:42
    gives us the error which means that just
  • 00:16:44
    like how we were defining variables
  • 00:16:46
    before um by giving the string type we
  • 00:16:49
    can now use uh a personalized type that
  • 00:16:52
    we create to enforce type definitions
  • 00:16:56
    now let's fix this by just removing this
  • 00:16:59
    uh by making this into a number and I
  • 00:17:01
    want to actually point a question for
  • 00:17:03
    you guys what if there's a user I
  • 00:17:06
    imagine we're in real life and there's a
  • 00:17:08
    user who we don't know the age and the
  • 00:17:10
    age actually doesn't matter that much
  • 00:17:12
    but it's an additional thing that we
  • 00:17:14
    might want to have some times right so
  • 00:17:16
    what if I don't want to pass an age well
  • 00:17:19
    there's clearly an issue right it says
  • 00:17:21
    property age is missing on this type and
  • 00:17:23
    it's required in the user interface now
  • 00:17:26
    what does it mean to be required it
  • 00:17:27
    means that some fields or all the fields
  • 00:17:30
    you define in your interface they can
  • 00:17:33
    either be required or not they can
  • 00:17:35
    either be required or optional so it
  • 00:17:37
    assumes it's required because that's how
  • 00:17:39
    we actually defined it in order to make
  • 00:17:42
    it optional we had to put a question
  • 00:17:44
    mark right after the name of the field
  • 00:17:47
    and now you see it doesn't give us an
  • 00:17:49
    error anymore now what happens if I
  • 00:17:52
    print or a console log sorry console log
  • 00:17:55
    the
  • 00:17:56
    user. AG well let's check this
  • 00:18:00
    out let's open this again and like you
  • 00:18:04
    like I told you guys we have to first
  • 00:18:05
    build this um it just built and then we
  • 00:18:09
    have to run the tutorial. JS you see it
  • 00:18:13
    gives us as undefined because the
  • 00:18:16
    optional type is either
  • 00:18:18
    undefined or a number so you see this is
  • 00:18:22
    how the age field in the user interface
  • 00:18:25
    is defined either a number or undefined
  • 00:18:28
    you might expect it to be null but
  • 00:18:30
    technically not because undefined as a
  • 00:18:32
    JavaScript type and it's used uh in
  • 00:18:34
    typescript for whenever we don't we
  • 00:18:37
    didn't actually Define a value for some
  • 00:18:39
    sort of field or variable so we could
  • 00:18:41
    actually um play around with this we can
  • 00:18:43
    say okay if uh let's console log this if
  • 00:18:48
    uh there's no user. AG so if user. AG is
  • 00:18:53
    undefined then we actually want to
  • 00:18:55
    console log a message saying no no age
  • 00:19:01
    of the
  • 00:19:02
    user and if it isn't undefined then we
  • 00:19:07
    actually want to console log the AG
  • 00:19:08
    you'll see that after this if we built
  • 00:19:12
    it again and run the same thing we
  • 00:19:15
    should actually get a error message for
  • 00:19:17
    it which means that um actually having
  • 00:19:19
    type definitions in our code can lead to
  • 00:19:22
    many conditional statements that you
  • 00:19:23
    previously couldn't have in JavaScript
  • 00:19:25
    you have no idea how many times I have
  • 00:19:27
    statements like this where a piece of
  • 00:19:29
    data can actually be no and I'm
  • 00:19:30
    constantly checking to see if it is
  • 00:19:32
    because um projects revolve around that
  • 00:19:35
    whole concept now what else can you
  • 00:19:37
    actually put inside of an interface well
  • 00:19:40
    if you have any idea of what you can
  • 00:19:41
    actually put inside of an object then
  • 00:19:42
    you have your answer because objects can
  • 00:19:45
    be defined in the exact way in which
  • 00:19:48
    they um can be created so if I imagine
  • 00:19:52
    in this user interface over here I had a
  • 00:19:55
    function right imagine here actually in
  • 00:19:57
    the actual object I had aun function
  • 00:19:59
    called uh greet right it's a function
  • 00:20:02
    which um we can actually use to uh greet
  • 00:20:08
    someone right and it comes with a little
  • 00:20:10
    message over here uh and with it we can
  • 00:20:14
    actually just console log um the actual
  • 00:20:19
    message so I can say something like this
  • 00:20:22
    conso log message now why is it giving
  • 00:20:25
    us an error right why is it giving us an
  • 00:20:27
    error actually I should remove that uh
  • 00:20:29
    why is it giving us an error well
  • 00:20:31
    because we haven't defined any of the
  • 00:20:32
    types but if we didn't have typescript
  • 00:20:35
    we could easily set this up and then
  • 00:20:39
    over here we could call user.
  • 00:20:43
    greet and put something like hello over
  • 00:20:47
    here and whenever we called this uh this
  • 00:20:49
    grd function would run and it would
  • 00:20:51
    conso lck the message however it's given
  • 00:20:53
    us an error because we haven't defined
  • 00:20:54
    this specific function as a part of the
  • 00:20:57
    user interface so let's do that so to
  • 00:21:00
    Define functions it's a little bit weird
  • 00:21:03
    but at the same time um it's pretty uh
  • 00:21:07
    self-explanatory um we actually first
  • 00:21:09
    Define the name of the function and we
  • 00:21:12
    specified to typescript that this is a
  • 00:21:13
    function by right after the name we put
  • 00:21:16
    a a parenthesis right now whatever we
  • 00:21:19
    put here is what this function will
  • 00:21:21
    return so with this over here this is
  • 00:21:24
    actually just a console log so it's not
  • 00:21:26
    returning anything right so whenever
  • 00:21:29
    you're not returning something in a
  • 00:21:30
    function timecrimes
  • 00:21:58
    is the type definition over here there's
  • 00:22:01
    no problem but we could actually
  • 00:22:02
    redefine this if we wanted to we could
  • 00:22:04
    actually put void over here as well and
  • 00:22:06
    here put string as well if we put
  • 00:22:08
    something else if we put number then you
  • 00:22:11
    would see that this is a problem because
  • 00:22:13
    it's not the same functions right so
  • 00:22:16
    let's keep it how it was before and
  • 00:22:18
    let's save this let's run this and let's
  • 00:22:20
    see if the function is actually called
  • 00:22:23
    uh we have to build it and then run it
  • 00:22:24
    and you can see it is actually called
  • 00:22:27
    perfect okay so I think this is a
  • 00:22:30
    everything kind of uh important to know
  • 00:22:32
    with interfaces uh there's more
  • 00:22:35
    complexity that is added um with
  • 00:22:38
    whenever you work with multiple types
  • 00:22:41
    and that's what I want to explore right
  • 00:22:43
    now so let's comment all of this out and
  • 00:22:46
    actually probably delete this and I want
  • 00:22:49
    to present you guys uh the following
  • 00:22:50
    scenario imagine we have this function
  • 00:22:53
    called uh print ID right and it's
  • 00:22:57
    related to an user
  • 00:22:59
    uh I wanted to actually print the or
  • 00:23:03
    console log the ID of a specific user
  • 00:23:07
    and it takes in the actual ID of the
  • 00:23:09
    user now if you've ever worked with IDs
  • 00:23:14
    before you might know that IDs can vary
  • 00:23:17
    in definitions it can actually be a
  • 00:23:19
    number or it could be a string no matter
  • 00:23:22
    what uh I just want to console log it so
  • 00:23:25
    I'll say console log um the ID some
  • 00:23:28
    message saying ID is equal to the ID
  • 00:23:33
    perfect now it's asking us to define a
  • 00:23:35
    type and I can Define over here for
  • 00:23:37
    example a string right and I could call
  • 00:23:41
    this print ID function and put a string
  • 00:23:44
    over here like ID 1 2 3 however there
  • 00:23:49
    are scenarios in which you also need
  • 00:23:52
    this to be a number because maybe the ID
  • 00:23:54
    is not ID 1 23 it's a bunch of numbers
  • 00:23:58
    right and obviously you don't want to
  • 00:23:59
    keep it as a string you want to keep it
  • 00:24:02
    as a number because that might be the
  • 00:24:03
    way that the data is coming to you so
  • 00:24:07
    with typescript is important to
  • 00:24:08
    understand that sometimes especially
  • 00:24:10
    when you're dealing with a full stack
  • 00:24:11
    app um data might be coming from the
  • 00:24:13
    back end in ways that you might not
  • 00:24:15
    expect so you have to deal with that so
  • 00:24:19
    whenever you have a situation like this
  • 00:24:20
    where this field can be either a string
  • 00:24:23
    or a number um you can use what is known
  • 00:24:26
    as a union which is um you combine
  • 00:24:30
    multiple types and say that the
  • 00:24:33
    combination of them can be attributed to
  • 00:24:35
    this variable so I can say that this ID
  • 00:24:38
    field can be a string or a number and
  • 00:24:42
    now this doesn't give an error anymore
  • 00:24:44
    so this little thing over here kind of
  • 00:24:46
    allows us to uh maybe internally or in
  • 00:24:49
    line Define a new type which is a type
  • 00:24:53
    uh defined by the union of both a string
  • 00:24:55
    and a number now unions can be become
  • 00:24:59
    really complex and annoying for example
  • 00:25:01
    this could become I don't know it's a
  • 00:25:03
    Boolean it could become as well an array
  • 00:25:06
    of uh numbers I don't know obviously
  • 00:25:10
    it's hard to come up with an example
  • 00:25:12
    right now but there are situations in
  • 00:25:14
    which a variable can have a very complex
  • 00:25:16
    type which is a union of a bunch of
  • 00:25:19
    different types in that kind of
  • 00:25:21
    situation or if you actually just want
  • 00:25:23
    to keep it simple and not have this
  • 00:25:24
    Union over here in the argument of the
  • 00:25:27
    function you can actually Define a type
  • 00:25:30
    for yourself now we've kind of done that
  • 00:25:34
    with an interface right with an
  • 00:25:36
    interface we've said user and then
  • 00:25:39
    defined an object right however the
  • 00:25:41
    difference between what we're going to
  • 00:25:43
    do now is that an interface is mostly
  • 00:25:45
    done for objects and what we're doing
  • 00:25:47
    now is for single Fields so if I want to
  • 00:25:49
    Define this ID field to be a type that
  • 00:25:52
    isn't one of the Primitive types I can
  • 00:25:54
    for example use the type definition over
  • 00:25:57
    here which is also known as a type Alias
  • 00:26:00
    and just say that um this will have a
  • 00:26:03
    type of
  • 00:26:04
    ID field type and it will be a union of
  • 00:26:11
    a string and a number and then I can
  • 00:26:14
    pass this over here and reuse this maybe
  • 00:26:17
    uh anywhere inside of my application and
  • 00:26:19
    now it will always know that this can
  • 00:26:21
    either be a string or a number it
  • 00:26:22
    accepts both now since we've talked
  • 00:26:25
    about uh unions we probably should talk
  • 00:26:27
    about the opposite of Union right a
  • 00:26:29
    union basically gets two sets for those
  • 00:26:32
    who've done set theory or have learned
  • 00:26:34
    about Vin
  • 00:26:35
    diagrams uh a union has two different
  • 00:26:38
    sets of data right and it accepts both
  • 00:26:41
    of them which is in this case the string
  • 00:26:43
    and the number but what about the
  • 00:26:47
    situation where you want to intersect uh
  • 00:26:50
    two types right you want to intersect
  • 00:26:52
    those two sets so a situation like this
  • 00:26:55
    would be the following imagine we have
  • 00:26:58
    uh the two the following two interfaces
  • 00:27:01
    right we have an interface for now
  • 00:27:02
    imagine that we have an interface for uh
  • 00:27:06
    a business partner I don't know it's a
  • 00:27:09
    person a person that is your partner in
  • 00:27:12
    business um and let's keep it simple
  • 00:27:15
    let's actually just say that our
  • 00:27:16
    business partner has two fields in this
  • 00:27:18
    object one is their name and one is
  • 00:27:22
    their um credit score I don't know
  • 00:27:24
    credit score and that's a number now
  • 00:27:29
    there is another interface called uh
  • 00:27:33
    interface called um user identity right
  • 00:27:38
    and this is actually more General so
  • 00:27:40
    business partner will be used for
  • 00:27:42
    objects uh related to a specific type of
  • 00:27:44
    person in our website it would be a
  • 00:27:46
    specific type of business of employee so
  • 00:27:49
    it would be a business partner and user
  • 00:27:50
    identity would contain the ID of a user
  • 00:27:54
    and their email which is something that
  • 00:27:56
    everyone in the website should have
  • 00:27:58
    right so we have two different types and
  • 00:28:03
    um they have some intersection because a
  • 00:28:06
    business partner whenever they have a
  • 00:28:08
    user they they do have a user identity
  • 00:28:10
    right so if I want to Define this new
  • 00:28:13
    type right this new type which is a more
  • 00:28:16
    General uh representation of uh an
  • 00:28:19
    employee in a website right I can call
  • 00:28:21
    this
  • 00:28:22
    employee um it would be a combination of
  • 00:28:26
    the values in this object and the values
  • 00:28:28
    in this one to do that I could just use
  • 00:28:31
    the concept of intersection I can say
  • 00:28:33
    that the employee is a business partner
  • 00:28:37
    and it intersects with the user identity
  • 00:28:40
    object now if I were to create a
  • 00:28:42
    function over here and imagine you want
  • 00:28:44
    to sign a contract for this employee
  • 00:28:47
    right you want to sign their contract I
  • 00:28:48
    could come over here and say const uh
  • 00:28:51
    sign
  • 00:28:53
    contract and then uh Define that you
  • 00:28:56
    need to pass an employee over here here
  • 00:28:59
    so
  • 00:29:00
    employee and we'll just console log a
  • 00:29:04
    message saying uh
  • 00:29:08
    contract
  • 00:29:10
    signed by and then put uh the employ
  • 00:29:14
    name which as you can see just by the
  • 00:29:17
    autocomplete it includes the fields from
  • 00:29:20
    both uh interfaces not just one so we
  • 00:29:22
    can get the employee
  • 00:29:24
    name and we can say uh something like
  • 00:29:28
    like with credit
  • 00:29:32
    score equal to and then we add the
  • 00:29:35
    credit score as well
  • 00:29:37
    actually uh no name and credit score in
  • 00:29:40
    the same object so actually let's
  • 00:29:41
    instead of say with email CU they are in
  • 00:29:44
    different one so with email um equal to
  • 00:29:49
    employee email perfect and you can see
  • 00:29:53
    that if we were to call this so sign
  • 00:29:55
    contract and we were to pass this object
  • 00:29:58
    with the following Fields a name called
  • 00:30:01
    Pedro a credit score of 800 let's say
  • 00:30:05
    I'm I'm
  • 00:30:06
    amazing uh an ID of 23 or
  • 00:30:10
    34 uh and an email of Pedro
  • 00:30:16
    gmail.com now if we call this um let's
  • 00:30:19
    just build it and oh there's an error
  • 00:30:21
    okay I have to do this and also let's
  • 00:30:24
    define the type of this as void because
  • 00:30:26
    that's the return type uh if I were to
  • 00:30:28
    do this build it and then run it again
  • 00:30:30
    you should see that um it actually works
  • 00:30:33
    there's a mistake in the string but it
  • 00:30:35
    actually works so it actually
  • 00:30:37
    concatenated both types it intersected
  • 00:30:39
    both of them and created a new type
  • 00:30:41
    which is uh it's not the union of both
  • 00:30:44
    because that's the whole difference
  • 00:30:45
    between intersection and Union because
  • 00:30:46
    if I were to do this this would give us
  • 00:30:49
    an error because employee is not uh an
  • 00:30:54
    object with fields of both types it is
  • 00:30:57
    either one of the types so we can't have
  • 00:31:00
    one of each over here I could actually
  • 00:31:02
    change this to credit score and this
  • 00:31:04
    would make more sense with the unit type
  • 00:31:06
    because then it would like over here we
  • 00:31:09
    could pass either the business partner
  • 00:31:11
    object or the user identity but in this
  • 00:31:14
    case uh we want to have both fields of
  • 00:31:17
    both objects so we do keep it like this
  • 00:31:20
    with an intersection sign and you'll see
  • 00:31:22
    this being used um I I see unions being
  • 00:31:25
    used way more in projects but this is
  • 00:31:27
    also important important um and I think
  • 00:31:29
    it's definitely important for you to
  • 00:31:30
    understand but one thing that is super
  • 00:31:32
    important in typescript that we haven't
  • 00:31:34
    talked about yet and it's what we're
  • 00:31:35
    going to be talking about right now is
  • 00:31:37
    the idea of enums um which is one of my
  • 00:31:41
    favorite parts of of typescript in
  • 00:31:43
    general you can actually replicate this
  • 00:31:44
    in JavaScript as well if you if you ever
  • 00:31:46
    want to do that but enims is a very easy
  • 00:31:49
    and handy way for you to define a set of
  • 00:31:52
    named constants and it will actually
  • 00:31:55
    improve the read readability and
  • 00:31:57
    usability
  • 00:31:58
    of your code that uses those constants
  • 00:32:01
    so if you don't if you didn't get what I
  • 00:32:02
    meant by that uh let me explain imagine
  • 00:32:05
    that um you want to have a function over
  • 00:32:08
    here uh and call it
  • 00:32:11
    print error
  • 00:32:13
    message right and this is probably going
  • 00:32:17
    to be called whenever you have some
  • 00:32:18
    error scenario in your website like
  • 00:32:20
    whenever you click a button and you call
  • 00:32:22
    some data and it comes out wrong um and
  • 00:32:25
    it should take in an error and it should
  • 00:32:28
    print out a message based on that
  • 00:32:32
    right so let's say
  • 00:32:34
    error now um imagine that there might be
  • 00:32:38
    multiple types of Errors right the error
  • 00:32:40
    could be um for example an unauthorized
  • 00:32:44
    user error it can be an unauthenticated
  • 00:32:47
    user error it can be an error about the
  • 00:32:49
    user not existing right it can be
  • 00:32:51
    imagine that this is probably going to
  • 00:32:52
    be called whenever you're trying to sign
  • 00:32:53
    in into an account right that's an eror
  • 00:32:56
    so let's think about this like this
  • 00:32:57
    error over here can be multiple things
  • 00:33:00
    and let's note it down so you guys can
  • 00:33:02
    understand it um the error can be um an
  • 00:33:07
    unauthorized error so the user is not
  • 00:33:09
    authorized and um user doesn't
  • 00:33:13
    exist if the user is trying to sign in
  • 00:33:16
    probably there's an error for wrong
  • 00:33:19
    credentials and um yeah or probably like
  • 00:33:23
    an internal error something just
  • 00:33:24
    happened not none of the other ones
  • 00:33:26
    right so it can be either of this ones
  • 00:33:28
    and depending on which one it is we want
  • 00:33:31
    to conso log a different
  • 00:33:32
    message so we could obviously come over
  • 00:33:35
    here and whatever this is returned we
  • 00:33:38
    could uh do something related to that
  • 00:33:41
    but the thing is we want to define a
  • 00:33:44
    specific set of constants for this which
  • 00:33:46
    is going to Define all the different
  • 00:33:48
    types of errors that they can be so an
  • 00:33:50
    enum could be a great example of what
  • 00:33:53
    you can use to make this easier we can
  • 00:33:56
    say uh enum
  • 00:33:58
    uh login error and we can Define over
  • 00:34:02
    here different types of constants or of
  • 00:34:06
    errors that can exist so for example the
  • 00:34:09
    login error can be an
  • 00:34:11
    unauthorized error and we can define a
  • 00:34:14
    string that is going to match that so
  • 00:34:16
    I'm going to say unauthorized this over
  • 00:34:17
    here not
  • 00:34:19
    necessarily uh will be what's going to
  • 00:34:21
    be printed um you could print that but
  • 00:34:24
    it's not necessarily it's just a a value
  • 00:34:27
    for um your enm key so then uh let's
  • 00:34:31
    create one for user doesn't no actually
  • 00:34:35
    user don't no no User it's a better way
  • 00:34:40
    so user doesn't exist let's call it no
  • 00:34:41
    user and let's pass in over here uh user
  • 00:34:47
    doesn't
  • 00:34:50
    exist or actually this just pass in no
  • 00:34:54
    user uh and then wrong credentials we'll
  • 00:34:56
    say wrong CR
  • 00:34:59
    credentials and again wrong
  • 00:35:03
    credentials and finally Let's do an
  • 00:35:05
    internal error so
  • 00:35:07
    internal and internal perfect now we can
  • 00:35:11
    say that this error is uh of
  • 00:35:14
    type login error Ena which means that um
  • 00:35:19
    if we wanted to display a different
  • 00:35:20
    error message depending on what which
  • 00:35:22
    one of these types it is we could easily
  • 00:35:25
    just come over here and say um
  • 00:35:29
    if um
  • 00:35:32
    error is equal to login error do
  • 00:35:38
    unauthorized then we can just console
  • 00:35:41
    log uh a message saying user not
  • 00:35:45
    authorized so you see it's pretty easy
  • 00:35:47
    for you to match this with this you
  • 00:35:49
    define the type of error and you define
  • 00:35:51
    the condition that should happen when
  • 00:35:53
    that error happens now let's do it for
  • 00:35:55
    the other ones uh let's say if error is
  • 00:35:58
    equal to uh no user we'll
  • 00:36:02
    say console
  • 00:36:04
    lug uh no user was found with that
  • 00:36:10
    username something like that now I'll
  • 00:36:12
    fill up the other ones and I'll be back
  • 00:36:14
    in a second okay as you can see we can
  • 00:36:16
    check for all the different errors we
  • 00:36:18
    can even put an else for the internal
  • 00:36:20
    one or we can just default it to be
  • 00:36:22
    internal by also checking if it's
  • 00:36:24
    internal but um that's fine um we'll
  • 00:36:28
    just also console log actually we'll
  • 00:36:30
    remove this over here and now let's call
  • 00:36:32
    this function let's call Print er no
  • 00:36:36
    error message so how would we what would
  • 00:36:38
    it put over here well we can actually
  • 00:36:40
    just straight up use the enum so I can
  • 00:36:42
    print out a message for the uh wrong
  • 00:36:45
    credentials one right and I can save
  • 00:36:47
    this build it run it and you'll see that
  • 00:36:51
    it will say the correct combination um I
  • 00:36:54
    could change this to be uh the no user
  • 00:36:57
    one and you'll see that it will actually
  • 00:37:00
    change based on that as well so um this
  • 00:37:04
    is the basics of enms inms are great for
  • 00:37:07
    this kind of stuff it is great for
  • 00:37:09
    defining I don't know situations like
  • 00:37:11
    directions Different Strings that might
  • 00:37:14
    or like keys for specific uh parts of
  • 00:37:17
    your website stuff like that um it's
  • 00:37:20
    probably one of the most used things in
  • 00:37:22
    typescript that I use personally I love
  • 00:37:24
    them and I think they're extremely
  • 00:37:26
    useful now one of the last things I want
  • 00:37:27
    to talk about um in typescript is
  • 00:37:30
    probably one of the most complicated to
  • 00:37:32
    understand which is the concept of
  • 00:37:34
    generic types and that's probably
  • 00:37:36
    something that a lot of people just uh
  • 00:37:38
    Breeze over and don't actually learn but
  • 00:37:40
    they see it on our day-to-day um working
  • 00:37:44
    um hours um so I wanted to just explain
  • 00:37:48
    to you guys uh because generics are
  • 00:37:50
    actually a very powerful feature that
  • 00:37:52
    many programming languages including
  • 00:37:54
    typescript uh use because it allows you
  • 00:37:56
    to write flexible reusable functions and
  • 00:37:59
    classes that can be used uh with
  • 00:38:01
    different types they kind of help you
  • 00:38:03
    ensure type safety without losing the
  • 00:38:05
    flexibility of working with various
  • 00:38:07
    different data types um and I came up
  • 00:38:09
    with a pretty I I believe to be um
  • 00:38:13
    relatable and simple example that
  • 00:38:15
    demonstrates how to use generics in
  • 00:38:16
    typescript so we're going to be creating
  • 00:38:19
    a storage class a storage container
  • 00:38:22
    class which um will contain different uh
  • 00:38:26
    data types right and uh we can make
  • 00:38:29
    different versions of this class with
  • 00:38:32
    different types so we can make one with
  • 00:38:34
    the string type one with the um number
  • 00:38:38
    type you'll understand as we build it
  • 00:38:41
    but uh to start this off let's start off
  • 00:38:43
    by just creating a class and call it
  • 00:38:47
    storage
  • 00:38:49
    container now this class whenever we
  • 00:38:52
    Define a normal class that could be of a
  • 00:38:54
    type we could pass over here an
  • 00:38:56
    interface for example we could pass in a
  • 00:38:58
    user interface like the one we created
  • 00:39:00
    but like I said um this should actually
  • 00:39:04
    be um
  • 00:39:07
    accepting various different data types
  • 00:39:10
    so we're going to be using a generic and
  • 00:39:12
    to define a generic over here we pass in
  • 00:39:15
    a t as you can see this will stand for
  • 00:39:19
    uh it's kind of a placeholder for um the
  • 00:39:22
    different data types that can be used so
  • 00:39:25
    over here we'll create a variable called
  • 00:39:29
    contents and we'll Define it to be a
  • 00:39:33
    array of this t uh type now this is a
  • 00:39:37
    private function so I'll make this
  • 00:39:38
    private and contents will just be uh
  • 00:39:42
    whatever variable like whatever value
  • 00:39:44
    values we're holding inside of here
  • 00:39:46
    we're going to return this um in the end
  • 00:39:48
    this is going to be a very simple class
  • 00:39:50
    now for Constructor uh in this class
  • 00:39:53
    will'll just say this do contents is
  • 00:39:56
    equals to an empt array so we'll start
  • 00:39:58
    off with an empty array and as we use
  • 00:40:00
    this class we'll fill in this uh
  • 00:40:03
    contents array which is going to be the
  • 00:40:05
    actual storage system the storage uh
  • 00:40:08
    container now we're going to have two
  • 00:40:10
    functions inside of this we're going to
  • 00:40:11
    have an added item function which is
  • 00:40:14
    going to add something to this contents
  • 00:40:16
    array and there's going to be a get item
  • 00:40:18
    function which as you might know we we
  • 00:40:21
    get an
  • 00:40:23
    item now we're using this generic type
  • 00:40:26
    because we don't want want to make this
  • 00:40:28
    be just for Strings or for numbers so
  • 00:40:31
    over here inside of this we'll have an
  • 00:40:34
    item as an arguments so the item we
  • 00:40:36
    would add and instead of putting string
  • 00:40:38
    or number We'll add the T and like you
  • 00:40:41
    might expect this will return void
  • 00:40:43
    because the whole point of this function
  • 00:40:44
    is just to um push something to the end
  • 00:40:47
    of the contents
  • 00:40:49
    array right now this get item will have
  • 00:40:54
    an argument which is going to be the
  • 00:40:55
    index for uh which item in our storage
  • 00:40:59
    we want to get so it will be a number
  • 00:41:01
    and it needs to return back either the
  • 00:41:04
    item itself or nothing or undefined
  • 00:41:08
    because uh maybe it will actually not
  • 00:41:11
    find that item now instead of get item
  • 00:41:14
    let's just
  • 00:41:16
    return uh this do contents and then
  • 00:41:19
    return the item inside of the index
  • 00:41:22
    right so this is our very simple storage
  • 00:41:25
    container now this is where you guys
  • 00:41:28
    start understanding the power of
  • 00:41:30
    generics which is we can actually make
  • 00:41:32
    multiple different uh instances of this
  • 00:41:35
    class for example we can make one for uh
  • 00:41:39
    usern names
  • 00:41:42
    right and say new storage container now
  • 00:41:47
    usernames is a string right it's going
  • 00:41:49
    to be a string so we Define what type is
  • 00:41:53
    going to fill in for this T over here
  • 00:41:55
    this generic by passing it over here so
  • 00:41:58
    I'm going to say string and this would
  • 00:42:01
    generate a version of this an instance
  • 00:42:03
    of this class where we can uh add an
  • 00:42:08
    item like Pedro tag and then uh probably
  • 00:42:13
    add something else as well I'm going to
  • 00:42:15
    add one more uh P tag uh Echo BR um and
  • 00:42:22
    then I'm going to say usernames do get
  • 00:42:25
    item and you'll see that if I try to get
  • 00:42:27
    the first item this should
  • 00:42:31
    return the correct information uh it
  • 00:42:35
    doesn't oh we have to print this out
  • 00:42:36
    sorry about
  • 00:42:38
    that um
  • 00:42:41
    console.log and then print this
  • 00:42:45
    out perfect uh you see Pedro Tech so
  • 00:42:48
    that worked right now we can also make
  • 00:42:52
    uh another instance of this which isn't
  • 00:42:55
    with strings it's actually with numbers
  • 00:42:58
    so I can come over here and I can say
  • 00:42:59
    number and this is actually age of no
  • 00:43:03
    actually age is not a good example
  • 00:43:05
    maybe uh I don't know
  • 00:43:08
    friends count let's imagine that this
  • 00:43:12
    stores for each item the array it stores
  • 00:43:14
    the amount of friends a user might have
  • 00:43:17
    so instead of adding strings over here
  • 00:43:19
    we can add numbers we can add 23 we can
  • 00:43:22
    add 56 or 678 and obviously we have to
  • 00:43:26
    pass this in
  • 00:43:27
    and you'll see that the type definition
  • 00:43:29
    actually worked right um it doesn't it
  • 00:43:32
    didn't allow me when it was usernames
  • 00:43:34
    because username is a string storage
  • 00:43:36
    container but when I change it to the
  • 00:43:38
    number one it works and if I print out
  • 00:43:41
    both you'll see that both work uh sorry
  • 00:43:46
    did I
  • 00:43:47
    actually yeah I'm still returning
  • 00:43:51
    usernames um let's try again and yeah it
  • 00:43:54
    works so generics are meant for this are
  • 00:43:57
    meant for uh basically reusing some sort
  • 00:44:01
    of class or object um that can have
  • 00:44:04
    multiple different data types as
  • 00:44:06
    arguments to the data that is present in
  • 00:44:08
    that class and making different versions
  • 00:44:11
    of it you should see it in every single
  • 00:44:13
    library that you use if you use it in re
  • 00:44:15
    a react Library if you use a View
  • 00:44:17
    Library if you use a angular Library all
  • 00:44:20
    of them under the hood use stuff like
  • 00:44:23
    this now this is basically all of the
  • 00:44:25
    complicated topics the I left a like a
  • 00:44:28
    minor thing that you should see should
  • 00:44:30
    understand to the end uh but it's also
  • 00:44:32
    pretty easy to understand uh because you
  • 00:44:35
    you will see this when you're working
  • 00:44:36
    with typescript um however it's not that
  • 00:44:40
    important so I left it for L which is
  • 00:44:42
    the idea of uh readon variables so uh if
  • 00:44:46
    you were to create an interface for
  • 00:44:48
    example for an
  • 00:44:49
    employee um just like this uh we could
  • 00:44:53
    Define some properties for it right we
  • 00:44:55
    could Define that this employee um could
  • 00:44:59
    have a name like a string uh and a
  • 00:45:03
    department which is also a string I
  • 00:45:05
    don't know but also it has some fields
  • 00:45:08
    that they shouldn't be altered because
  • 00:45:11
    they are inherently not mutable they're
  • 00:45:14
    strings that are defined once and should
  • 00:45:18
    never change for example uh employee ID
  • 00:45:21
    right technically you shouldn't be able
  • 00:45:23
    to change the ID maybe you do but I
  • 00:45:25
    don't think you should a better example
  • 00:45:27
    would be a start date right uh a user
  • 00:45:30
    can't have a can't change their start
  • 00:45:31
    date after they started that's a a
  • 00:45:34
    predetermined thing which by the way I
  • 00:45:36
    don't think I mentioned but you can use
  • 00:45:37
    the date type for dates um now how do I
  • 00:45:41
    enforce that when I were to create here
  • 00:45:43
    an
  • 00:45:44
    employee uh and set it to equal to
  • 00:45:46
    employee over here and I were to uh
  • 00:45:49
    Define all of this stuff uh well
  • 00:45:53
    actually I need to put an equal sign so
  • 00:45:55
    let me Define an employee here
  • 00:45:57
    uh start date equals to new date I'll
  • 00:46:02
    just set it to right now um and then
  • 00:46:05
    name let's add it to
  • 00:46:08
    Pedro and Department let's set it to
  • 00:46:11
    finance right if I were to create this
  • 00:46:14
    employee I want to be able to change the
  • 00:46:17
    name field to Jessica imagine I change
  • 00:46:21
    my name to Jessica but I don't I want to
  • 00:46:25
    not be able to change my employee ID
  • 00:46:27
    right right now I can still do it
  • 00:46:29
    employee employee ID is equal to uh this
  • 00:46:35
    number and then if I were to print the
  • 00:46:38
    employee in the
  • 00:46:40
    end you should see that it actually
  • 00:46:42
    Alters everything
  • 00:46:44
    right as you can see however I want to
  • 00:46:47
    make uh both this and this field be read
  • 00:46:51
    only not mutable so by the name you
  • 00:46:53
    should see that I can add this read only
  • 00:46:56
    thing over here which actually allows
  • 00:46:58
    for that to happen and it gives us a red
  • 00:47:01
    squiggly line for the employee ID
  • 00:47:03
    meaning it doesn't actually allow me to
  • 00:47:06
    um mutate this it says that um cannot
  • 00:47:10
    assign employee ID uh cannot assign to
  • 00:47:13
    employ ID because it's a readon property
  • 00:47:14
    so I can remove this and I know that I
  • 00:47:16
    shouldn't be able to change that and now
  • 00:47:19
    you see that it actually fixes it so
  • 00:47:23
    yeah that's that's pretty much the last
  • 00:47:24
    thing I wanted to go over um I've made
  • 00:47:27
    typescript videos in the past um
  • 00:47:29
    especially videos related to specific
  • 00:47:31
    uses of typescript so I'm linking up
  • 00:47:34
    here a video I made on using typescript
  • 00:47:37
    for uh backend applications so like
  • 00:47:39
    setting up a typescript uh application
  • 00:47:42
    with Express and nodejs um if you're are
  • 00:47:45
    interested in that go check that out but
  • 00:47:47
    more importantly I've also made
  • 00:47:48
    extensive videos on using typescript
  • 00:47:50
    with react because I do think you if
  • 00:47:54
    you're going to be using react you have
  • 00:47:55
    to be using typescript I don't use it in
  • 00:47:57
    some of my videos to make it more
  • 00:47:59
    understandable for everyone even those
  • 00:48:01
    who don't know typescript but in the
  • 00:48:02
    real world you definitely need to use
  • 00:48:04
    typescript because type safety is one of
  • 00:48:06
    the most important things so that's
  • 00:48:09
    basically it I really hope you guys
  • 00:48:10
    enjoyed it if you enjoyed it please
  • 00:48:11
    leave a like down below and comment what
  • 00:48:13
    you want to see next subscribe because
  • 00:48:14
    I'm putting a lot of effort into this
  • 00:48:15
    channel um I came back I just hit
  • 00:48:18
    200,000 subs and I couldn't be more
  • 00:48:20
    grateful for everyone um and I'm really
  • 00:48:23
    motivated to post a lot of videos for
  • 00:48:25
    you guys so I'm interested to see in the
  • 00:48:27
    description or in the comments down
  • 00:48:28
    below uh what you guys want me to make
  • 00:48:30
    and yeah that's that's basically it
  • 00:48:32
    really hope you guys enjoyed it and I
  • 00:48:33
    see you guys next time
标签
  • TypeScript
  • JavaScript
  • Programming
  • Web Development
  • Tutorial
  • Static Typing
  • Interfaces
  • Enums
  • Generics
  • Node.js