举个例子：
lib/url.js 中的getParam (算法并不高级，就是易读、兼容性好)
改造后的文件为：lib/url.ts
export default class URL { /** * @memberOf URL * @summary 获取url中指定参数 * @type {function} * @param {string} param1 - 如果param2为undefined，param1是指从当前页面url中获取指定参数的key, 如果param2不为空，param1为指定的url * @param {string} param2 - 可选参数，如果param2存在，则从指定的param1连接中获取对应参数的key * @return {string|null} */ static getParam (param1: string, param2?: string): string { let url: string = '' let param = null // 如果只有一个参数，默认从当前页面链接获取参数 if (typeof param2 === 'undefined') { url = window && window.location.href || '' param = param1 // 从指定url中获取参数 } else { url = param1 param = param2 } url = url.split('#')[0] if (url.indexOf('?') > -1) { url = url.split('?')[1] } const reg = new RegExp('(^|&)' + param + '=([^&]*)[&#$]*', 'i') const rstArr = url.match(reg) if (rstArr !== null) { return decodeURIComponent(rstArr[2]) } return null } ... }对于一个方法多种调用方式，如果你想完全改成typescript推荐的方式，你可以用到方法重载。
我没有用是因为我不希望改变原有页面的使用方式。
注：对于一个大型项目来讲，我们并不建议上来就对全部的文件进行ts改造。
我们更建议采用渐进式改造方案，在不影响原有页面的情况下，逐一改造。具体方案后面会介绍
vue文件改造
src/components/helper/newUser/index.vue
<template>...</template> <script> import { LEGO_ATTR, initLegoData, legic } from '@/lib/legic' import { getMyProfile } from '@/api/helper' import { toast } from '@/lib/ZZSDK' import myComponent from './myComponent.vue' let flag = false // 是否发送视频点击埋点 export default { components: { // 自定义组件 myComponent }, data () { return { // 用户头像 portrait: '', // 用户名称 nickName: '', // 是否点击播放 isPlay: false } }, mounted () { this.initData() initLegoData({ type: 'newUserGuide' }); legic(LEGO_ATTR.newUserGuide.SHOW); }, methods: { initData () { getMyProfile().then(data => { console.log('data', data) const { respData } = data this.portrait = respData.portrait || '' this.nickName = respData.nickname || '' }).catch(err => { toast({ msg: err }) }) }, goPageClick (type) { switch (type) { case 'SUN': legic(LEGO_ATTR.newUserGuide.SUNVILLAGECLICK) break case 'FOOTBALL': legic(LEGO_ATTR.newUserGuide.FOOTBALLCLICK) break case 'SIGN': legic(LEGO_ATTR.newUserGuide.SIGNCLICK) break default: return } }, videoClick () { if (flag) { return } else { flag = true legic(LEGO_ATTR.newUserGuide.SIGNCLICK) this.isPlay = true this.$refs.video.play() } } } } </script> <style lang="scss" scoped>...</style>改造后
<template>...</template> <script lang="ts"> import { LEGO_ATTR, initLegoData, legic } from '@/lib/legic' import { getMyProfile } from '@/api/helper.ts' import { toast } from '@/lib/ZZSDK' import { Component, Vue } from 'vue-property-decorator' import test from './test.vue' let flag: boolean = false // 是否发送视频点击埋点 @Component({ components: { test } }) export default class NewUser extends Vue { // 用户头像 portrait = '' // 用户名称 nickName = '' // 是否点击播放 isPlay = false mounted (): void { this.initData() initLegoData({ type: 'newUserGuide' }); legic(LEGO_ATTR.newUserGuide.SHOW) } initData () { // 获取profile信息 getMyProfile().then((data: any) => { console.log('data', data) const { respData } = data this.portrait = respData.portrait || '' this.nickName = respData.nickname || '' }).catch((err: string) => { toast({ msg: err }) }) } goPageClick (type: string) { switch (type) { case 'SUN': legic(LEGO_ATTR.newUserGuide.SUNVILLAGECLICK) break case 'FOOTBALL': legic(LEGO_ATTR.newUserGuide.FOOTBALLCLICK) break case 'SIGN': legic(LEGO_ATTR.newUserGuide.SIGNCLICK) break default: return } } videoClick () { if (flag) { return } else { flag = true legic(LEGO_ATTR.newUserGuide.SIGNCLICK) this.isPlay = true this.$refs.video['play']() } } } </script> <style lang="scss" scoped>...</style>