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. PKU 2531 Network Saboteur(dfs+剪枝||随机化算法)

    题目大意:原题链接 给定n个节点,任意两个节点之间有权值,把这n个节点分成A,B两个集合,使得A集合中的每一节点与B集合中的每一节点两两结合(即有|A|*|B|种结合方式)权值之和最大. 标记:A集合 ...

  2. hihocoder1478 水陆距离

    地址:http://hihocoder.com/problemset/problem/1478 题目: 水陆距离 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个 ...

  3. 一个辅助AWVS C段扫描的小php脚本

    小菜写的小脚本,大牛轻拍砖~~~~~~ 渗透前信息收集时喜欢用椰树来获取旁站及二级域名,然后根据二级.三级域名地址扩展C段,扩大扫描业务边界.例如 以联想为例 但,各个旁站对应IP可能不同,或有CDN ...

  4. message from server: "Host '192.168.6.68' is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts

    系统或者程序连接数据报错 null, message from server: "Host '192.168.6.68' is blocked because of many connect ...

  5. Camera帧率和AE的关系

    1.camera首先是通过曝光的pixel加上dummy pixel以及曝光的line加上dummy line来决定一帧的曝光时间,这一帧曝光时间的倒数就是帧率,这个没有错吧,但是看代码时候看到pre ...

  6. 【Python】模块

    廖雪峰教程笔记. [使用模块有什么好处?] 1.使用模块可以避免函数名和变量名冲突. 2.大大提高了代码的可维护性. [使用模块的注意点] 1.每一个.py文件就是一个模块. 2.每一个包目录下面必须 ...

  7. ElasticSearch(六) Elasticsearch在Thinkphp5.0中的使用

    首先下载需要引入的类库 链接:https://pan.baidu.com/s/1XEXviLoWM-ypwJ_B0jXqlg 密码:u54t //Elasticsearch.zip类库压缩包地址 然后 ...

  8. Ubuntu12.04 安装adb

    1.通过apt-get安装adb sudo add-apt-repository ppa:nilarimogard/webupd8 sudo apt-get update sudo apt-get i ...

  9. LeetCode(476)： Number Complement

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...

  10. Hive的执行生命周期

    1.入口$HIVE_HOME/bin/ext/cli.sh 调用org.apache.hadoop.hive.cli.CliDriver类进行初始化过程 处理-e,-f,-h等信息,如果是-h,打印提 ...