DEV Community

loading...

Why should your business be using TypeScript?

frontendexp
Mobile and Web development
Originally published at frontendexp.Medium on ・9 min read

If you are trying to figure out what is the best technology stack for your business or your team to use, you came to the right place!
Agenda
Why use TypeScript

  1. License
  2. Capabilities
  3. Why did developers introduce TypeScript?
  4. Reliability
  5. Where is typescript already being used?
  6. Typescript relevance in today’s web applications
  7. Releases
  8. Breaking Changes
  9. Dependencies and libraries
  10. Development tools
  11. Technology maintenance
  12. Releasing
  13. Hiring market Why use TypeScript? All browsers support JavaScript, being many times referred to as the language of the web. JavaScript is a multi-paradigm language, supporting event-driven, functional, and imperative (including object-oriented and prototype-based) programming types. Its best and worst feature is that it is a dynamically typed language, meaning that a variable can contain whatever value the programmer wants. TypeScript aims to solve this by introducing types, which will strictly define what a given variable can contain. Moreover, the programmer can structure the code better and can identify a lot of errors in advance.

License
Typescript is licensed under the Apache License 2.0 and is an open-source technology.
We can find the full document for this license here: https://www.apache.org/licenses/LICENSE-2.0
Capabilities
Everything that one can build using JavaScript can be built using TypeScript, as the latter is considered a superset of the first.
This means existing JavaScript programs are also valid TypeScript programs.
Typescript is a typed superset of JavaScript.
Typescript adds optional static typing to JavaScript language.
TypeScript may be used to develop JavaScript applications for both client-side and server-side execution (i.e. with Node.js).
Why did developers, introduce Typescript?
For better or for worse, JavaScript itself is a dynamically typed language. This means that its type checking happens at run-time.
This dynamic typing means that types of variables in the program are only known as it is being executed.
Typically, dynamic type checking results in less optimized code compared to static type checking. During execution, the program is more likely to encounter run-time type errors, whereas this may have already been caught at compile time by static type checking (this is what TypeScript introduces).
TypeScript provides static typing through type annotations to enable type checking at compile-time;
TypeScript allows the developer to give types to JavaScript variables. The developer must specify the type of a variable at compile time. TypeScript also offers type inference, which means that the type system is able to work out the type of a variable automatically.
Types have a proven ability to enhance code quality and understandability;
Types increase your agility when doing refactoring. It’s better for the compiler to catch errors than to have things fail at runtime;
Types make the code more readable. It helps the developer remember faster what each piece of code is supposed to do. Hence, the developer can add and change the current code faster;
One of the biggest advantages of TypeScript is its code completion and IntelliSense. IntelliSense provides active hints as a code is added.
Clean code. Static typing is a feature that allows developers to detect bugs as they write the scripts. This means we can write more robust code and maintain it, resulting in better, cleaner code.
Better testing. With Dependency Injection, testing becomes easy. You can mock test services with the same interfaces as the real ones. Your code won’t know the difference, and you can perform a full suite of scenarios to get full coverage.
TypeScript is becoming a critical option for organizations that want to develop large coding projects. It keeps the code clean, scalable, consistent, and simpler to debug.
Reliability
“JavaScript was invented by Brendan Eich in 1995 and became an ECMA standard in 1997.
ECMAScript is the official name of the language.
ECMAScript versions have been abbreviated to ES1, ES2, ES3, ES5, and ES6.
From 2015 ECMAScript is named by year (ECMAScript 2015).” https://www.w3schools.com/js/js_versions.asp
ES6, also known as ECMAScript 6, ECMA6, and ECMAScript 2015, was the second major revision to JavaScript since the first edition was released in 1997 because of all the major additions.
There were so many great features added to help JavaScript developers that include:
new keywords like let and const to declare variables
new function syntax using Arrow functions,
creation of Classes,
parameters with default values,
promises for asynchronous actions, and many more!
TypeScript, the superset of JavaScript, has appeared for the first time on 1 October 2012, 8 years ago.
Where is typescript already being used?
“Since Typescript is a JavaScript extension, there is no single template. Instead, other projects have their own skeletons to start with TypeScript, according to each context. These projects provide basic frameworks that include support for Typescript.” source: Typescriptlang.org
This is but only some of the web frameworks that have their own customized typescript template skeleton, but there are many more.
And even outside of the web frameworks, you have other frameworks like backend, cross-platform, desktop, mobile applications, and others, to see some famous examples you can check the same source of the image.
What does this mean? Most frameworks are ready to build a completely new project from scratch with typescript.
An entire application can be built only with typescript. Meaning even the backend can be a Typescript framework. NestJS, “a progressive Node.js framework for building efficient, reliable and scalable server-side applications”, allowing you to have the same coding language across your entire application both in frontend and backend.
Typescript relevance in today’s web applications
IMPORTANT: When reading the survey results, be aware that JavaScript was first launched in the late ’90s, therefore there is no possible direct comparison with the adoption/use of Typescript, which was launched in 2012. What is undeniable is that Typescript has been growing consistently since it was launched.
We can see the announcement here: https://devblogs.microsoft.com/typescript/announcing-typescript-1-0/
and all the announcements Microsoft has published here: https://devblogs.microsoft.com/typescript/
Typescript was first announced in 2014 and has been growing in popularity (most used/adopted technologies) since then. Proof of this, is the impressive increase in popularity, from an already impressive 17.4% in stack-overflow-survey-2018 into 21.2% in the stack-overflow survey-2019 and finally 25.4% in the stack-overflow-survey-2020.
Another survey conducted by stateofjs.com lead to the following results: Survey results in 2019.
As we can see Typescript use is only growing.
The Software House also conducted a survey on the state of frontend and produced the following report: State of Frontend 2020 Report by the Software House where we can see that the most positive results are indeed for TypeScript above all else.
For interactive charts access here: State of Frontend Survey by The Software House
When looking for evidence of TypeScript success in today’s web applications development, we can look at some recognizable companies leading the way using TypeScript for their own applications.
Google themselves fully implemented their programming language Angular with Typescript by default.
But many others have adopted this layer of technology in their scaled applications including:
Asana
Accenture
CircleCI
Avocode
Slack
Where can I look up for projects that showcase the use of Typescript?
AwesomeOpenSource
NetGuru (Gmail, Youtube TV, XBox Live, Deutsche Bank Developer Portal, Santander Banking Application, …)
Made With Angular
Releases
As we can easily check in the Official documentation Typescript is continuously improving and new releases are done in a quarterly cadence.
Breaking Changes
Every time a new version is launched, breaking changes can be (and most are) introduced.
This is done in a predictable and well-documented manner. This is valid for breaking changes documentation and for API-breaking-changes also.
There are no evidence, up until the latest version of Typescript (version 4), of major breaking changes between versions. Meaning those ones make it difficult for a team of developers to keep updating the code for the latest version. It’s convenient for our code to be up to date with the latest changes so that we can access the latest features that are being introduced. Mainly because JavaScript evolves and Typescript, being a superset of this one, has to evolve alongside it. This is important, because we, as a company, want to be able to evolve with it, recurring to the less possible effort.
Dependencies and libraries
In a JavaScript or Typescript project, you will have to install the dependencies, which will generate a very famous folder called “node_modules”.
This is a folder that can easily reach hundreds of megabytes in size, hence the joke on the image below.
For example:
A brand new create-react-app project comes with 237MB of node_modules at the time of this writing.
This folder is where all the packages are stored which makes them available to use through your application wherever you need it, by for example using a require(“packagename”) to load its main module, or require(“packagename/lib/path/to/sub/module”) to load other modules.
In JavaScript projects, there is a file called “package.json” where the dependencies are declared for that project and you can easily see what libraries are being used here.
Development Tools
“Because TypeScript is a superset of JavaScript, it doesn’t have a default template — there would be too many. Instead, other projects have their own TypeScript bootstrap templates with their own context.
These projects provide templates that include TypeScript support”
from https://www.typescriptlang.org/docs/bootstrap
Many projects nowadays provide templates for typescript support as the usefulness of this technology is very well known, considering this, below you can find some of the popular projects that support typescript:
Node with NPM: TSDX, oclif, Gluegun
Web Frameworks: Angular, Ember, React, Vue, Ruby on Rails, ASP.NET Core
Node APIs: Azure Functions, Nest JS, GraphQL, Fastify, …
React Projects: Create React App, Gatsby, Nest.js, Razzle..
Building Apps: Electron, React Native, NativeScript …
Tooling: Babel, Webpack
Technology maintenance
TypeScript is maintained by Microsoft, licensed under Apache 2 license.
As we can easily check in the Official documentation Typescript is continuously improving and new releases are done in a quarterly cadence.
Typescript has a very active community, as we can see on this page related to community tools for questions, suggestions, and collaboration overall.
On this GitHub page, we can see a collection of issues currently being addressed by the community.
Hiring market
The popularity of JavaScript is undeniable. Is the most popular web language and one of the most popular programming languages overall.
According to Stack Overflow’s 2019 Developer Survey, JavaScript is the most popular language among developers for the seventh year in a row.
Nearly 70 percent of survey respondents reported that they had used JavaScript in the past year.
The Software House (tsh.io) conducted a study that has the participation of 4500 frontend developers. Taking a look into the Typescript popularity amongst developers, this software-house-survey clearly shows that Typescript acceptance is very high.
Pull requests on Github
You can also check the grown popularity of TypeScript by looking at the pull requests made on Github. As you can see on the image below, JavaScript is still quite popular but has been decreasing since the beginning of 2017 while TypeScript has steadily increase throughout the years (the exception is the last quarter of 2020, where both decreased a little bit).
Source: https://madnight.github.io/githut/#/pull_requests/2020/4
The Downsides of Typescript
Not real statical typing: Types are only checked at compile time and removed from the generated code.
Steep Learning curve: Although Typescript is a superset, there is a considerable learning curve.
More code: developers have to write and maintain more code.
Bloated code: Working with types, interfaces and generics can lead to over-engineered code bases.
On the learning aspect, it is fairly easy for JS developers to learn TS. However, despite this similarity, they still need to invest time and effort in learning types and some TS-specific constructs.
About the bloated code, it enhances code readability brought by syntactic sugar and types annotations but it comes with some risks:
Developers have to write more code and this has the potential of slowing down the development process.
Additional annotations make TS files larger than those written in plain JS.
The difference in the number of code lines depends on numerous factors.
The good thing is that all these extra features will disappear after being transpiled. In the end, the browser will execute the plain JavaScript.
We know this is extra code, may be more work in the beginning of a project but it pays off later in the mid development phase.
The transpiling step needs to exist because browsers can’t interpret the TypeScript code, so you need to transpile it to JavaScript before running.
However, this process is highly automated and doesn’t require significantly extra time.
All considered, the downside of this step is far less significant than its benefits:
The compiler spots flaws and flags them before they can cause any damage.

Discussion (0)