Definitelytyped: @types/angular throwing IScope errors

[rissicay]

I tried using the @types/angular package and had problems.
I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript

The new version of @types/angular throws errors when adding properties to $scope variable.

error TS2339: Property 'changeTab' does not exist on type 'IScope'.

Is there a way to fix this? I'm assuming this is a bug??

[TomSeldon]

Hi @rissicay,

I've just run into the same issue. It's related to a breaking change published in the latest patch version (!) of types/angular, that was released about 14hrs ago.

The change is that you can no longer specify arbitrary keys on ng.IScope (https://github.com/DefinitelyTyped/DefinitelyTyped/commit/2cde2fb1edb6952211f4b555583810c106dadb94).

Good news is that it's an easy fix.

Where you're currently using ng.IScope, instead create a new interface that extends scope to use in your component/directive/whatever.

e.g.

// before
function (scope: ng.IScope) {
  scope.changeTab(); // type error
}

interface MyDirectiveScope extends ng.IScope {
  changeTab: any; // replace any with actual type
}

function (scope: MyDirectiveScope) {
  scope.changeTab(); // all is right with the world again
}

[rissicay]

Was this released as a patch or a minor in the version bump? Can't find the releases on npm =s

This is a pretty big change for legacy angular apps.

[TomSeldon]

npm view @types/angular shows this was a patch release from 1.6.26 to 1.6.27.

     '1.6.25': '2017-06-29T14:49:08.248Z',
     '1.6.26': '2017-07-12T21:17:02.859Z',
     '1.6.27': '2017-07-18T19:27:00.407Z'

I've never actually checked @types follows semantic versioning, I just assumed that was the case. Realistically this seems like it should have been a major release (as it's a breaking change).

Edit: Unless, of course, specifying arbitrary keys on scope was considered a bug (where the correct behaviour would be to extend, as in my example above).

[rissicay]

I also assumed it was following semantic versioning.

I hope the core contributors consider following semantic versioning eventually. It is a major pain having your CI/CD environments all fail while making test/production builds because of a patch bump, but then it can be argued the versions in the package.json should of been fixed versions.

As for the scope change, I personally am against it, for the simple fact that a lot of people on angular 1 are there because of large legacy code bases. I realize that modern angular js, everything is a component now, but the road to code base completely updated is long... oh so very long.

[TomSeldon]

Same. It's hard to be angry when at least 50% of the problem is due to not locking down dependencies properly. Though, upgrading to a patch release obviously shouldn't cause breaking changes.

[pablorsk]

Quick solution: lock @types/angular version

npm install @types/[email protected] --save-dev

Now, your package.json show this:

"@types/angular": "1.6.26",

The problem is solved, but plain to do "Improve your code"

Best solution: Improve your code

See oficial documentation about angularjs scope. If you like see the discussion about this change, check this issue.

[jesuslpm]

Another solution is module augmentation.
Add a new d.ts file to your project with the following content:

import { IRootScopeService } from 'angular';

declare module 'angular' {
    interface IRootScopeService {
        [key: string]: any;
    }
}