Some nice new features are coming to TypeScript

 

npm for type definition files

One of the things that annoyed me was the tsd tool for installing type definition files.

Why can’t I just use npm, for installing type definition files. I use npm for installing external libraries en tooling so why not type definition files.

 

Well they are working on just that, kudos to the TypeScript thing.

 

Non nullable types

An other thing is non nullable types, I certainly want to have that in TypeScript.

It will be possible to tell the compiler, a certain variable is a string and not null or undefined. But you can also write: const x : string | null which means, x is a string or null but not undefined.

 

Down level async await support

TypeScript code which uses async await can target ES5

 

http://video.ch9.ms/ch9/4ae3/062c336d-9cf0-498f-ae9a-582b87954ae3/B881_mid.mp4

How to convert a function definition as string to code in JavaScript

 

Just a snippet for converting a function as string to code:

image

 

Code

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″ />
    <meta http-equiv=”x-ua-compatible” content=”ie=edge”>
    <title>Research</title>
    <meta name=”description” content=”A page to quickly spike some code or styling.”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <link rel=”icon” href=”data:;base64,iVBORw0KGgo=”>   
    <style>
       
    </style>
</head>
<body>
    <script>
        // Define a function as a string.
        // Don’t forget the “(” and the “)” arround the function.
        // See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
        var functionAsString = “(function(a, b){ return a + b; })”;

        // Convert a string containing a function definition to a real function.
        var fn = eval(functionAsString);

        // Execute the created function.
        var result = fn(1, 2);

        // Log result is: 3
        console.log(result);
    </script>
</body>
</html>

Developer Anarchy, made possible by C-level buy-in and Micro Services.

A very great podcast on developer anarchy: http://www.se-radio.net/2016/03/se-radio-episode-253-fred-george-on-developer-anarchy/

As Fred George explains, developer anarchy will work in environments, where you have C-Level Buy-In and can have rapid feedback.

So you better not try it on the mars lander project Smile.

It envies self-directed teams, fast deployment, rapid feedback, small components / services and business knowledge by the developers.

CSS modules

 

A great article on css modules: http://glenmaddern.com/articles/css-modules

This allows css to be imported and used in JavaScript.

A great fit for web components and can be easily used in frameworks like Aurelia, Angular, React etc.

Example

CSS

Create a *.css file called submit-button.css  with content:
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */

 

JavaScript

Then use the css in your JavaScript like:

import styles from ‘./submit-button.css’;

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

 

HTML (result)

<button class=”components_submit_button__normal__abc5436″> Processing… </button>

 

Under the covers it uses ICSS, more on ICSS: http://glenmaddern.com/articles/interoperable-css