如何将此javascript转换为Typescript？

我正在尝试学习TS，我想我已经掌握了基本知识，但我确实需要som帮助将我的第一个.js文件转换为.TS（最新）。在.js中使用以下模式时，在.ts中使用的最佳模式是什么（请举个例子）

My.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"});

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

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

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

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

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

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

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

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

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

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

问候

---

根据

您可以使用

类

完成。大致如下：

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

，并进行较小的初始化，如下所示：

let xyz = new BokaHanterereIndex({"showBtn": "#showButton"});

---

有关于TypeScript类的文档可用。

将

BokuHanterareIndex

及其匿名对象转换为类，您会得到如下结果：

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

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

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

---

Typescript是javascript的超集。这意味着大部分有效的javascript代码也是有效的typescript。查看您的代码，您只需要更改文件扩展名。您必须尝试一些方法，有太多不同的有效方法可以做到这一点。如果您解释您遇到的困难，wrt可以帮助更新我的帖子，并在quoatation Marks中添加我尝试过的内容，直到编译.ts时没有出现错误：(