尝试用TypeScript写一个Vue-todo

TS看起来是大势所趋,据说vue3.0的源码都是用TS写的了,无论如何都应该学习一番TS了!

在实践中学习也不失为一种学习方式!

1. 学习之前无论如何也要先看看TypeSCript中文网

2. vue-cli 3.0 提供了开箱即用的TS环境,那就直接开始!


vue create vue-todo

3. three days later

4. 基本完成了

成果

代码样子大概是这样,和JS写出来的差别还是很大的




5. 总结

1 这次实践离真正熟练还差得很遥远,但至少对强类型是有所理解了,也能感觉到TS的优势,至少代码提示比JS好太多了!
2 也遇见比较多的不适应

比如写这个notify组件

notify.js

import Vue from 'vue'
import Notification from './Notify.vue'

// const NotificationConstructor = Vue.extend(Notification)
const notify = (options) => {
  if (Vue.prototype.$isServer) {
    return
  }
  const instance = new Notification({
    propsData: options,
  })
  instance.$mount()
  document.body.appendChild(instance.$el)
  // console.log(instance)
  return instance
}
export default notify
如果我这里用TS,改为 notify.ts,用ts的写法。
执行 notify(options) 一定是报错的,无奈只能用js的写法,然后你用了JS,你又不得不写个notify.d.ts来声明这个东东。
至于错误原因留待自己的技术进步吧!

然后是这个 vue-chartjs

用TS的写法也是不成功的,这个只能求助大佬了

JS写法,完全没问题

TS写法,我也不知道错在何处

最后github地址

你可能感兴趣的:(vue.js,typescript)