v1.1.3 feedback

[toranb]

Chris (and Community) - Thank you for the huge amount of effort that you've poured into this wonderful project! I've found the blog post series to be a tremendous help and know how much time it takes to grow a community like this! Please keep up the great work! Thank you 100x !!!

As someone who had success with ember-cli-typescript v1.0.3 last year, I threw together an example this morning w/ ember 3 and ember-cli-typescript v1.1.3 to see what challenges I might bump into using ember and typescript in 2018.

1) how can I inform ember-cli-typescript about a non default ember directory?

Example: app/reducers/index.ts

My reducer file works as plain javascript but after I rename it to typescript it doesn't appear to transpile correctly for some odd reason (note: from a cold boot). This is the named AMD module I see in browser after a build (meaning the file is not completely skipped/omitted - instead it just isn't complete).

define('examplee/reducers/index', ['exports', 'ember-redux/reducers/index'], function (exports, _index) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  Object.defineProperty(exports, 'default', {
    enumerable: true,
    get: function () {
      return _index.default;
    }
  });
});

In the early days of the project (v1.0.3) I had something like include["**/*.ts"] in my tsconfig file and any TS file I added would be picked up/transpiled no problem. I realize today the tsconfig differs greatly from how I used it back then so I'm reaching out for help :)

2) strict mode & the noisy ember @types

In the example app (tsconfig) I put together I'm using strict mode. When I turn this on I get a good deal of compiler output like you see below. I realize the (ember) types are still evolving to support this and that's cool ;) what I'm after w/ this point is "how can I hide/ignore/not show this" to keep focused on my app failures, issues. Is this something I could workaround with a configuration of some kind (tsconfig) ?

node_modules/@types/ember/index.d.ts(2111,15): error TS2417: Class static side 'typeof TextField' incorrectly extends base class static side 'Readonly<typeof Component>'.
  Types of property 'prototype' are incompatible.
    Type 'TextField' is not assignable to type 'Component'.
      Types of property 'addObserver' are incompatible.

update fixed w/ a simple tsconfig option

3) supporting both TS + JS compile/incremental builds

To better support adoption I assume a world in which some files are TS and some are JS is part of the plan. Today if my component is TS but my reducer is JS (the only option because of bug 1^ above) if I alter the reducer .... the compiler hangs with the message.

I'm using node v8.9.4 and the entire project can be found at the url below. I realize Chris is preparing for EmberConf training so absolutely no rush here :) just wanted to pass over a few issues that anyone from the ember redux side of our community would bump into if they pulled this in today.

https://github.com/toranb/example-typescript-latest

[chriskrycho]

Thanks for the detailed feedback! Sometime next week one of us will hopefully be able to go after the compilation issue. Briefly, though:

1. Should work. Not sure what the issue is; but just to check… what version of TS do you have installed locally (and, if any globally, globally)? There's an issue with 2.7.1 that should be resolved in 2.7.2 that looks a lot like this.

2. You can't use strict: true yet; our types specifically don't work with the strictFunctionTypes option (though I believe you can enable all the other strictness settings). This is just a limitation of trying to capture the crazily-dynamic Ember Object model with the limitations of TS.

3. No idea. This should work. Like I said: someone will poke at it over the next week.

Thanks!

[chriskrycho]

Oh, also: can you see what the behavior is on 2.18 vs. 3.0? Want to confirm that this isn't an issue with 3.0 vs. 2.18.

[toranb]

Ah good call - let me spin up an ember-cli v2.18.2 app later today and see how it works :)

Regarding your previous ask -

1) running typescript 2.7.2 (local not global) w/ yarn 2) adding strictFunctionTypes w/ false is a solid workaround! Just tried it with success!!! 3) more on this later after I spin up another ember-cli app

Thanks for the quick reply @chriskrycho

[toranb]

Just reporting back - I did ember new with ember-cli v2.18.2, ember v2.18, typescript v2.7.2 (using node v8.9.4) and got the same issues mentioned above (excluding the strict mode problem -I fixed that using "strictFunctionTypes": false as mentioned above)

https://github.com/toranb/example-typescript-218

note: again no immediate rush here @chriskrycho

[vlascik]

I think I'm having a same/similar problem as in 2. while trying to use fetch instead of jquery in ember-data:

import AdapterFetch, {serializeQueryParams} from 'ember-fetch/mixins/adapter-fetch';

export default class Application extends DS.JSONAPIAdapter.extend(AdapterFetch, {}) {

leads to:

app/application/adapter.ts(14,22): error TS2417: Class static side 'typeof Application' incorrectly extends base class static side 'Readonly<typeof JSONAPIAdapter>'.
  Types of property 'prototype' are incompatible.
    Type 'Application' is not assignable to type 'JSONAPIAdapter'.
      Property 'coalesceFindRequests' is missing in type 'Application'.

Not using strict, adding "strictFunctionTypes": false didn't help either.

[chriskrycho]

Thanks to both of you for the further notes.

The adapter issue is a problem with the type defs for mixins and is unrelated (similar appearance notwithstanding). It’s a good place for a judicious use of // @ts-ignore for today.

[dwickern]

We've had other reports of that TS2417 error related to mixins. If someone could provide a reproduction that would help a lot

[vlascik]

@dwickern https://github.com/vlascik/repro-typescript-ts2417 . It's basically just ember new, ember install ember-cli-typescript ember-fetch with one file added, app/adapters/application.ts, and typings in node_modules/ember-fetch/index.d.ts customized like this: https://gist.github.com/vlascik/dc9eb527bfde26277c874f35b2a15d8a

[dfreeman]

@toranb I cloned your repo and poked around a bit:

Re: 3, I wasn't able to reproduce this issue locally. If I change app/reducers/index.js to e.g. increment by 2 instead of 1, I immediately see a rebuild and livereload with the new behavior. Can you confirm what OS you're on? Running with DEBUG=ember-cli-typescript:* may also provide some useful output for debugging.

Re: 1, I think the issue is that the default reducer implementation from ember-redux is shadowing the one from your own app. This is a side effect of how we're currently exposing the compiled TS to the build process, and it came up in the Slack channel today—that's the next thing I'm planning on investigating tonight.

[toranb]

@dfreeman You are spot on about the shadowing issue :) and PR #132 solved it!

Regarding the first issue ... here is a screen shot w/ the extra DEBUG param when I alter the JS file and it hangs. This is using macOS 10.13.3, node v8.9.4, yarn 1.3.2

You are correct about this being related to my env because when I spun up the example app using centOS w/ docker the JS file would rebuild without issue. For now I say we ignore this as its extremely low on the priority list and nothing you guys can reproduce anyway :)

I'm happy to close this out when you guys publish the next release

[dfreeman]

Oddly, I'm on exactly the same macOS, Node and Yarn versions as you... ¯\_(ツ)_/¯ I guess we'll just need to keep an eye out for this if anybody else runs into it.

[toranb]

After upgrading to v1.1.5 all is well! Thanks again for all the help!