js函数如何改造成typescript类型的函数

Question

我想把用js写的函数改造成ts类型的函数，并在.vue文件中进行引入使用

1、js函数

var TimeSlider = function (elementId, options) {
    this.canvas = document.getElementById(elementId)
    this.ctx = this.canvas.getContext("2d");
    this.canvansW = this.canvas.width;
    this.canVansH = this.canvas.height;
    this.timecell = options.init_cells;
    console.log(this.canvansW,this.canVansH)
    this.ctx.font="20px Arial";
    this.minutes_per_step = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440]; // min/格
    this.graduation_step = 20;//刻度间最小宽度，单位px
    this.hours_per_ruler = 24;//时间轴显示24小时
    this.start_timestamp = new Date().getTime() - 12*60*60*1000;
    this.distance_between_gtitle = 80;
    this.zoom = 24;
    this.g_isMousedown = false;//拖动mousedown标记
    this.g_isMousemove = false;//拖动mousemove标记
    this.g_mousedownCursor = null;//拖动mousedown的位置
    this.returnTime = null;//mouseup返回时间

    this.on_before_click_ruler_callback = null;

    this.init(this.start_timestamp,this.timecell,false);
    return this;
};

/**
 * 初始化
 * @param {*} start_timestamp 最左侧时间
 * @param {*} timecell 录像段数组
 * @param {*} redrawFlag 是否重绘标记
 */
TimeSlider.prototype.init = function(start_timestamp,timecell,redrawFlag){
    this.timecell = timecell;
    this.start_timestamp = start_timestamp;
    this.drawCellBg();
    this.add_graduations(start_timestamp);
    this.add_cells(timecell);
    // this.drawLine(0,this.canVansH,this.canvansW,this.canVansH,"rgb(151, 158, 167)",1); //底线
    this.drawLine(this.canvansW/2,0,this.canvansW/2,35,"rgb(64, 196, 255",2); //中间播放点时间线
    if(!redrawFlag){//只有第一次进入才需要添加事件
        this.add_events();
    }
    var time = start_timestamp + (this.hours_per_ruler*3600*1000)/2;
    this.ctx.fillStyle = "rgb(64, 196, 255)";
    this.ctx.fillText(this.changeTime(time),this.canvansW/2-60,57);
}

TimeSlider.prototype.drawCellBg = function() {
   // 省略函数体
}

TimeSlider.prototype.add_graduations = function(start_timestamp) {
   // 省略函数体
}

TimeSlider.prototype.add_cells = function(cells){
   // 省略函数体
}

TimeSlider.prototype.drawLine = function(beginX,beginY,endX,endY,color,width){
   // 省略函数体
}

在.vue文件中引入并使用

import  { TimeSlider } from './timeline-canvas'

mounted() {
   this.funtimeine()
}

funtimeine() {
    TimeSlider('timeline', {init_cells: this.timedata});
}

请问我要如何修改，才能让canvas, ctx, canvasW, canvasW等在TimeSlider中声明的变量，可以在其他函数中使用，最终达到在.vue中只需给TimeSlider传入指定参数，即可使用的目的

Answer 1

你对ts有误解，ts 只是js的超集。然后有静态类型检查等等，最终还是编译成js运行,所以不要把ts想的有多高级。

所以你这么写也是可以使用的，只需在代码最后 export default TimeSlider

你这个TimeSlider 就相当于 是 js 里的 class

下面的代码是 es6的 class 写法。如果非要用 ts，就把变量类型加上。

TimeSlider.js

export default class TimeSlider{
  // ....
  constructor(elementId, options){
    this.canvas = document.getElementById(elementId)
    this.ctx = this.canvas.getContext("2d");
    // ... 其他属性
    this.init()
  }
  
  init(){
    // ...
  }
  
  drawCellBg(){
    // ...
  }
  
  add_graduations(){
    // ...
  }
  
  // ....其他function
}

在test.vue 中

import TimeSlider from './TimeSlider.js';

export default {
  mounted(){
  // 因为你有 dom 操作，所以 必须得在 mounted 里初始化
   const timeSlider = new TimeSlider('id',{})
  }
}