TypeScript：类型“{}”上不存在属性

Question

I am using Visual Studio 2013 fully patched. I am trying to use JQuery, JQueryUI and JSRender. I am also trying to use TypeScript. In the ts file I'm getting an error as follows:

Property 'fadeDiv' does not exist on type '{}'.

I think I have the correct references for JQuery, JQueryUI and JSRender for TypeScript, but from what I've read this is looking like a d.ts issue.

There are no errors in JavaScript, but I don't want to have Visual Studio saying there are errors if I can help it. Both times fadeDiv is mentioned in the JavaScript there is a red line under it and both errors say the same thing as above.

/// <reference path="../scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../scripts/typings/jqueryui/jqueryui.d.ts" />
/// <reference path="typings/jsrender/jsrender.d.ts" />

var SUCSS = {};

$(document).ready(function () {
   SUCSS.fadeDiv();
});

SUCSS.fadeDiv = function () {
var mFadeText: number;
$(function () {
    var mFade = "FadeText";
    //This part actually retrieves the info for the fadediv
    $.ajax({
        type: "POST",
        //url: "/js/General.aspx/_FadeDiv1",
        url: "/js/sucss/General.aspx/_FadeDivList",
        //data: "{'iInput':" + JSON.stringify(jInput) + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function (xhr, status, error) {
            // Show the error
            //alert(xhr.responseText);
        },
        success: function (msg) {
            mFadeText = msg.d.Fade;
            // Replace the div's content with the page method's return.
            if (msg.d.FadeType == 0) {//FadeDivType = List
                var template = $.templates("#theTmpl");
                var htmlOutput = template.render(msg.d);
                $("[id$=lblFadeDiv]").html(htmlOutput);
            }
            else {//FadeDivType = String
                $("[id$=lblFadeDiv]").html(msg.d.FadeDivString);
            }
        },
        complete: function () {
            if (mFadeText == 0) {
                $("[id$=lblFadeDiv]").fadeIn('slow').delay(5000).fadeOut('slow');
            }
        }
    });
});

For those who might read this later, the SUCSS is the namespace. In typescript it appears I would have wanted to do something like this.

$(document).ready(function () {
    SUCSS.fadeDiv();
});
module SUCSS {
    export function fadeDiv () {};
};

So the function is made public by use of the export and I could call the SUCSS.fadeDiv to run on page load by calling it with the SUCSS.fadeDiv(); . I hope that will be helpful.

Answer 1

You can assign the any type to the object:

let bar: any = {};
bar.foo = "foobar"; 

Answer 2

Access the field with array notation to avoid strict type checking on single field:

data['propertyName']; //will work even if data has not declared propertyName

---

Alternative way is (un)cast the variable for single access:

(<any>data).propertyName;//access propertyName like if data has no type

The first is shorter, the second is more explicit about type (un)casting

---

You can also totally disable type checking on all variable fields:

let untypedVariable:any= <any>{}; //disable type checking while declaring the variable
untypedVariable.propertyName = anyValue; //any field in untypedVariable is assignable and readable without type checking

Note: This would be more dangerous than avoid type checking just for a single field access, since all consecutive accesses on all fields are untyped

Answer 3

let propertyName= data['propertyName'];

Answer 4

When you write the following line of code in TypeScript:

var SUCSS = {};

The type of SUCSS is inferred from the assignment (ie it is an empty object type).

You then go on to add a property to this type a few lines later:

SUCSS.fadeDiv = //...

And the compiler warns you that there is no property named fadeDiv on the SUCSS object (this kind of warning often helps you to catch a typo).

You can either... fix it by specifying the type of SUCSS (although this will prevent you from assigning {} , which doesn't satisfy the type you want):

var SUCSS : {fadeDiv: () => void;};

Or by assigning the full value in the first place and let TypeScript infer the types:

var SUCSS = {
    fadeDiv: function () {
        // Simplified version
        alert('Called my func');
    }
};

Answer 5

我建议进行以下更改

let propertyName =  {} as any;

Answer 6

myFunction(
        contextParamers : {
            param1: any,
            param2: string
            param3: string          
        }){
          contextParamers.param1 = contextParamers.param1+ 'canChange';
          //contextParamers.param4 = "CannotChange";
          var contextParamers2 : any = contextParamers;// lost the typescript on the new object of type any
          contextParamers2.param4 =  'canChange';
          return contextParamers2;
      }

Answer 7

Near the top of the file, you need to write var fadeDiv = ... instead of fadeDiv = ... so that the variable is actually declared.

The error " Property 'fadeDiv' does not exist on type '{}'. " seems to be triggering on a line you haven't posted in your example (there is no access of a fadeDiv property anywhere in that snippet).

Answer 8

You can use the partial utility type to make all of the objects properties optional. https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype

type Foo = {
  bar: string;
}

const foo: Partial<Foo> = {}
foo.bar = "foobar"