TypeScript 前端现在越来越强大,多人开发更是常见,加上各大框架都开始支持TypeScript,而谷歌和微软又更加积极,导致不得不去学习,顺道通过js来了解ts,再通过ts来了解强类型语言.一路走来,辛酸二字不足形容,道行太浅,终究惨不忍睹.特在此记上一笔.以备将来继续踩坑前行. TypeScript使用 官方文档EN 2.9 | 中文 2.7 推荐使用使用英文文档,明显比中文更新更快 不知道算不算阮一峰的 这个过于简单了,但是归纳的挺好的 使用流程 全局安装 typescript 版本…

第一步,如果你之前没有装vuecli,可以直接执行下面命令 npm install --global @vue/cli 注:这里我install 的时候不成,于是我用的是 cnpm install --global @vue/cli 如果之前装了vuecli的版本的,操作第一步之前需要先uninstall之前的版本 cnpm uninstall vue-cli -g // 卸载 第二步,创建一个vue项目 vue create my-project-name 会出现一些提示,按照你的习惯来选择就…

注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这…

通过vue-cli命令行安装vue项目,注意不要eslint 安装依赖 cnpm install typescript --save-dev cnpm install ts-loader --save-dev 在vue配置文件 webpack.base.conf.js 中做修改 在rules中的js配置对象下面添加 { test: /\.ts$/, 解析在vue文件中的ts脚本 loader: 'ts-loader', 使用 ts-loader 解析 exclude: /node_modules…

Vue watchers allow to perform async updates as a side effect of a property change. This lesson shows you how you can watch properties on your class based component and how to use the @Watch decorator for it. <template> <div class="hello"…

Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript. When using the v-model, the cust…

Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in your component options. This lesson shows you how to use them using the @Inject and @Provide decorators in tandem! When you want to provide some servic…

With properties we can follow a one-way parent→child flow communication between components. This lesson shows you how you can pass down properties to class based Vue components by using the @Prop decorator from vue-property-decorator. We’ll also see…

Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create your own Vue directive to change a component’s colors and type-safe it with TypeScript. We’ll additionally show how you can pass objects to your directi…

vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these new hooks in your class based Vue components in TypeScript. We’ll also go over how we can create and use routes in Vue. Default component: <template>…