Question

我正在尝试在打字稿单页应用程序中使用Vue，该应用程序需要在屏幕上的列表中显示一系列数组，但需要对其进行排序显示。似乎是一个简单而直接的问题，但是我似乎都没有使用Typescript的示例。有人可以给我一个有效的示例，说明如何从Vue数据数组中获取打字稿以接受Vue计算函数吗？

我在Vue配置中做了一个orderedRegions计算函数。这应该返回称为“区域”的Vue数据对象的排序版本。预期结果是ordredRegions将返回按字母顺序排序的相同列表。

    computed: {
      orderedRegions: function () : Region[] {
        function compare(x : Region, y: Region) {
          if (x.name < y.name) {
            return -1;
          }
          if (x.name > y.name) {
            return 1;
          }
          return 0;
        }
        return this.Regions.sort(compare);
      }
    }

我已经确定，如果我去除打字稿部分，并将其插入我的已编译javascript文件中，则确实可以工作，但是打字稿将无法编译，因为“ this.Regions”对象显示为错误，因为该错误不存在。在Visual Studio Code中，Typescript似乎期望“ this”引用功能范围，而不是Vue范围。

关于我如何使Typescript满意的任何想法？

..基于反馈的其他尝试： 1）我尝试按照以下方式使用“简写”，但似乎有相同的结果。 “ this”是指函数，而不是Vue，Typescript给出了错误：“属性'Regions'在类型'{sortedRegions：（）=> any; orderedRegions（）：Region [];}上不存在”

orderedRegions() : Region[] {
    function compare(x : Region, y: Region) {
        if (x.name < y.name) {
            return -1;
        }
            if (x.name > y.name) {
            return 1;
        }
            return 0;
        }
        return this.Regions.sort(compare);
    }

2）我也尝试了箭头功能，并再次遇到来自Typescript的相同错误：

orderedRegions: () => {
    function compare(x : Region, y: Region) {
        if (x.name < y.name) {
            return -1;
        }
            if (x.name > y.name) {
            return 1;
        }
            return 0;
    }
    return this.Regions.sort(compare);
}

Answer 1

对于我的打字稿项目，我使用基于类的api。如果您使用基于类的api，则只能使用# serializers.py class UserSerializer(serializers.ModelSerializer): class Meta: model = models.User fields = ['email', 'username', 'password'] extra_kwargs = {'password': {'write_only': True}} def create(self, validated_data): user = models.User.objects.create_user( username=validated_data['username'], email=validated_data['email'], password=validated_data['password'] ) return user对列表进行排序。吸气剂被识别为计算函数。

get function

Answer 2

您只需将区域传递给orderedRegions函数，那么在函数本身中就不会遇到this问题。

orderedRegions(myRegions: Region[]) : Region[] {
    function compare(x : Region, y: Region) {
        if (x.name < y.name) {
            return -1;
        }
        if (x.name > y.name) {
            return 1;
        }
        return 0;
    }
    return myRegions.sort(compare);
}

我已经对此进行了测试，并且可以正常工作。实际上，我已经使用了您的排序功能。

由于您不必担心this上下文，因此它对于测试也更好。

在Typescript中使用计算属性对数组进行排序的问题

2 个答案: