Question

我正在尝试学习TS，我认为我掌握了基础知识，但我真的需要帮助将我的第一个.js文件转换为.ts（最新）。在.js中使用以下模式时，在.ts中使用的最佳模式是什么（非常感谢一个例子）。

我的.js文件：

var BokaHanterareIndex = {
  config: {
    showBtn: "#show",
    weekPicker: "#pickWeek",
  },

  init: function (config) {
    // provide for custom configuration via init()
    if (config && typeof (config) == 'object') {
      $.extend(BokaHanterareIndex.config, config);
    }

// Cache DOM objects
BokaHanterareIndex.$showBtn = $(BokaHanterareIndex.config.showBtn);
BokaHanterareIndex.$weekPicker = $(BokaHanterareIndex.config.weekPicker);

//Init 
BokaHanterareIndex.$weekPicker.datepicker({
  language: "sv",
  calendarWeeks: true,
  autoclose: true,
  todayBtn: true,
  todayHighlight: true
});

//event
BokaHanterareIndex.$showBtn.click(function () {
  BokaHanterareIndex.$weekPicker.datepicker('show');
});
 },
    showHours: function (message) {
    alert(message);
  },
}

在我的html文件中，我只是这样称呼它：

BokaHanterareIndex.init({showBtn: "#showButton"});

（有时我需要覆盖配置中的默认值）

到目前为止，我已经尝试过这个：

interface IBokaHanterareIndexConfig {
  showBtn?: string;
  weekPicker?: string;
}

class BokaHanterareIndexTest {
  private $showBtn: JQuery;
  private $weekPicker: JQuery;

  private config: IBokaHanterareIndexConfig = {
    showBtn: "#show",
    weekPicker: "#pickWeek"
  }

  init(config: IBokaHanterareIndexConfig) {
    $.extend(this.config, config);

    this.$showBtn = $(this.config.showBtn);
    this.$weekPicker = $(this.config.weekPicker);

    //Koppla event
    this.$showBtn.click(() => {
      this.$weekPicker.datepicker('show');
    });
  }

  showHours(message : string): void {
    alert(message);
  }
}

但是当我尝试像这样初始化它时：

var test = new BokaHanterareIndexTest();
test.init({ showBtnn: "#test" });

showBtnn没有被标记为错误，尽管它拼写不正确。（我正在使用VS 2013）

此致每

Answer 1

您可以使用slick执行此操作。这些方面的东西：

class

在这种情况下，您可以像这样初始化它：

class BokaHanterareIndex {
    config: Object = {showBtn: "#show",weekPicker: "#pickWeek"};

    init(config: Object) {
          //Type check not needed as we force an Object to be passed in.
          $.extend(BokaHanterareIndex.config, config);

      ... 
    }
}

或

您可以将let xyz = new BokaHanterereIndex(); xyz.init({showBtn: "#showButton"});替换为init并进行较小的初始化，如下所示：

constructor

有关可用的TypeScript类的文档here。

Answer 2

将BokuHanterareIndex及其匿名对象转换为类，如下所示：

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

export class BokaHanterareConfig {
    constructor(public showBtn: string,
                public weekPicker: string) {
    }
}

export class DatePickerConfig {
    constructor(public language: string,
                public calendarWeeks: boolean,
                public autoclose: boolean,
                public todayBtn: boolean,
                public todayHighlight: boolean) {
    }
}

export class BokaHanterareIndex {
    private config: BokaHanterareConfig = new BokaHanterareConfig("#show", "#pickWeek");

    $showBtn: JQuery;
    $weekPicker: JQuery | any;

    constructor() {
    }

    init(config?: any): void {
        if (config && typeof (config) == 'object') {
            $.extend(this.config, config);
        }

        // Cache DOM objects
        this.$showBtn = $(this.config.showBtn);
        this.$weekPicker = $(this.config.weekPicker);

        //Init 
        this.$weekPicker.datepicker(new DatePickerConfig("sv", true, true, true, true));

        //event
        this.$showBtn.click(() => {
            this.$weekPicker.datepicker('show');
        })
    }

    showHours(message: string): void {
        alert(message);
    }
}

您可以在代码中使用它：

import { BokaHanterareIndex } from 'bokuhanterareindex';

let bokaHanterareIndex: BokaHanterareIndex = new BokaHanterareIndex();
bokaHanterareIndex.init();

如何将此javascript转换为Typescript？

2 个答案: