Transcript from the "TypeScript Intro" Lesson
[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: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: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.