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

Question

我正在使用完全修补的 Visual Studio 2013。我正在尝试使用 JQuery、JQueryUI 和 JSRender。我也在尝试使用 TypeScript。在 ts 文件中，我收到如下错误：

类型“{}”上不存在属性“fadeDiv”。

我认为我对 TypeScript 的 JQuery、JQueryUI 和 JSRender 有正确的参考，但从我读到的内容来看，这看起来像是一个 d.ts 问题。

JavaScript 中没有错误，但我不想让 Visual Studio 说有错误，如果我能提供帮助的话。两次fadeDiv 在 JavaScript 中都被提及，其下方有一条红线，两个错误都与上述相同。

/// <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');
            }
        }
    });
});

对于以后可能会阅读本文的人来说，SUCSS 就是命名空间。在打字稿中，我似乎想做这样的事情。

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

因此，该函数通过使用导出公开，我可以通过使用SUCSS.fadeDiv(); 调用它来调用SUCSS.fadeDiv 以在页面加载时运行。我希望这会有所帮助。

Answer 1

您可以将any 类型分配给对象：

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

Answer 2

使用数组表示法访问字段以避免对单个字段进行严格的类型检查：

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

---

另一种方法是（取消）转换单一访问的变量：

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

第一个更短，第二个更明确地说明类型（取消）转换

---

您也可以完全禁用所有变量字段的类型检查：

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

注意：这比避免仅对单个字段访问进行类型检查更危险，因为所有字段上的所有连续访问都是无类型的

Answer 3

let propertyName= data['propertyName'];

Answer 4

当你在 TypeScript 中编写以下代码行时：

var SUCSS = {};

SUCSS 的类型是从赋值中推断出来的（即它是一个空对象类型）。

几行之后，您继续为这种类型添加一个属性：

SUCSS.fadeDiv = //...

并且编译器会警告您在 SUCSS 对象上没有名为 fadeDiv 的属性（这种警告通常可以帮助您发现拼写错误）。

您可以...通过指定SUCSS 的类型来修复它（尽管这会阻止您分配{}，它不满足您想要的类型）：

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

或者首先分配完整的值，然后让 TypeScript 推断类型：

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

在文件顶部附近，你需要写var fadeDiv = ...而不是fadeDiv = ...，这样才能真正声明变量。

错误“Property 'fadeDiv' does not exist on type '{}'.”似乎在您未在示例中发布的行上触发（在该 sn-p 中的任何位置都无法访问 fadeDiv 属性）。

Answer 8

您可以使用部分实用程序类型将所有对象属性设为可选。 https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype

type Foo = {
  bar: string;
}

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