TypeScript and Null: corollary

TL;TR

Since in TypeScript all types are nullable, there are some traps the developer can fall into like unterminated functions.

The domain

As it turned out from my previous post, in TypeScript every type is nullable: this means that for every type null and undefined are valid values.
Not to mention the notorious any, which fits any type well.

The problem

Going a bit further we can easily realise that given a function (string) => number like

function countCharacters(name: string): number {
    if (name) {
        return name.length;
    }
}

the compiler will not complain about it even if actually my function is returning (number | undefined).

And a block which is using that function like, for instance

const names: Array<string> = ["Doc", "Grumpy", "Sleepy", null, undefined]; // yes, it’s fine for TS
let i: number;
let total = 0;
for (i = 0; i < names.length; i += 1) {
    total += countCharacters(names[i]);
}
console.log(total);

will end up with NaN as a result: the names array is accepted with both null and undefined, and since the function countCharacters is implicitly allowed to return undefined our code is applying the operator + to different types which results in NaN.

The bottom line

Nonetheless seems impossible to check against such errors as of 1.8, because for TypeScript this is not a problem but rather a feature: thanks to type nullability it is compiling even against legacy codebases and moreover allows the average developer to write code before thinking.

There are some proposals to fix it like a compiler’s options or an identifier but as of today we can only use run time assertions, a strict linter and force our fellows to read Douglas Crockford.

One good alternative is to switch over Flow.

Advertisements
TypeScript and Null: corollary

A video posted by @magdaazab on Feb 16, 2016 at 10:34pm PST

//platform.instagram.com/en_US/embeds.js

magdaazab:

Now you know what happened! Through this super #funny video that we made for #valentine’s day and #infinity tv! Illustration by me, art direction and animation by Milan based studio #uramaki _______________________________________
Per chi era curioso di sapere cosa fosse successo! Questo è il video che abbiamo realizzato per #infinity tv in occasione di San Valentino! Io ho realizzato le illustrazioni e lo studio Uramaki ha curato l’animazione e l’art direction. #animation #illustration #motiongraphic #love #valentine #inspiration #illustrationoftheday #fail #graphicdesign #creative #illo #video #bestoftheday #visualart #illustrationartist

Video

TypeScript and null

TL;TR

In TypeScript all types are nullable: the compiler won’t catch common pitfalls and your type system will blow up.

The domain

As you know, TypeScript allows us to explicitly declare the type of variables and parameters defining interfaces or using the built in types (string, number, boolean…).

So you may feel confident that writing such a function:

function double(n: number): number {
    return n * 2;
}

other developers will always call it with a number.

The following calls, for example, are marked as an error by the compiler:

double("one"); // Argument of type 'boolean' is not assignable to parameter of type 'number'
double(true); // Argument of type 'boolean' is not assignable to parameter of type 'number'
double({}); // Argument of type '{}' is not assignable to parameter of type 'number'

which makes totally sense.

The problem

But what if someone calls it with a value which is undefined or null?

double(undefined); // what?!
double(null); // O_O

I’m sure (I hope) no one will call it intentionally, but what about this case:

interface Bounds {
    min: number;
    max: number;
}
var bounds: Bounds;
bounds.min = 0;    
// do stuff and forget about 'bounds' after three lines of code
double(bounds.min); // good
double(bounds.max); // good as well even if it is undefined

The last call is ok for the compiler, but with result in the worst behaviour possible: actually double(undefined) won’t fail at runtime, because for JS undefined * number = NaN.

So you’ll get a nice NaN going around your application which probably (if you are lucky) will cause a run time exception.

Bottom line

Don’t rely too much on the compiler when working with TypeScript and force your fellows to perform runtime assertions.

TypeScript and null

Linux Olivia 15 – apt-get – Not found [IP: 91.189.91.14 80]

Hi there, this morning I came across this very annoying message from my linux Mint (Olivia 15):

Err http://archive.ubuntu.com raring-updates/universe i386 Packages 404 Not Found [IP: 91.189.91.14 80] Err http://archive.ubuntu.com raring-updates/multiverse i386 Packages 404 Not Found [IP: 91.189.91.14 80] Fetched 163 kB in 23s (6838 B/s) W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/main/binary-amd64/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/restricted/binary-amd64/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/universe/binary-amd64/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/multiverse/binary-amd64/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/main/binary-i386/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/restricted/binary-i386/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/universe/binary-i386/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/multiverse/binary-i386/Packages 404 Not Found [IP: 91.189.92.201 80]

So… after a while I’ve found that this is probably caused from Raring Ringtail (13.04) becoming EOL!

I’ve opened Synaptic, and then I’ve disabled old raring* repos.
The problem is that while trying to add new repositories, it suddenly crashed leaving me alone with a worse problem: apt-get stopped working at all.

Then, the solution:

sudo nano /etc/apt/sources.list

mine looked like: 
# deb http://archive.getdeb.net/ubuntu/ raring-getdeb ap ps games 

# deb http://repository.spotify.com/ stable non-fre e 

I’ve added: 
deb http://archive.ubuntu.com/ubuntu/ precise main restricted universe multiverse 

It works like a charm!

Cheers,
pietro
Linux Olivia 15 – apt-get – Not found [IP: 91.189.91.14 80]

Responsive web layouts based on Flexbox Model


Hi all,
I’m going to publish a small layouts collection: they’re based on the stunning forthcoming Flexible Box layout model so… take it like an experiment!

https://pietro909.github.io/responsive_flex_layouts/1
As of today I’ve put the first layout, very standard setup for a web application: header, footer, zoom and scoll locked, a main section and the aside.
I’m trying to adhere as much as I can to the rules of semantic html because I strongly believe that this is going to become a standard and I love it.
I just cannot see divs and lot of classes as of 2014, and I’m lucky enough to have the power to force my customers to not use some bad products.
I’ve choosen to not support old or bad browsers.

So, before you get angry:

  1. check your browser’s support
  2. update it… it’s free.
  3. change it… it’s free as well.

Enjoy the example:  first layout.
Download the full repo from Github!
 
For this work I’m using my own Less mixins:

https://gist.github.com/pietro909/8053521.js








Responsive web layouts based on Flexbox Model