small medium large xlarge

Generic-user-small
21 Nov 2017, 12:03
Laura (47 posts)

Hi David, I could not find typescript version of the code in ZIP file.

You mentioned in the book: “In fact, we’ll write all of our code in .ts files to make that transition easier. The downloadable code for the book includes a version translated into TypeScript if you are curious to learn it after you’ve gone through everything in JavaScript.”

regards

Laura

Dmfcb_pragsmall
21 Nov 2017, 13:24
David Copeland (487 posts)

It’s in code/13_dig-deeper/20-typescript

Generic-user-small
21 Nov 2017, 15:49
Laura (47 posts)

thank you. I know it is not your favorite subject, but, for a JS developer it would be very easy to learn TS when for someone who does not know both learning JS is a waste of time. TS looks much more logical for an old programmer like me. Should I wait for a third edition? :)

cheers

Dmfcb_pragsmall
21 Nov 2017, 16:17
David Copeland (487 posts)

TS is a superscript of JS, so all the examples in the book are technical typescript, and the book has you set up the typescript toolchain and write code in .ts files. That said, when the book was started this was not the case. Even still, TypeScript is a debt you will continue to pay, and will create problems for you and your team. It’s all a tradeoff.

And the third edition will likely be React if it happens at all :)

Generic-user-small
22 Nov 2017, 11:56
Laura (47 posts)

David,

this is in theory. in practice the script from the book will not compile:


ERROR in ./app/javascript/packs/customers.ts
[tsl] ERROR in /home/ubuntu/workspace/myf/app/javascript/packs/customers.ts(99,4)
      TS2339: Property 'class' does not exist on type 'TypeDecorator'.

ERROR in ./app/javascript/packs/customers.ts
[tsl] ERROR in /home/ubuntu/workspace/myf/app/javascript/packs/customers.ts(131,2)
      TS2339: Property 'class' does not exist on type 'TypeDecorator'.
/***
 * Excerpted from "Rails, Angular, Postgres, and Bootstrap, Second Edition",
 * published by The Pragmatic Bookshelf.
 * Copyrights apply to this code. It may not be used to create training material,
 * courses, books, articles, and the like. Contact us if you are in doubt.
 * We make no guarantees that this code is fit for any purpose.
 * Visit http://www.pragmaticprogrammer.com/titles/dcbang2 for more book information.
***/
import "hello_angular/polyfills";

import { Component, NgModule    } from "@angular/core";
import { BrowserModule          } from "@angular/platform-browser";
import { FormsModule            } from "@angular/forms";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { Http,HttpModule        } from "@angular/http";

var RESULTS = [
  {
    first_name: "Pat",
    last_name: "Smith",
    username: "psmith",
    email: "pat.smith@somewhere.net",
    created_at: "2016-02-05",  
  },
  {
    first_name: "Patrick",
    last_name: "Jones",
    username: "pjpj",
    email: "jones.p@business.net",
    created_at: "2014-03-05",  
  },
  {
    first_name: "Patricia",
    last_name: "Benjamin",
    username: "pattyb",
    email: "benjie@aol.info",
    created_at: "2016-01-02",  
  },
  {
    first_name: "Patty",
    last_name: "Patrickson",
    username: "ppat",
    email: "pppp@freemail.computer",
    created_at: "2016-02-05",  
  },
  {
    first_name: "Jane",
    last_name: "Patrick",
    username: "janesays",
    email: "janep@company.net",
    created_at: "2013-01-05",  
  },
];



