Finally TypeScript

von Patrick BĂ©dat, 17. Juni 2016

I’ve started my life as a developer some 14 years ago with PHP. When I started my career as a profressional developer three years later, I got in touch with statically typed languages and it felt like a rebirth. Intellisense, code completion and all the other utilities multiplied my overall hacking performance.

I was a web developer from the very beginning and when AJAX hit the mainstream, I was again confronted with a dynamic language.
But this time it was different: This time I loved working with a dynamic language. I think it’s because you can get things working incredebly fast – no type definitions, no mapping no adaption required, and the heavy lifting logic resided on the statically typed server code.

I still love JavaScript and I still feel very productive when bending it to my will. But… problems arise, when other developers join in on a former solo project, or you have to debug/extend code, that is really old.

Hacking and Programming

My definition of hacking is:
To write a minimum amount of code with acceptable quality, that is required to fulfill a requirement. Acceptable means: Structured, decoupled and easy to refactor or replace.

When you write a lot of JavaScript this way, you are automatically building a noteable amount of technical debt. First and foremost, because it is not documented. A good JavaScript library is only as good as it’s documentation. Some might argue, that good code documents itself. Tell this your coworker, who was busy programming Delphi software for the desktop…

And programming…
is everything else above that (There’s a lot good lecture about software craftmanship and quality!)
In the case of JavaScript I think of using prototypes, manual type checking, a solid documentation, unit tests, …

But even when you program JavaScript professionally and disciplined, you don’t get the goodies of a statically typed language!

Epiphany

I always believed, that switching to a statically typed language, that compiles to JavaScript, would be damn awesome… when there would be tools, that support it. But whenever I thought about introducing it in the company, the argument, that JavaScript is just good enough and the effort to establish such a big change would cost too much, weighed more.

But then some events changed my mind:

  • I witnessed how hard it was for new team members to work with the existing code. Not being able to browse the code by reference or through code completion is a serious handicap (without docs)
  • I’ve successfully introduced es6. Everybody was suddenly able to write es5 and es6 code side by side. TypeScript is like a static version of es6.
  • Angular 2.0 was completely written in TypeScript
  • There is a official TypeScript Package for the Atom Editor

On a saturday I was commited to spend the evening with integrating TypeScript in a new module of a project. It didn’t even took me an hour. I was thrilled. Writing type safe code on the client side doesn’t only scale – it rocks!

Working with Atom

TypeScript has an official Atom Packge: apm install typescript

To setup your TypeScript environment you should create a tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) in the root of your project.

Mine looks like this:

{
"compileOnSave": false,
"compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true
    }
}

TypeScript allows you to go dynamic whenever you want. When you specify „noImplicitAny: true“ you have to type your dynamic with the „any“ type, which is useful, because in JavaScript you aren’t used to define types at all.

So I wrote a class:

Oh it feels so good 😀

So I want to integrate the service to my angular 1.x application. What? You say angular 1.x is not written in TypeScript? Embrace Typings!

atom2

You can write so called definition types in TypeScript, to program against typesafe interfaces of your untyped JavaScript sources. Typings is a package manager for TypeScript definitions!

Once installed (npm install -g typings) you can search for definitions (e.g. typings search jQuery) and install them (typings install –global jQuery –save-dev). This is how a definition file looks:

2016-06-17 16_10_30-Clipboard

Typings will save all the definitions in the „typings“ folder and persist your installed dependencies in a typings.json. All definitions are referenced in the typings/index.d.ts file, making them easily accessable in your code:

reference

Gulp Integration

I wanted the integration of TypeScript to be as smooth as possible. So sneaky, that other members of the team won’t even notice, that they are able to write TypeScript side by side with existing code.

This is the updated gulp task:

gulp

„ts“ refers to ts = require(„gulp-typescript“)

And that’s it basically.

Conclusion

I can’t wait to write more TypeScript. So many new opprtunities, like generating definitions from our RAML spec or from C# classes… The opportunity to upgrade our codebase to a whole new level of quality.

via GIPHY

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *