TypeScript Intro

[00:00:00]
>> For this course, we will be using TypeScript instead of plain JavaScript. Now, TypeScript is becoming the tool of choice for any JavaScript developer who is interested in using modern tooling. Nowadays, most projects that I've worked on have been using TypeScript, or looking to move to TypeScript. So really, if you are going to be, writing React Native code for your job or for work, you're more than likely going to be using TypeScript in the end.

[00:00:26]
So if you never use TypeScript before, there's no time like the present to get stuck in. Just a note because of the way that React Native projects are set up, if you're not interested in learning TypeScript, you can simply opt out and just not use it on your project.

[00:00:41]
If you use TypeScript on the web before, you can build the web app using the TypeScript compiler, meaning that the app won't build if the whole script is wrong. But on React Native because we use in Metro Bundler and TypeScript is just adjacent, the Metro Bundler step will still work even if your TypeScript is wrong.

[00:01:00]
So if you're not interested in TypeScript, you can opt out of this. So what is TypeScript? TypeScript essentially typed JavaScript, and it is a superset of JavaScript, which means that all valid JavaScript code is also a valid TypeScript code, so it's like JavaScript, but you can option you have some extra stuff.

[00:01:17]
The TypeScript files, and React Native have TS and TSX file extension, so instead of JS and JSX. And TypeScript has two main points of views. So firstly it does static code analysis. So without you doing anything, so there's no types here, it analyzes your existing code and points out any incorrect usages when possible.

[00:01:41]
So for example, if you consider this code, so we have a const, my number, and I've assigned to 5. And if I try to call split on it, you actually get a TypeScript error on your editor. And you will see a property split does not exist on type 5.

[00:01:59]
And this is because TypeScript knows that this is a number, because I've literally just assigned to a constant. But split is an operation you can only do on a string. So it's going to tell me that you can't do that. Now, static code analysis isn't going to be enough for more complicated use cases.

[00:02:20]
So for that reason, you can also expand your JavaScript code with custom types. So for example, consider this add function, so it's just going to take A and B and add them together. So JavaScript does not type safe, there is really nothing preventing or even warning you, if instead of passing in numbers, you pass in strings or objects or function or literally anything.

[00:02:45]
And this could cause unintended side effects. So ideally you want other people to know, that you need to pass in two numbers without having to read the comments. So to do that, you can explicitly type these arguments and the return type. So here, and the way we do that, is we add a colon and the type.

[00:03:07]
So here we say that A is a number, and B is a number, and it also returns number. So now if I tried to call this add function with hello and world, you will get a warning in your code editor. And here's a tip for CI usage, so I usually add a Typescript check step on CI, so along with checking tests and linting.

[00:03:33]
And basically the way you do it is if you do use yarn, you can just use do yarn tsc. But if you use npm the best thing to do is add a script for ts:check that codes tsc. And then this will basically check for the TypeScript types in your codebase.