DailyJS

DailyJS

The JavaScript blog.


Tagtypescript
Featured

angular typescript

Angular 2 and TypeScript, Comparing Angular 1.x and 2.0

Posted on .

Angular 2 is Built on TypeScript

There's a post on the msdn blog that says Angular 2.0 is built with TypeScript. This is a big step, but there is a precedent for it -- an earlier Angular blog post mentioned the AtScript project that resulted in a collaboration between Microsoft and the Angular team.

This partnership has been very productive and rewarding experience for us, and as part of this collaboration, we're happy to announce that Angular 2 will now be built with TypeScript. We're looking forward to seeing what people will be able to do with these new tools and continuing to work with the Angular team to improve the experience for Angular developers.

Now AtScript development has been abandoned in favour of TypeScript, what does this mean for Angular developers? There's a TodoMVC TypeScript Angular 2.0 example project on GitHub, which uses JavaScript for the main code. To use it, you'll need to download the new Angular 2.0 code separately.

Hopefully this shift will result in a more future-proof Angular, but it's hard to tell if switching to TypeScript now is a good idea, given the interest in ES6 and ES7.

Comparing Angular 1.x and 2.0

In case you're excited/worried/apathetic about the previous news, Shawn McKay sent in a post that compares angular 2.0 with 1.x:

Angular 2.0 looks fantastic. It's not ready yet, but you can play around with it today. Checkout the GitHub for more. There are also some examples available, such as ng2do.

The post explains how to set up Angular 2.0 and outlines the major new features. If you're also working with React, then you might want to read more about the new DOM handling:

"2.0: In many ways, Angular 2.0 seems to handle DOM style manipulation with something similar to React.js's virtual DOM, which they referred to in a recent presentation as the "view". In response to a recent question about 'Angular Native?', Misko mentioned that this View could be run on a web worker or even potentially on native."

Featured

libraries node modules typescript react

JSX-TypeScript, Reapp

Posted on .

JSX-TypeScript

JSX-TypeScript (GitHub: fdecampredon/jsx-typescript, License: Apache 2.0, npm: jsx-typescript) by Fran├žois de Campredon is a fork of TypeScript that allows you to use React's JSX syntax. There's a port of the TodoMVC that uses JSX-TypeScript that shows how it works. The app.ts file, for example, has fragments of JSX in a render method, just like a typical React application.

Because React seems influenced by some of the trends in the modern .NET world, the marriage of TypeScript and React seems like an obvious move, and it may appeal to people who like React but would like to try TypeScript.

Reapp

Reapp

Reapp (GitHub: reapp/reapp, License: MIT, npm: reapp) is a new React-based UI toolkit for making mobile applications that feel more like native apps. It uses ES6 modules, and comes with a command-line tool for managing projects, so you can create a quick test app without too much trouble.

The authors say it isn't a framework, but it does come with a set of modules that makes React and ES6 more accessible:

What we found was this: if you can subscribe so a certain file structure, you can avoid the framework. With that file structure, we can provide helpers via a CLI. Bootstrap your app in one command and you have a mature build system built in, without having to do anything.

The project's features and future goals are a good mix of web and mobile technologies: it has a fast animation API, with support for themes, and React modules for things like routing. The mobile-style views and widgets remind me of UIView in iOS, in terms of API and look and feel. The UI documentation has an overview of the various widgets, including popovers, menus, and titlebars.

It's still billed as an alpha release, but I think Reapp seems like a very useful blend of UI components and React utilities that could be used for rapid mobile development.

Featured

typescript as3 parsers

From AS3 to TypeScript

Posted on .

If you've got existing ActionScript assets but want to migrate them to another language, what do you do? One possibility is to convert AS3 to TypeScript. They share similar language features, but are different enough that the process isn't trivial.

There's a project called AS3toTypeScript by Richard Davey that runs through lots of simple replacements, like converting Boolean to bool. It's written in PHP and can be used with a web interface.

In From AS3 to TypeScript by Jesse Freeman, the author converts a game to TypeScript, which seems like a typical task for an ActionScript developer. He points out that TypeScript works well because of the Visual Studio support, so it makes sense if you're a Microsoft-based developer.

Fran├žois de Campredon recently sent me as3-to-typescript (License: Apache, npm: as3-to-typescript). This is a Node-based project that includes the AS3Parser from Adobe. That means the conversion process actually parses ActionScript and attempts to output syntactically correct TypeScript.

The tests are fairly minimal given the goals of the project, but they do show what the tool currently supports. I'm not particularly for or against ActionScript or TypeScript, but as3-to-typescript is a very interesting and useful combination of technologies that might help you find new life for old game code.

Featured

libraries testing typescript react google-maps

React Google Maps, TypeScript Tests

Posted on .

React Google Maps

React Google Maps

React Google Maps (GitHub: tomchentw/react-google-maps, License: MIT, Bower: react-google-maps, npm: react-google-maps) by Tom Chen is a React component for creating Google Maps. It has a mixin called GoogleMapsMixin that you can use to create React components for your own maps.

Tom has posted some examples that demonstrate things like click events and geolocation. These examples are based on Google's developer documentation so you can see how React compares to the original Google APIs.

TypeScript Data Structures and Tests

Adrien Cadet sent in some TypeScript projects: Ludivine, a TypeScript data structure library, and Oscar, a test harness.

Ludivine has a wiki that describes each of the interfaces and classes. For example, LinkedList inherits from several interfaces to implement a linked version of IList.

Oscar has a getting started guide that explains how to create tests and test suites:

class MyTestClass extends UnitTestClass {  
    firstTest() : void {
        // ... AAA stuff
    }

    secondTest() : void {
        // ... another AAA stuff
    }
}

This example is for testing a class called UnitTestClass. Each method that ends in Test will be run by the test suite runner.

Featured

libraries languages Microsoft typescript

TypeScript Log, Supplemental

Posted on .

This week on DailyJS every post is about TypeScript! This article is a roundup of interesting TypeScript libraries.

This is the end of TypeScript week on DailyJS. I've been going through my email archives looking for TypeScript-related things that people have sent in. Here is a selection! As always, please share anything TypeScript (or JavaScript) related with me by going to contact.dailyjs.com.

VCL.JS

VCL.JS (GitHub: vclteam / VCL.JS, License: Apache 2.0) is a component-based web framework. The built-in components are based on Bootstrap, so the UI code should be quite easy to work with if you've used Bootstrap before.

It has deep Visual Studio integration, so Microsoft developers should be able to get started quickly. It even supports data binding and AMD for client-side code.

EndGate

I'm intrigued by EndGate, a game framework for HTML5 games written in TypeScript. It has APIs for input, graphics, animations (tweening), and collision detection.

There's a tutorial that explains how to use collisions and tweens. It seems to focus on map-based 2D games, which usually work well in browsers anyway.

asyncawait

One of the big things in C# 5.0 was the async modifier and await operator. These keywords allow C# code to be asynchronous, without callbacks or delegate methods.

The asyncawait module for Node is inspired by this API. You can await asynchronous methods, so you get to use non-blocking APIs with synchronous convenience:

var foo = async (function() {  
    var resultA = await (firstAsyncCall());
    var resultB = await (secondAsyncCallUsing(resultA));
    var resultC = await (thirdAsyncCallUsing(resultB));
    return doSomethingWith(resultC);
});

This module is based on two great projects: node-fibers and bluebird, but it's written with TypeScript:

TypeScript: asyncawait is written in TypeScript (look in the src folder), and includes a type declaration file. TypeScript makes JavaScript development faster, less error-prone, more scaleable, and generally more pleasant.