TypeScript

前端现在越来越强大,多人开发更是常见,加上各大框架都开始支持TypeScript,而谷歌和微软又更加积极,导致不得不去学习,顺道通过js来了解ts,再通过ts来了解强类型语言。一路走来,辛酸二字不足形容,道行太浅,终究惨不忍睹。特在此记上一笔。以备将来继续踩坑前行。

TypeScript使用

使用流程

  • 全局安装 typescript
  • 版本检测 tsc -v
  • 新建文件后缀以 .ts即可
  • ts ==> js 执行命令tsc **.ts ==> **.js
    • 随时更改,随时转 tsc **.ts -w
    • 多个文件处理 需要配置 typescript.json ==> tsc init
    • typescript.json
      • 配置 files

        到此基本可用

准备接入 vue 官方介绍

  • 目前可以看来 vue本意使用flow,奈何typescript已成大势所趋,不得不跟进脚步了

目前有两种方式

  • 直接基于之前的vue进行修改即可 Microsoft 这种学习成本低,改起来快,但却没有很好地发挥其作用
  • 基于vue-cli.3.0进行开发,这个学习成本大,很多东西不是很完善,而且相应的资料不完成,很痛苦
    • 使用到官方维护插件vue-class-component
    • 第三方vue-property-decorator

      目前个人能力有限,碰到一些坑,指令 过滤器该怎样写,不清楚了,因为写的格式已经大变,又没有正规的文档,导致有几种变化,目前还不好定论。到此为止,个人虽然很想基于vue-cli3.0进行开发,可惜实在是走不出来,退而求其次,先使用简单的,再多平时多关注这类的问题,希望早日出头吧。

语法检测 eslint ==> tslint

  • 在使用 tslint时,想更为其他格式,结果时灵时不灵,导致我直接忽视其配置了。虽然使用了官方配置,但是依旧有问题,也不知道是不是使用的姿势不对还是怎么的。反正就是将以前的操作都给变了。看来漫漫长路啊

个人感想:

  • 花了这么大气力来学习这个,结果有点竹篮打水一场空的赶脚。没办法
  • 其实还是有很多相关项目的,可惜了

ts结合vue使用的感悟的更多相关文章

  1. vue-cli3和ts建立vue项目

    第一步,如果你之前没有装vuecli,可以直接执行下面命令 npm install --global @vue/cli 注:这里我install 的时候不成,于是我用的是 cnpm install - ...

  2. 如何在vue中使用ts

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...

  3. typescript整合到vue中的详细介绍,ts+vue一梭子

    通过vue-cli命令行安装vue项目,注意不要eslint 安装依赖 cnpm install typescript --save-dev cnpm install ts-loader --save ...

  4. [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript

    Vue watchers allow to perform async updates as a side effect of a property change. This lesson shows ...

  5. [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

    Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as for ...

  6. [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

    Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in y ...

  7. [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript

    With properties we can follow a one-way parent→child flow communication between components. This les ...

  8. [Vue + TS] Create Type-Safe Vue Directives in TypeScript

    Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create yo ...

  9. [Vue + TS] Using Route events inside Vue

    vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...

随机推荐

  1. Git-创建和合并分支

    本人拜读了廖雪峰老师关于Git的讲述后整理所得 分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你 ...

  2. Error: registers may not be the same -- `strexb r3,r2,[r3]'

    tmp\ccFziEge.s:914: Error: registers may not be the same -- `strexb r3,r2,[r3]'tmp\ccFziEge.s:968: E ...

  3. hdu2825Wireless Password

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=2825 题目: Wireless Password Time Limit: 2000/1000 MS (Ja ...

  4. ANE报错fix:Could not generate timestamp: Connection reset.

    如果你打包ANE时候 报了:Could not generate timestamp: Connection reset. 那么很有可能你用了JDK 1.8. 解决方案一 退回到 JDK 1.7,重新 ...

  5. Windows下Yii2框架的两种安装方式及升级最新版

    第一种:归档文件形式安装(适合于没有安装composer的机器) 进入下载页https://www.yiiframework.com/download,选择下载第一个 下载完成之后是一个压缩包,解压文 ...

  6. 防抖debounce和节流throttle

    大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...

  7. Vue数据绑定失效

    首先,我们得明白Vue数据响应的原理: 以对象为例:当把一个JavaScript对象传给Vue实例的data选项时,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些 ...

  8. vsftpd搭建ftp服务,并实现虚拟用户访问

    安装vsftpd服务: yum install vsftpd -y [root@wadeson ~]# rpm -ql vsftpd /etc/logrotate.d/vsftpd /etc/pam. ...

  9. [HAOI2015]T2

    [题目描述] 有一棵点数为N的树,以点1为根,且树点有边权.然后有M个操作,分为三种: 操作1:把某个节点x的点权增加a. 操作2:把某个节点x为根的子树中所有点的点权都增加a. 操作3:询问某个节点 ...

  10. SaltStack配置salt-api第十二篇

    介绍 SaltStack官方提供有REST API格式的 salt-api项目,将使Salt与第三方系统集成变得尤为简单.本文讲带你了解如何安装配置Salt-API, 如何利用Salt-API获取想要 ...