如何將此javascript轉換爲Typescript？

-3

我想學習TS，我想我有基礎知識，但我真的可能需要som幫助將我的第一個.js文件轉換爲.ts（最新）。在.js中使用以下模式時，使用.ts的最佳模式是什麼（例子將不勝感激）。如何將此javascript轉換爲Typescript？

我的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 FIL我只是把它像這樣：

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不beeing標記爲錯誤，儘管它已經不是拼寫正確。（我使用VS 2013）

問候每

來源

2016-06-29 Per B

打字稿是JavaScript的一個超集。這意味着幾乎大部分有效的JavaScript代碼也是有效的打字稿。看着你的代碼，你只需要改變文件擴展名。 – toskv

你必須嘗試一些，有太多不同的有效方法來做到這一點。如果你解釋你有什麼困難，可以幫助 –

更新我的帖子，並添加我到目前爲止所嘗試的內容 –

您可以用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"});

您可以用constructor取代init，有一個較小的初始化，像所以：

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

有關於TypeScript類的文檔here。

來源

2016-06-29 11:29:38

TypeScript示例不應使用匿名對象... –

轉換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();

來源

2016-06-29 12:23:35 rinukkusu

如何將此javascript轉換爲Typescript？

回答

相關問題