从 JavaScript 到 TypeScript 系列

时间 2019-11-22

标签 javascript typescript 系列栏目 JavaScript 繁體版

原文原文链接

随着应用的庞大，项目中 JavaScript 的代码也会愈来愈臃肿，这时候许多 JavaScript 的语言弊端就会愈发明显，而 TypeScript 的出现，就是着力于解决 JavaScript 语言天生的弱势：静态类型。javascript

前端开发 QQ 群：377786580html

这篇文章首发于个人我的博客《据说》，系列目录：前端

《从 JavaScript 到 TypeScript 1 - 什么是 TypeScript》

TypeScript 简称 TS。TypeScript 是 JavaScript 的超集，就是在 JavaScript 上作了一层封装，封装出 TypeScript 的特性，固然最终代码能够编译为 JavaScript。vue

TypeScript 早期的目标是为了让习惯编写强类型语言的后端程序员，可以快速的编写出前端应用（微软大法好），由于 JavaScript 没有强数据类型，因此 TypeScript 提供了强数据类型，这是 TypeScript 的核心。java

随着项目工程愈来愈大，愈来愈多的前端意识到强类型的重要性，随着 TypeScript 的逐渐完善，支持者愈来愈多，强类型的需求愈来愈强。于此同时， angular 2.x 这个领头羊率先使用 AtScript 开辟了强类型战场。程序员

JavaScript 行至今日，灵活，动态让它活跃在编程语言界一线。而灵活，动态使得它又十分神秘，只有运行才能获得答案。类型的补充填充了 JavaScript 的缺点，从 TypeScript 编译到 JavaScript，多了静态类型检查，而又保留了 JavaScript 的灵活动态。vuex

简单来讲：动态代码一时爽，重构全家火葬场。typescript

查看全文express

《从 JavaScript 到 TypeScript 2 - 基础特性和类型推导》

TypeScript 很容易学习和上手，引入成本很是的低，而代码阅读起来简直就像代码会说话同样。TypeScript 优秀的设计使得即便你没有接触过它，可是仍然可以读懂它。编程

查看全文

《从 JavaScript 到 TypeScript 3 - 引入和编译》

许多人摩拳擦掌跃跃欲试，这篇文章咱们主要介绍如何引入和编译 TypeScript。

引入 TypeScript 很是简单，TypeScript 的文件后缀为 ts，迁移 TypeScript 只须要将项目中，业务代码的 *.js 修改成 *.ts 便可。不过在此以后你会看到大量的报错，而后就是按照 TypeScript 的规则，解决这些报错便可:)

查看全文

《从 JavaScript 到 TypeScript 4 - 装饰器和反射》

顾名思义，"装饰器" (也叫 "注解")就是对一个 类/方法/属性/参数 的装饰。它是对这一系列代码的加强，而且经过自身描述了被装饰的代码可能存在的行为改变。

简单来讲，装饰器就是对代码的描述。

而反射，就是在运行时动态获取一个对象的一切信息：方法/属性等等，特色在于动态类型反推导。在 TypeScript 中，反射的原理是经过设计阶段对对象注入元数据信息，在运行阶段读取注入的元数据，从而获得对象信息。

查看全文

《从 JavaScript 到 TypeScript 5 - express 路由进化》

在这篇文章中，咱们会把这两个特性引入，而且在 express 上，实现一层全新的路由封装。

咱们将全部的 Router 按照本身的业务规则/或者自定义的其余规则进行归类 —— 而后提取出对应的 Class，例以下面的 User Class 就是把用户信息全部的 router 都归类在一块儿：

class User {
  @httpPost
  @path('/user/login')
  login() { }

  @httpGet
  @path('/user/exit')
  exit() { }
}复制代码

查看全文

《从 JavaScript 到 TypeScript 6 - vue 引入 TypeScript》

Vue 在官方文档中有一节简单的介绍了如何引入 TypeScript，惋惜文档太过简单，真正投入生产还有许多的细节没有介绍。

咱们对此进行了一系列探索，最后咱们的风格是这样的：

import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { State, Action, Mutation, namespace } from 'vuex-class'
import Toast from 'components/Toast.vue'

const userState = namespace('business/user', State)

@Component({
  components: { Toast },
})
export default class extends Vue {
  // data
  title = 'demo'

  @Prop({ default: '' })
  text: string

  // store
  @userState userId

  // computed
  get name (): boolean {
    return this.title + this.text
  }

  // watch
  @Watch('text')
  onChangeText () { }

  // hooks
  mounted() { }
}复制代码

查看全文