var CustomerSearchComponent = Component({
  selector: "shine-customer-search",
  template: '\
<header> \
  <h1 class="h2">Customer Search</h1> \
</header> \
<section class="search-form"> \
  <form> \
    <div class="input-group input-group-lg"> \
      <label for="keywords" class="sr-only">Keywords></label> \
      <input type="text" id="keywords" name="keywords" \
             placeholder="First Name, Last Name, or Email Address"\
             class="form-control input-lg" \
             bindon-ngModel="keywords"> \
      <span class="input-group-btn"> \
        <input type="submit" value="Find Customers"\
         class="btn btn-primary btn-lg" \
         on-click="search()"> \
      </span> \
    </div> \
  </form> \
</section> \
<section class="search-results"> \
  <header> \
    <h1 class="h3">Results</h1> \
  </header> \
  <ol class="list-group"> \
    <li *ngFor="let customer of customers" \
      class="list-group-item clearfix"> \
      <h3 class="pull-right"> \
        <small class="text-uppercase">Joined</small> \
        {{customer.created_at}} \
      </h3> \
      <h2 class="h3"> \
        {{customer.first_name}} {{customer.last_name}} \
        <small>{{customer.username}}</small> \
      </h2> \
      <h4>{{customer.email}}</h4> \
    </li> \
  </ol> \
</section> \
  '
}).Class({
  constructor: [
    Http,
    function(http) {
      this.customers = null;
      this.http      = http;
      this.keywords  = "";
    }
  ],
  search: function() {
    var self = this;                                // (1)
    self.http.get(                                  // (2)
      "/customers.json?keywords=" + self.keywords   // (3)
    ).subscribe(
      function(response) {                          // (4)
        self.customers = response.json().customers; // (5)
      },
      function(response) {                          // (6)
        window.alert(response);
      }
    );
  }
});

var CustomerAppModule = NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpModule ],
  declarations: [ CustomerSearchComponent ],
  bootstrap:    [ CustomerSearchComponent ]
})
.Class({
  constructor: function() {}
});

platformBrowserDynamic().bootstrapModule(CustomerAppModule);

Laura

Dmfcb_pragsmall
22 Nov 2017, 12:46
David Copeland (487 posts)

Hm. This all worked at the time the book was published (the book won’t publish if the tests don’t pass). Can you try again using the yarn.lock and Gemfile.lock that are in there and let me know if that changes things? Other readers were reporting that Angular 5 broke something and I haven’t had time to look into it.

Generic-user-small
22 Nov 2017, 15:14
Laura (47 posts)

Hi David, you may want to look at this:

https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd18

I decided to implement your ideas using typescript:

class CustomerSearchComponent {
  customers;
  keywords: string;
  http: Http;

   constructor( http: Http) {
     this.http      = http;
     }
   
   search() {
   this.http.get("/customers.json?keywords=" + this.keywords) 
        .subscribe( 
          data => this.customers = data.json().customers, 
          err => console.log(err) );                                
     }
  }

as you can see, it is so much simpler than JS.

Generic-user-small
08 Dec 2017, 00:23
Matthew Welke (4 posts)

This is a very strange way to go. I’m surprised the author didn’t see that TypeScript was the future with Angular (I’m pretty sure they strongly inferred that when the book was started). It’s been polished a lot and embraced by tons of developers, not just for Angular. At this point, using JS for Angular is going very against the grain.

I was looking forward to reading this book when it was released, but I don’t think it’s usable in this form.

Dmfcb_pragsmall
09 Dec 2017, 03:46
David Copeland (487 posts)

The Angular team was adamant from the start of 2.0 that both Dart and JS would receive first-class support, and in a book where the reader will learn many things already, the publisher and I decided to do the Angular stuff in JavaScript. The Angular team never really made good on that promise, but it is not that hard to follow along the JS examples. The toolchain you set up in the book will work with TypeScript, and in my experience, setting up the toolchain is harder than learning the language. Fortunately, Webpacker came out during the book’s writing and made that easy to explain in a reliable way.

That all being said, this is not a book solely about Angular—it’s about many other things, too. By the end there are only 300 lines of JavaScript in the entire thing. If you want to learn how to use Angular, Postgres, and Bootstrap together easily, and really also want to learn TypeScript at the same time, you should not have a rough time doing so.

Generic-user-small
14 Dec 2017, 15:39
Laura (47 posts)

I can confirm that the toolchain works. Nevertheless transpiling JS to TypeScript is not easy and I would be happier to see typescript in samples too. I found that Typescript final version is not very useful because it is not exactly looks like Typescript i have learnt from Pluralsight course…

Laura

Generic-user-small
15 Dec 2017, 07:18
Matthew Welke (4 posts)

David,

That argument makes sense. I apologize for not being more informed about the history of JS and TS with Angular. I wasn’t aware that they bailed on a promise to support JS and Dart. It’s unfortunate that in this situation, you’re the one left holding the bag. I should make it clear that I’m thankful for the work you put into the book. Thank you!

You must be logged in to comment