Things You Should Know About TypeScript

Most people get confused when they hear they have to have knowledge in Typescript before they can be able to use a particular framework or work on a particular project.

Here in this article, I will explain the things you need to know about Typescript and how you can get started. Table of Contents

What is Typescript?

  1. What is Typescript?

  2. What can Typescript be used for?

  3. Difference between Typescript and Javascript.

  4. Is it a front end or back end language?

  5. When is Typescript needed?

  6. Advantages and disadvantages of Typescript.

  7. How to get started.

What is Typescript?

TypeScript is an open-source programming language developed and maintained by Microsoft which was first made public in October 2012 (at version 0.8), after two years of internal development at Microsoft. It is a super set of JavaScript and contains all of its elements.

Typescript was developed to make JavaScript code simplified, easier to read and debug. It also provides highly productive development tools for JavaScript IDEs which provide a richer environment for spotting common errors as you type your codes and practices, like static checking i.e knowing the type of a variable at compile-time instead of at run-time.

function add(left: number, right: number): number {
    return left + right;
}

It does not only make javascript easier but also adds new features plus advantages to it.

What can Typescript be used for?

TypeScript is designed for development of large applications and trans compiles to JavaScript. It can be used to develop JavaScript applications for both client-side and server-side execution (as with Node.js or Deno).

Difference between Typescript and Javascript

  • Typescript is a super-set of JavaScript whereas JavaScript is a scripting language which helps you create interactive web pages.
  • Typescript uses concepts like types and interfaces to describe data being used for binding the data at code level whereas there is no such concept that has been introduced in Javascript.
  • Typescript allows Errors be found and corrected during compile time whereas in JavaScript Errors can be found only during run-time as it is an interpreted language.
  • Typescript allows Strongly typed, supports both static and dynamic typing whereas JavaScript is Weakly typed, no option for static typing.
  • Typescript is a powerful type system, including generics & JS features for large size projects whereas JavaScript is an ideal option for small size projects.
  • Typescript code needs to be compiled while JavaScript code doesn’t need to compile.

Is it useful as a front end or back end language?

We have known that Typescript is a super-set of JavaScript, It's not language-independent and we can use JavaScript for both front end and also at our back end.

Since it’s a super language of JavaScript, it can be used wherever JavaScript is used i.e in the front-end for building client-side apps that run in the web browsers or in the back-end with Node.js. Some e.g of front-end frameworks that use TypeScript: Angular, React, Vue-Js, etc. For the back-end, we have NodeJS (express framework).

TypeScript gives you a better structure or implementation on your project with static typing in all JavaScript framework. TypeScript works with JavaScript whether for front-end or back-end development.

When is Typescript needed?

  1. When you have a large codebase: When your codebase is huge, and more than one person works on the project, a type system can help you avoid a lot of common errors. This is especially true for single-page applications.

  2. When a library or framework recommends TypeScript: this is true if you're using Angular as your front end framework. Just know that even though TypeScript can use all JavaScript libraries/frameworks out of the box, if you want good syntax errors, you’ll need to add the type definitions for those libraries externally.

4.When you really feel the need for speed: TypeScript code can in some situations perform better than JavaScript, how ? In our JavaScript code, we had a lot of type checks, so even a small error could be literally fatal if it wasn’t dealt with properly. So a lot of functions had statements like:

if(typeof name !== ‘string) throw ‘Name should be string

With TypeScript, we could eliminate a lot of these type checks all together.

This especially showed its effect in parts of the code where we previously had a performance bottleneck, because we were able to skip a lot of unnecessary run-time type checking.

  1. Lack of Unit Tests:it's not always possible to have tests for everything, if you don't have Unit Tests, the next best thing you could have is compile-time checking with TypeScript.The good thing is that unit tests can be written in any language- so the argument for TypeScript here is irrelevant. What's important is that tests are written and we are confident about our code.

Advantages and disadvantages of typescript

Advantages

  1. TypeScript always points out the compilation errors at the time of development only. Because of this at the run-time the chance of getting errors are very less whereas JavaScript is an interpreted language.

  2. TypeScript has a feature which is strongly-typed or supports static typing. That means Static typing allows for checking type correctness at compile time. This is not available in JavaScript.

  3. TS helps in code structuring.

  4. TS has a namespace concept by defining a module.

  5. Type annotations can be optional.

  6. TS has better documentation for APIs which is in sync with a source code.

Disadvantage

1.TypeScript is nothing but JavaScript and some additional features i.e. ES6 features. It may not be supported in your target browser but TypeScript compiler can compile the .ts files into ES3,ES4 and ES5 also.

  1. TS takes a long time to compile the code.

  2. TS doesn’t support abstract classes.

  3. False sense of security: In my opinion, the greatest disadvantage of TypeScript is that it can bring you a false sense of security. Yes, it’s a huge benefit that the language can check types for us and warn us when there’s something wrong with our code. However, relying on this too heavily comes with a significant risk: some developers tend to think that anything they write in TypeScript is 100% bulletproof. It’s not.

  4. TS is not fully co expressive with JS. Missing features include: HOFs, Composition, Generics with Higher Kind Types, etc.

Get started with TypeScript

If you want to learn or get started with Typescript for either a project you wish to work on or you want to learn how typescript works, here are guideline to follow:

Search for documentation on typescript and follow it as it is laid out. There is a lot of documentation out there on typescript, but I strongly recommend you learning a language from the developers/maintainers and in the case of typescript is Microsoft.

Here is the link to their documentation for easy access: https://www.typescriptlang.org

Here are list of other documentation on typescript:

  1. Search for video tutorials. Many of us prefer videos to documentation the same as myself. Don't forget that a video might not be detailed as a documentation will be, that is why I strongly advise you use both.

For videos tutorial on typescript apart from the bootcamp courses from either Udemy or Pluralsight, I strongly recommend Academind.

Its a 3hrs 16mins and 39sec videos tutorial, it is broken into sections with topics matching each break making it easier for you to stop and continue later. Here is the link to the tutorial: TypeScript Course for Beginners 2020 - Learn TypeScript from Scratch! https://www.youtube.com/watch?v=BwuLxPH8IDs&feature=youtu.be

  1. Practice all you have learnt. Start by using typescript to work on small projects and also follow by writing your own code as your watching or reading from the documentation.

Now that we know the inspiration behind TypeScript and the various advantages it provides to build large scale applications, it's time to make our code error free.

If you find this article userful do like and you do follow me on twitter for updates @jj_shula

No Comments Yet