JavaScript is not (arguably) suitable for large complex applications, so the idea behind an additional script was to make it a complementary language that can be “scalable.” However, as Kyle Simpson put it in one of his famous keynotes at the JavaScript conference when addressing issues with TypeScript was that ‘TypeScript solves problems most of us don’t really have in the ways we don’t really like.’ Nevertheless, TypeScript is a nice addition to the ecosystem, but there’s still a cost to TypeScript because you choosing to ‘marry yourself to something that will never make its way into JavaScript because it limits your future possibilities’. TypeScript is a nice addition to JavaScript, but is it really a stand-alone technology? This and other questions, we’re going to address in this article.
What is TypeScript?
TypeScript is a superset of JavaScript, a statically compiled language to write simple JavaScript code. TypeScript provides optional static typing, classes, and interface, and is thought to have better code structuring and object-oriented programming techniques. TypeScript also allows for better development time tool support and can extend the language beyond the standard decorators. Moreover, it can be converted to plain JavaScript, of course.
Getting yourself up and running: TypeScript intro and features
There are two ways you can start using TypeScript: you can get TypeScript tools either via npm or by installing TypeScript’s Visual Studio plugins (in case you’re using Visual Studio 2017, then TypeScript is there by default). For npm, use this: > npm install -g typescript For everything else: download it here.
The main TypeScript features are:
- TypeScript supports JavaScript libraries
- You can convert any JavaScript file to TypeScript by changing the extension from .js to .ts and compile with other TypeScript files
- TypeScript can be run in any environment that supports JavaScript
- TypeScript can be used to manipulate DOM for adding or removing elements similar as of JavaScript
- Although the name differs, TypeScript is essentially JavaScript, because the code is written in TypeScript and then compiled and converted into its JavaScript equivalent.
Differences between TypeScript and Flow
The thing with TypeScript is that you can really achieve all those things that TypeScript is good for with Flow for JavaScript. Flow and TypeScript are very similar products, however, there are important differences.
One of the main problems with Flow is in IDE integrations. Language server is a work in progress, some IDEs, for example, use the CLI and require saving the file to run the type-check, refactoring is still in alpha version, only type information on hover, and sketchy go-to definition. As opposed to that, TypeScript IDE is really top-notch: language server, refactorings are built-in, type and typedoc information on hover, and snappy go-to-definition.
The other differences are in autocomplete, which in TS feels almost instantaneous and reliable, whereas, in Flow, you often have to wait for a second or more of a delay.
Some of the unique features of TypeScript are autocomplete for object construction, declarable this in functions, a large library of typings, more flexible type mapping via iteration, and namespacing. Flow has variance, testing potential code-paths when types are not declared for maximum inference, $Diff<A, B> type.
Among other differences: in TS there’s support for legacy proposal and for extending built-in types, however no support for nullish coalescing proposal; in Flow, however, only parsing of legacy proposal and no type-checking, no support for extending built-in types, but support for nullish coalescing proposal.
Difference in syntax:
JavaScript
function checkArgsAndDoStaff(arg1, arg2, arg3) {
if (typeof arg1 !== 'string' || typeof arg1 !== 'boolean') {
throw new Error('arg1 is not assignable to parameter of type string | boolean');
}
if (typeof arg2 !== 'object') {
throw new Error('arg2 must be an object');
}
if (typeof arg2.a !== 'string') {
throw new Error('arg2 must be a string');
}
if (! b in arg2) {
throw new Error('property b is missing in arg2');
}
// do staff
}
// we need to check whether the result of checkArgsAndDoSomeStaff is boolean
// and errors will be received during runtime
TypeScript
function checkArgsAndDoStaff(arg1: string | boolean, arg2: { a: string, b: unknown } ): boolean {
// do some staff
}
// Flow
function checkArgsAndDoStaff(arg1: string | boolean, arg2: { a: string, b: mixed } ): boolean {
// do some staff
}
Advantages of TypeScript as compared to JavaScript
- TypeScript highlights errors at compilation time whereas JavaScript – at the runtime
- TypeScript provides the benefits of optional static typing: TS types can be added to variables, functions, properties, etc
- TS supports strongly typed or static typing. Static typing can be very useful to help document functions, clarify usage, and reduce cognitive overhead (interface type hints and catching potential errors in real-time programming)
- TS runs in any browser or JS engine
- Great tooling with IntelliSense which provides active hints as the code’s added
- TS helps in code structuring
- TS has a namespace concept by defining a module
- Type annotations can be optional
- TS supports interfaces
- TS’s editor plugins provide one of the best IDE developer experience
- TS has better documentation for APIs which is in sync with a source code
- Some companies report a reduction in bugs as soon as they switch to TS
Disadvantages of TypeScript as compared to JavaScript
- TS takes a long time to compile the code
- TS doesn’t support abstract classes
- When using a third party library, there needs to be a definition file, and sometimes it’s not always available
- Quality of type definition files is a concern
- Whenever TypeScript needs to run in a browser, there must still be a compilation step to transform TS to JS
- Recruiting TS developers might be a pain in the neck, because some of the developers are not interested in learning TS, being perfectly comfortable with using JS. Teams that already use JS, become productive with TS after about 2-3 months, and fluent in TS only after about half a year. So educating staff can also be a hurdle
- TS is not fully coexpressive with JS. Missing features include: HOFs, Composition, Generics with Higher Kinded Types, etc
Conclusion:
Next time, we’ll be covering TypeScript interview questions, meanwhile, please see — for JavaScript Interview Questions: JS Interview Part 1, Part 2, Part 3
