25 JavaScript tools
CODE QUALITY
Above When it compiles, TypeScript can target any version of JavaScript required for each projectTypeScript
typescriptlang.org
A common issue for new
JavaScript developers is its
dynamic typing system. A
variable type can be inferred
at runtime but will have no restriction as
to what type it can be in the future.
Dynamic typing can be useful in
creating patterns, but how useful that
is depends on the project. TypeScript
aims to bring a declarative style of
programming by typing variables where
developers feel it makes sense.<pre>
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person):string {
return `Hello ${person.firstName} ${person.
lastName}`;
}
</pre>
Type annotations appear where
a variable is defined. With objects,
interfaces define the structure of an
object and the type becomes a reference
to that interface. These can be extended
to create easily customised objects.<pre>
function logger(target : any, name : String) {
console.log(`${name} evaluated`);
}
class Greeter {
@logger
greet() {
return `Hello, ${this.greeting}`;
}
}
</pre>TypeScript uses experimental JavaScript
syntax as part of its system. Decorators,
for example, are functions that apply
themselves to a class, method or property
that provide repeatable functionality.
These can save duplication in a project.
It also compiles existing syntax such as
classes, modules and arrow functions into
valid ES3 or ES5. This can be customised
to the browsers targeted within each
project. When browsers can natively
support these features, TypeScript can
be instructed to keep them, making the
resulting code perform better.
TypeScript is a superset of JavaScript, so
provides benefits to the language without
changing its structure. As a result, any
JavaScript is valid TypeScript and any of
its features used are completely optional.ESLint
eslint.org
Linting is a type of static
code analysis that can be
performed on a project to
check for any script that is
likely to break or does not match the
preferred style for the project. ESLint can
check JavaScript for common mistakes, in
addition to following popular pre-defined
sets of rules from companies such as
Google and Airbnb.Prettier
prettier.io
Much like ESLint, Prettier is
able to identify formatting
quirks. It also goes one step
further and will
automatically update the offending lines
on the developer’s behalf. While it is not
as customisable, Prettier is more aware of
surrounding contexts and will only apply
formatting where it makes sense. It can
also support other formats like JSX.Travi s CI
travis-ci.org
Travis CI is a continuous
integration (CI) tool. It
monitors GitHub branches
for any new commits and
will run tests against it to make sure
nothing was broken in the process. It can
then deploy the change or notify the
team about any issues. Travis CI is free
for use with open-source projects, where
consistency is important.JSDoc
usejsdoc.org
When writing complex
modules, it can be a difficult
task to remember how
everything works. With
JSDoc, methods can have special code
that describes what they do, any
parameters they expect and the sort of
thing they can return. This can then be
processed to create documentation or
enable editors like VS Code to provide
hints in context to developers.