Learning Typescript in a day

Amy Ann Franz
Jun 7, 2020 · 5 min read

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?

Typescript is a superset of Javascript, which means Typescript is an extension of Javascript. Typescript allows the dynamically typed language Javascript to add a strongly type declarative structure to the program meaning you have to specify things like the const is a string, it also allows for classes in Typescript. When you run a Typescript file it then compiles into Javascript.

https://www.dunebook.com/typescript-vs-javascript-why-typescript-is-next-to-big-thing/

Why Typescript?

The two main reasons I came across for using typescript is that you can now do oop in Javascript due to the introduction of classes in Typescript (you can sort of do oop in plain JS but it is much more difficult) and it is much easier to read and predict code due to the declarative type feature in Typescript.

Here is a list of other features and advantages by DZone:

  • TypeScript simplifies JavaScript code, making it easier to read and debug.
  • TypeScript is open source.
  • TypeScript provides highly productive development tools for JavaScript IDEs and practices, like static checking.
  • TypeScript makes code easier to read and understand.
  • With TypeScript, we can make a huge improvement over plain JavaScript.
  • TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus more productivity.
  • TypeScript can help us to avoid painful bugs that developers commonly run into when writing JavaScript by type checking the code.
  • Powerful type system, including generics.
  • TypeScript is nothing but JavaScript with some additional features.
  • 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.
  • Starts and ends with JavaScript.
  • Supports static typing.
  • TypeScript will save developers time.
  • TypeScript is a superset of ES3, ES5, and ES6.

  • Functions with optional parameters.
  • Functions with REST parameters.
  • Generics support.
  • Modules support.

Typescript Types

Typescript has the basic types like , , , etc. but also has some other types that I had never heard of before, maybe you haven’t either like and . 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.

File Structure

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.

Interfaces

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:

https://amy-franz-quizapp.netlify.app

https://amy-franz-todolist.netlify.app

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Amy Ann Franz

Written by

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Amy Ann Franz

Written by

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store