The Importance of Static Typing in Angular

Angular is the first major front-end framework to incorporate TypeScript. 0:00 While you may enjoy the flexibility of a dynamically-typed 0:05 language such as JavaScript, you're likely to have experienced moments where 0:08 third-party libraries didn't work as documented and 0:12 maybe that's because you passed in the wrong values into a method call. 0:16 This is precisely why Angular is built on TypeScript. 0:19 The documentation is right there at your fingertips when you're developing, 0:23 keeping you in the editor. 0:27 TypeScript is a type superset of JavaScript and 0:29 it has all the same features and syntax of JavaScript so that you 0:33 don't need to learn something new but it includes static typing for added safety. 0:36 In addition, TypeScript allows you to write in ECMAScript 2015 syntax and 0:42 have it transpiled to all the versions of the language for greater browser support. 0:47 If we head over to typescriptlang.org and click on the Playground button, 0:52 we can write some TypeScript and compare it with transpiled JavaScript. 0:58 Let's go ahead and write a Greeter class with a greet method. 1:04 The greet method takes a single parameter name. 1:11 Let's log out this name with console.log. 1:16 Hi, name. 1:25 Finally, let's create an instance of the greeter. 1:30 And then, call the greet method With the string Jim. 1:38 This is a valid JavaScript class and there's nothing here that's specific 1:52 to TypeScript, yet, it's also valid TypeScript. 1:56 Because I didn't provide any types to the greet method, 2:00 I can't be certain that the value passed in will be a string. 2:03 I'd like to enforce that rule so that function works as expected. 2:08 If I add a bit of metadata to the function's signature, 2:12 I can prevent the caller from passing in a number or the type. 2:16 If I change Jim to 5, 2:22 We'll see an indicator telling us that there's a problem with our code. 2:26 If I hover over the code, I'll see what the problem is. 2:30 That the argument name cannot be a number but it has to be a string. 2:34 This is the Typescript language service, 2:38 interpreting our code at design time not when our application runs, pretty neat. 2:41 TypeScript is baked into every Angular application. 2:45 And provided you're using an editor that supports TypeScript, 2:49 you can reap the benefits of intelligent warnings and error detection. 2:53 We'll be using Visual Studio Code going forward. 2:57 Visual Studio Code supports TypeScript out of the box, 3:01 you can download it at code.visualstudio.com. 3:05 If an Angular API changes between versions, 3:09 we'll get immediate feedback from within our editor. 3:12 Throughout this course, 3:16 I'll be sure to explain any TypeScript's specific features or syntax we encounter. 3:17 Another benefit of using TypeScript is that we can leverage intelligent 3:22 code completion. 3:26 I'll write a function that takes two premises called rollCall. 3:28 It's going to lock the first names to the console. 3:34 The two parameters are students and max. 3:38 I want to log only the first names for the max number of students. 3:43 If max isn't defined, it'll default to the total length of the array. 3:48 Since I haven't defined students as an array, I won't get any IntelliSense. 3:59 IntelliSense is a common term used for referring to intelligent code completion. 4:06 To enable IntelliSense for the student's parameter, 4:11 I need to define it as an array type. 4:14 An array type has the square brackets at the end. 4:18 Now, when I assign the attendance variable, 4:21 I will type students and as soon as I press the ., 4:31 I'll have more options available to me. 4:35 In this case, I want the slice method. 4:40 As I start typing, TypeScript filters the options according to what I've entered. 4:43 Once I have the slice method selected, I'll press Tab. 4:48 The slice method takes two parameters, both are optional. 4:52 You can tell they're optional by the question mark in the type definition. 4:56 If we pass in undefined as the first parameter, we're specifying 5:00 that the slice method will use the default value for that parameter. 5:05 For the second parameter, we'll pass in the max parameter so 5:10 that we'll log out as many students as we specified in max. 5:14 Right now, the max parameter is of type any 5:24 Which is the default type of TypeScript. 5:30 I'll set this to number So 5:33 we can assure that it will never be assigned to an incompatible type. 5:38 If I try and assign a string to the max parameter, Typescript will report 5:45 an error in the editor by placing a red squiggly line beneath the code. 5:50 We can't assign a string to the variable max since it's defined as a number 5:55 in the function declaration. 6:00 Let me change max back. 6:02 This is one way Typescript helps you write better code. 6:04 If I call the rollCall function now, I'll see some IntelliSense that shows 6:08 what the signature of the function looks like and what parameters are required. 6:14 Let's type in an array of names, Jack and Jill. 6:19 And, if we don't provide the function with a max parameter, we'll get an error. 6:26 The developer calling the roleCall function doesn't necessarily know 6:32 there's a default value for max, the length of the array. 6:36 To convey that the max parameter is optional, we can add a question 6:40 mark to the type definition like this after the parameter name. 6:45 Now we can use the function with or without setting the max parameter. 6:51 TypeScript provides a lot more features than I can show off in this course. 6:55 I encourage you to play around in the TypeScript playground and 6:59 read the tools documentation. 7:02 I've included some resources in the teacher's notes. 7:05 For any features of TypeScript we'll use in this course, 7:08 I'll discuss them as we use them. 7:11