On Thursday, 4th of June, I started out on a mission to learn typescript. I spent a morning reading an amazing Typescript resource and then the afternoon and evening building programs.
What is Typescript?
Here is a list of other features and advantages by DZone:
Why Should We Use TypeScript?
- TypeScript is open source.
- TypeScript makes code easier to read and understand.
- TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus more productivity.
- Powerful type system, including generics.
- Structural, rather than nominal.
- TypeScript code can be compiled as per ES5 and ES6 standards to support the latest browser.
- Aligned with ECMAScript for compatibility.
- Supports static typing.
- TypeScript will save developers time.
- TypeScript is a superset of ES3, ES5, and ES6.
Additional Features of TypeScript
- Functions with optional parameters.
- Functions with REST parameters.
- Generics support.
- Modules support.
Typescript has the basic types like integer, string, boolean, array etc. but also has some other types that I had never heard of before, maybe you haven’t either like never and enum. Any is also a type and this basically allows for the type to be anything. I highly suggest reading through this documentation on basic types in typescript.
The way you specify a type is like this:
When you get more complicated types like arrays, there are two different ways of doing it. These two examples are both specifying the same thing.
You can also use the or sign to specify it could either be two different types. This is specifying the type can either be an object or null.
Lastly, check out the section on assertion in the document I suggested above.
For typescript, as far as I know, you have three different types of files. Your .ts files which are usual typescript files, your .tsx files which are files that you insert JSX in and is mainly used for React typescript files and lastly .d.ts which are your global files, this is where you will save things like custom types that can be used throughout the program.
Check out my type file for a quiz program I wrote as an example with custom types.
If you are using react .tsx files, you should only use these on presentation files and use ts on other files.
You also get your tsconfig.json file which is used for compilation. Check out this documentation on tsconfig for a really good overview of what can go in this file.
According to TutorialsPoint:
“An interface is a syntactical contract that an entity should conform to. In other words, an interface defines the syntax that any entity must adhere to.
Interfaces define properties, methods, and events, which are the members of the interface. Interfaces contain only the declaration of the members. It is the responsibility of the deriving class to define the members. It often helps in providing a standard structure that the deriving classes would follow.”
I definitely have not been utilising interfaces 100% in the programs I have written. As I was using interfaces to declare the types of props that were being passed to the component. I definitely want to learn more about interfaces but to this point, that is how I have been using interfaces.
Notice how Question and NextQuestion types were declared in the types file as they were used in multiple places. You can also check out this explanation in Building React Components in Typescript by Matt Ferderer for a good explanation of FC and other React component types.
Using these different concepts and a short ToDo list youtube tutorial https://www.youtube.com/watch?v=ODvirqIC09A, I was able to build a quiz app from scratch using typescript which I am really proud of. All this research, and building the two programs I did within a day, besides styling. So if you put your mind to learning something, it really does not take long to learn the basics. I am going to be doing a few more typescript blogs and programs like specifically oop blog and a more advance typescript blog.
These are the first two programs I wrote in typescript: