Merge pull request #1456 from daptiv/54952-use-new-tslint-rules

Update angular resource definitions, and add injector definition
This commit is contained in:
Basarat Ali Syed
2013-12-17 02:34:08 -08:00
4 changed files with 239 additions and 213 deletions
+139 -135
View File
@@ -43,11 +43,11 @@ To avoid cluttering the list of suggestions as you type in your IDE, all interfa
**ngMockE2E** does not define a new namespace, but rather modifies some of **ng**'s interfaces.
Bellow is an example of how to use the interfaces:
function MainController($scope: ng.IScope, $http: ng.IHttpService) {
// code assistance will now be available for $scope and $http
}
```ts
function MainController($scope: ng.IScope, $http: ng.IHttpService) {
// code assistance will now be available for $scope and $http
}
```
## Services and other injectables
@@ -71,156 +71,160 @@ The **$httpProvider**, thus, is defined by **ng.IHttpProvider**.
TypeScript allows for static checking. Among other obvious things, that means you're gonna have to extend interfaces when you need to augment an object whose interface has been defined, because otherwise the compiler will see it as an error to try to assign a value to a unspecified member.
Consider the following ordinary code:
function Controller($scope) {
$scope.$broadcast('myEvent');
$scope.title = 'Yabadabadu';
}
```ts
function Controller($scope) {
$scope.$broadcast('myEvent');
$scope.title = 'Yabadabadu';
}
```
That will not produce any compilation error because the compiler does not know the first thing about $scope to do any checking. For that same reason, you will not get any assistance either.
Now consider this:
function Controller($scope: ng.IScope) {
$scope.$broadcast('myEvent');
$scope.title = 'Yabadabadu';
}
```ts
function Controller($scope: ng.IScope) {
$scope.$broadcast('myEvent');
$scope.title = 'Yabadabadu';
}
```
Now we annotated `$scope` with the interface `ng.IScope`. The compiler now knows that, among other members, `$scope` has a method called `$broadcast`. That interface, however, does not define a `title` property. The compiler will complain about it.
Since you are augmenting the $scope object, you should let the compiler know what to expect then:
```ts
interface ICustomScope extends ng.IScope {
title: string;
}
interface ICustomScope extends ng.IScope {
title: string;
}
function Controller($scope: ng.ICustomScope) {
$scope.$broadcast('myEvent');
$scope.title = 'Yabadabadu';
}
function Controller($scope: ng.ICustomScope) {
$scope.$broadcast('myEvent');
$scope.title = 'Yabadabadu';
}
```
## Examples
### Working with $resource
```ts
/// <reference path="angular.d.ts" />
/// <reference path="angular-resource.d.ts" />
/// <reference path="angular.d.ts" />
/// <reference path="angular-resource.d.ts" />
// We have the option to define arguments for a custom resource
interface IArticleParameters {
id: number;
}
// We have the option to define arguments for a custom resource
interface IArticleParameters {
id: number;
interface IArticleResource extends ng.resource.IResource<IArticleResource> {
title: string;
text: string;
date: Date;
author: number;
// Although all actions defined on IArticleResourceClass are avaiable with
// the '$' prefix, we have the choice to expose only what we will use
$publish(): IArticleResource;
$unpublish(): IArticleResource;
}
// Let's define a custom resource
interface IArticleResourceClass extends ng.resource.IResourceClass<IArticleResource> {
// Overload get to accept our custom parameters
get(): ng.resource.IResource;
get(params: IArticleParameters, onSuccess: Function): IArticleResource;
// Add our custom resource actions
publish(): IArticleResource;
publish(params: IArticleParameters): IArticleResource;
unpublish(params: IArticleParameters): IArticleResource;
}
function MainController($resource: ng.resource.IResourceService) {
// IntelliSense will provide IActionDescriptor interface and will validate
// your assignment against it
var publishDescriptor: ng.resource.IActionDescriptor;
publishDescriptor = {
method: 'GET',
isArray: false
};
// I could still create a descriptor without the interface...
var unpublishDescriptor = {
method: 'POST'
}
// Let's define a custom resource
interface IArticleResourceClass extends ng.resource.IResourceClass {
// Overload get to accept our custom parameters
get(): ng.resource.IResource;
get(params: IArticleParameters, onSuccess: Function): IArticleResource;
// A call to the $resource service returns a IResourceClass. Since
// our own IArticleResourceClass defines 2 more actions, we cast the return
// value to make the compiler aware of that
var articleResource = $resource<IArticleResource, IArticleResourceClass>('/articles/:id', null, {
publish : publishDescriptor,
unpublish : unpublishDescriptor
});
// Add our custom resource actions
publish(): IArticleResource;
publish(params: IArticleParameters): IArticleResource;
unpublish(params: IArticleParameters): IArticleResource;
}
interface IArticleResource extends ng.resource.IResource {
title: string;
text: string;
date: Date;
author: number;
// Although all actions defined on IArticleResourceClass are avaiable with
// the '$' prefix, we have the choice to expose only what we will use
$publish(): IArticleResource;
$unpublish(): IArticleResource;
}
function MainController($resource: ng.resource.IResourceService) {
// IntelliSense will provide IActionDescriptor interface and will validate
// your assignment against it
var publishDescriptor: ng.resource.IActionDescriptor;
publishDescriptor = {
method: 'GET',
isArray: false
};
// I could still create a descriptor without the interface...
var unpublishDescriptor = {
method: 'POST'
}
// A call to the $resource service returns a IResourceClass. Since
// our own IArticleResourceClass defines 2 more actions, we cast the return
// value to make the compiler aware of that
var articleResource = <IArticleResourceClass> $resource('/articles/:id', null, {
publish : publishDescriptor,
unpublish : unpublishDescriptor
});
// Now we can do this
articleResource.unpublish({ id: 1 });
// IResourceClass.get() will be automatically available here
var article: IArticleResource = articleResource.get({id: 1}, function success() {
// Again, default + custom action here...
article.title = 'New Title';
article.$save();
article.$publish();
});
}
### Working with $resource in angular-1.0 definitions
/// <reference path="angular-1.0.d.ts" />
/// <reference path="angular-resource-1.0.d.ts" />
// Let's define a custom resource
interface IArticleResourceClass extends ng.resource.IResourceClass {
publish: ng.resource.IActionCall;
unpublish: ng.resource.IActionCall;
}
interface IArticleResource extends ng.resource.IResource {
title: string;
text: string;
date: Date;
author: number;
$publish: ng.resource.IActionCall;
$unpublish: ng.resource.IActionCall;
}
function MainController($resource: ng.resource.IResourceService) {
// IntelliSense will provide IActionDescriptor interface and will validate
// your assignment against it
var publishDescriptor: ng.resource.IActionDescriptor;
publishDescriptor = {
method: 'GET',
isArray: false
};
// I could still create a descriptor without the interface...
var unpublishDescriptor = {
method: 'POST'
}
// A call to the $resource service returns a IResourceClass. Since
// our own IArticleResourceClass defines 2 more actions, we cast the return
// value to make the compiler aware of that
var articles = <IArticleResourceClass> $resource('/articles/:id', null, {
publish : publishDescriptor,
unpublish : unpublishDescriptor
});
// Now we can do this
articles.unpublish({ id: 1 });
// IResourceClass.get() will be automatically available here
var article = <IArticleResource> articles.get({id: 1});
// Now we can do this
articleResource.unpublish({ id: 1 });
// IResourceClass.get() will be automatically available here
var article: IArticleResource = articleResource.get({id: 1}, function success() {
// Again, default + custom action here...
article.title = 'New Title';
article.$save();
article.$publish();
});
}
```
### Working with $resource in angular-1.0 definitions
```ts
/// <reference path="angular-1.0.d.ts" />
/// <reference path="angular-resource-1.0.d.ts" />
// Let's define a custom resource
interface IArticleResourceClass extends ng.resource.IResourceClass {
publish: ng.resource.IActionCall;
unpublish: ng.resource.IActionCall;
}
interface IArticleResource extends ng.resource.IResource {
title: string;
text: string;
date: Date;
author: number;
$publish: ng.resource.IActionCall;
$unpublish: ng.resource.IActionCall;
}
function MainController($resource: ng.resource.IResourceService) {
// IntelliSense will provide IActionDescriptor interface and will validate
// your assignment against it
var publishDescriptor: ng.resource.IActionDescriptor;
publishDescriptor = {
method: 'GET',
isArray: false
};
// I could still create a descriptor without the interface...
var unpublishDescriptor = {
method: 'POST'
}
// A call to the $resource service returns a IResourceClass. Since
// our own IArticleResourceClass defines 2 more actions, we cast the return
// value to make the compiler aware of that
var articles = <IArticleResourceClass> $resource('/articles/:id', null, {
publish : publishDescriptor,
unpublish : unpublishDescriptor
});
// Now we can do this
articles.unpublish({ id: 1 });
// IResourceClass.get() will be automatically available here
var article = <IArticleResource> articles.get({id: 1});
// Again, default + custom action here...
article.title = 'New Title';
article.$save();
article.$publish();
}
```
+16 -4
View File
@@ -1,5 +1,8 @@
/// <reference path="angular-resource.d.ts" />
interface IMyResource extends ng.resource.IResource<IMyResource> { };
interface IMyResourceClass extends ng.resource.IResourceClass<IMyResource> { };
///////////////////////////////////////
// IActionDescriptor
///////////////////////////////////////
@@ -14,9 +17,9 @@ actionDescriptor.params = { key: 'value' };
///////////////////////////////////////
// IResourceClass
///////////////////////////////////////
var resourceClass: ng.resource.IResourceClass;
var resource: ng.resource.IResource;
var resourceArray: ng.resource.IResource[];
var resourceClass: IMyResourceClass;
var resource: IMyResource;
var resourceArray: IMyResource[];
resource = resourceClass.delete();
resource = resourceClass.delete({ key: 'value' });
@@ -63,13 +66,22 @@ resource = resourceClass.save({ key: 'value' }, { key: 'value' });
resource = resourceClass.save({ key: 'value' }, { key: 'value' }, function () { });
resource = resourceClass.save({ key: 'value' }, { key: 'value' }, function () { }, function () { });
///////////////////////////////////////
// IResourceService
///////////////////////////////////////
var resourceService: ng.resource.IResourceService;
resourceClass = resourceService<IMyResource, IMyResourceClass>('test');
resourceClass = resourceService<IMyResource>('test');
resourceClass = resourceService('test');
///////////////////////////////////////
// IModule
///////////////////////////////////////
var mod: ng.IModule;
var resourceServiceFactoryFunction: ng.resource.IResourceServiceFactoryFunction;
var resourceServiceFactoryFunction: ng.resource.IResourceServiceFactoryFunction<IMyResource>;
var resourceService: ng.resource.IResourceService;
resourceClass = resourceServiceFactoryFunction<IMyResourceClass>(resourceService);
resourceServiceFactoryFunction = function (resourceService) { return resourceClass };
mod = mod.factory('factory name', resourceServiceFactoryFunction);
+69 -60
View File
@@ -1,7 +1,6 @@
// Type definitions for Angular JS 1.2 (ngResource module)
// Project: http://angularjs.org
// Definitions by: Diego Vilar <http://github.com/diegovilar>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
// Definitions: https://github.com/daptiv/DefinitelyTyped
/// <reference path="angular.d.ts" />
@@ -19,10 +18,19 @@ declare module ng.resource {
// that deeply.
///////////////////////////////////////////////////////////////////////////
interface IResourceService {
<T extends IResource<T>, U extends IResourceClass<T>>(url: string, paramDefaults?: any,
/** example: {update: { method: 'PUT' }, delete: deleteDescriptor }
where deleteDescriptor : IActionDescriptor */
actionDescriptors?: any): U;
<T extends IResource<T>>(url: string, paramDefaults?: any,
/** example: {update: { method: 'PUT' }, delete: deleteDescriptor }
where deleteDescriptor : IActionDescriptor */
actionDescriptors?: any): IResourceClass<T>;
(url: string, paramDefaults?: any,
/** example: {update: { method: 'PUT' }, delete: deleteDescriptor }
where deleteDescriptor : IActionDescriptor */
actionDescriptors?: any): IResourceClass;
/** example: {update: { method: 'PUT' }, delete: deleteDescriptor }
where deleteDescriptor : IActionDescriptor */
actionDescriptors?: any): IResourceClass<IResource<any>>;
}
// Just a reference to facilitate describing new actions
@@ -42,65 +50,66 @@ declare module ng.resource {
// PATCH (in other words, methods with body). Otherwise, it's going
// to be considered as parameters to the request.
// https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L461-L465
interface IResourceClass {
get(): IResource;
get(dataOrParams: any): IResource;
get(dataOrParams: any, success: Function): IResource;
get(success: Function, error?: Function): IResource;
get(params: any, data: any, success?: Function, error?: Function): IResource;
save(): IResource;
save(dataOrParams: any): IResource;
save(dataOrParams: any, success: Function): IResource;
save(success: Function, error?: Function): IResource;
save(params: any, data: any, success?: Function, error?: Function): IResource;
query(): IResource[];
query(dataOrParams: any): IResource[];
query(dataOrParams: any, success: Function): IResource[];
query(success: Function, error?: Function): IResource[];
query(params: any, data: any, success?: Function, error?: Function): IResource[];
remove(): IResource;
remove(dataOrParams: any): IResource;
remove(dataOrParams: any, success: Function): IResource;
remove(success: Function, error?: Function): IResource;
remove(params: any, data: any, success?: Function, error?: Function): IResource;
delete(): IResource;
delete(dataOrParams: any): IResource;
delete(dataOrParams: any, success: Function): IResource;
delete(success: Function, error?: Function): IResource;
delete(params: any, data: any, success?: Function, error?: Function): IResource;
interface IResourceClass<T extends IResource<T>> {
get(): T;
get(dataOrParams: any): T;
get(dataOrParams: any, success: Function): T;
get(success: Function, error?: Function): T;
get(params: any, data: any, success?: Function, error?: Function): T;
save(): T;
save(dataOrParams: any): T;
save(dataOrParams: any, success: Function): T;
save(success: Function, error?: Function): T;
save(params: any, data: any, success?: Function, error?: Function): T;
query(): T[];
query(dataOrParams: any): T[];
query(dataOrParams: any, success: Function): T[];
query(success: Function, error?: Function): T[];
query(params: any, data: any, success?: Function, error?: Function): T[];
remove(): T;
remove(dataOrParams: any): T;
remove(dataOrParams: any, success: Function): T;
remove(success: Function, error?: Function): T;
remove(params: any, data: any, success?: Function, error?: Function): T;
delete(): T;
delete(dataOrParams: any): T;
delete(dataOrParams: any, success: Function): T;
delete(success: Function, error?: Function): T;
delete(params: any, data: any, success?: Function, error?: Function): T;
}
interface IResource {
$get(): IResource;
$get(dataOrParams: any): IResource;
$get(dataOrParams: any, success: Function): IResource;
$get(success: Function, error?: Function): IResource;
$get(params: any, data: any, success?: Function, error?: Function): IResource;
$save(): IResource;
$save(dataOrParams: any): IResource;
$save(dataOrParams: any, success: Function): IResource;
$save(success: Function, error?: Function): IResource;
$save(params: any, data: any, success?: Function, error?: Function): IResource;
$query(): IResource[];
$query(dataOrParams: any): IResource[];
$query(dataOrParams: any, success: Function): IResource[];
$query(success: Function, error?: Function): IResource[];
$query(params: any, data: any, success?: Function, error?: Function): IResource[];
$remove(): IResource;
$remove(dataOrParams: any): IResource;
$remove(dataOrParams: any, success: Function): IResource;
$remove(success: Function, error?: Function): IResource;
$remove(params: any, data: any, success?: Function, error?: Function): IResource;
$delete(): IResource;
$delete(dataOrParams: any): IResource;
$delete(dataOrParams: any, success: Function): IResource;
$delete(success: Function, error?: Function): IResource;
$delete(params: any, data: any, success?: Function, error?: Function): IResource;
interface IResource<T extends IResource<T>> {
$get(): T;
$get(dataOrParams: any): T;
$get(dataOrParams: any, success: Function): T;
$get(success: Function, error?: Function): T;
$get(params: any, data: any, success?: Function, error?: Function): T;
$save(): T;
$save(dataOrParams: any): T;
$save(dataOrParams: any, success: Function): T;
$save(success: Function, error?: Function): T;
$save(params: any, data: any, success?: Function, error?: Function): T;
$query(): T[];
$query(dataOrParams: any): T[];
$query(dataOrParams: any, success: Function): T[];
$query(success: Function, error?: Function): T[];
$query(params: any, data: any, success?: Function, error?: Function): T[];
$remove(): T;
$remove(dataOrParams: any): T;
$remove(dataOrParams: any, success: Function): T;
$remove(success: Function, error?: Function): T;
$remove(params: any, data: any, success?: Function, error?: Function): T;
$delete(): T;
$delete(dataOrParams: any): T;
$delete(dataOrParams: any, success: Function): T;
$delete(success: Function, error?: Function): T;
$delete(params: any, data: any, success?: Function, error?: Function): T;
}
/** when creating a resource factory via IModule.factory */
interface IResourceServiceFactoryFunction {
($resource: ng.resource.IResourceService): ng.resource.IResourceClass;
interface IResourceServiceFactoryFunction<T extends IResource<T>> {
($resource: ng.resource.IResourceService): IResourceClass<T>;
<U extends IResourceClass<T>>($resource: ng.resource.IResourceService): U;
}
}
@@ -109,6 +118,6 @@ declare module ng {
interface IModule {
/** creating a resource service factory */
factory(name: string, resourceServiceFactoryFunction: ng.resource.IResourceServiceFactoryFunction): IModule;
factory(name: string, resourceServiceFactoryFunction: ng.resource.IResourceServiceFactoryFunction<any>): IModule;
}
}
+15 -14
View File
@@ -127,15 +127,15 @@ declare module ng {
// this is necessary to be able to access the scoped attributes. it's not very elegant
// because you have to use attrs['foo'] instead of attrs.foo but I don't know of a better way
// this should really be limited to return string but it creates this problem: http://stackoverflow.com/q/17201854/165656
[name: string]: any;
// Adds the CSS class value specified by the classVal parameter to the
// element. If animations are enabled then an animation will be triggered
[name: string]: any;
// Adds the CSS class value specified by the classVal parameter to the
// element. If animations are enabled then an animation will be triggered
// for the class addition.
$addClass(classVal: string): void;
// Removes the CSS class value specified by the classVal parameter from the
// element. If animations are enabled then an animation will be triggered for
// Removes the CSS class value specified by the classVal parameter from the
// element. If animations are enabled then an animation will be triggered for
// the class removal.
$removeClass(classVal: string): void;
@@ -143,12 +143,12 @@ declare module ng {
$set(key: string, value: any): void;
// Observes an interpolated attribute.
// The observer function will be invoked once during the next $digest
// following compilation. The observer is then invoked whenever the
// The observer function will be invoked once during the next $digest
// following compilation. The observer is then invoked whenever the
// interpolated value changes.
$observe(name: string, fn:(value?:any)=>any): Function;
// A map of DOM element attribute names to the normalized name. This is needed
// A map of DOM element attribute names to the normalized name. This is needed
// to do reverse lookup from normalized name back to actual name.
$attr: Object;
}
@@ -451,12 +451,12 @@ declare module ng {
then<TResult>(successCallback: (promiseValue: T) => IHttpPromise<TResult>, errorCallback?: (reason: any) => any, notifyCallback?: (state: any) => any): IPromise<TResult>;
then<TResult>(successCallback: (promiseValue: T) => IPromise<TResult>, errorCallback?: (reason: any) => any, notifyCallback?: (state: any) => any): IPromise<TResult>;
then<TResult>(successCallback: (promiseValue: T) => TResult, errorCallback?: (reason: any) => TResult, notifyCallback?: (state: any) => any): IPromise<TResult>;
catch<TResult>(onRejected: (reason: any) => IHttpPromise<TResult>): IPromise<TResult>;
catch<TResult>(onRejected: (reason: any) => IPromise<TResult>): IPromise<TResult>;
catch<TResult>(onRejected: (reason: any) => TResult): IPromise<TResult>;
finally<TResult>(finallyCallback: ()=>any):IPromise<TResult>;
}
@@ -700,7 +700,7 @@ declare module ng {
valueOf(value: any): any;
}
///////////////////////////////////////////////////////////////////////////
// SCEDelegateProvider
// see http://docs.angularjs.org/api/ng.$sceDelegateProvider
@@ -709,7 +709,7 @@ declare module ng {
resourceUrlBlacklist(blacklist: any[]): void;
resourceUrlWhitelist(whitelist: any[]): void;
}
///////////////////////////////////////////////////////////////////////////
// Directive
// see http://docs.angularjs.org/api/ng.$compileProvider#directive
@@ -793,6 +793,7 @@ declare module ng {
annotate(inlineAnnotadedFunction: any[]): string[];
get (name: string): any;
instantiate(typeConstructor: Function, locals?: any): any;
invoke(inlineAnnotadedFunction: any[]): any;
invoke(func: Function, context?: any, locals?: any): any;
}