從 JavaScript 到 TypeScript 系列

隨着應用的龐大，項目中 JavaScript 的代碼也會愈來愈臃腫，這時候許多 JavaScript 的語言弊端就會愈發明顯，而 TypeScript 的出現，就是着力於解決 JavaScript 語言天生的弱勢：靜態類型。

前端開發 QQ 羣：377786580

這篇文章首發於個人我的博客 《據說》，系列目錄：

• 《從 JavaScript 到 TypeScript 1 - 什麼是 TypeScript》
• 《從 JavaScript 到 TypeScript 2 - 基礎特性和類型推導》
• 《從 JavaScript 到 TypeScript 3 - 引入和編譯》
• 《從 JavaScript 到 TypeScript 4 - 裝飾器和反射》
• 《從 JavaScript 到 TypeScript 5 - express 路由進化》
• 《從 JavaScript 到 TypeScript 6 - vue 引入 TypeScript》

《從 JavaScript 到 TypeScript 1 - 什麼是 TypeScript》

TypeScript 簡稱 TS。TypeScript 是 JavaScript 的超集，就是在 JavaScript 上作了一層封裝，封裝出 TypeScript 的特性，固然最終代碼能夠編譯爲 JavaScript。

TypeScript 早期的目標是爲了讓習慣編寫強類型語言的後端程序員，可以快速的編寫出前端應用（微軟大法好），由於 JavaScript 沒有強數據類型，因此 TypeScript 提供了強數據類型，這是 TypeScript 的核心。

隨着項目工程愈來愈大，愈來愈多的前端意識到強類型的重要性，隨着 TypeScript 的逐漸完善，支持者愈來愈多，強類型的需求愈來愈強。於此同時， angular 2.x 這個領頭羊率先使用 AtScript 開闢了強類型戰場。

JavaScript 行至今日，靈活，動態讓它活躍在編程語言界一線。而靈活，動態使得它又十分神祕，只有運行才能獲得答案。類型的補充填充了 JavaScript 的缺點，從 TypeScript 編譯到 JavaScript，多了靜態類型檢查，而又保留了 JavaScript 的靈活動態。

簡單來講：動態代碼一時爽，重構全家火葬場。

查看全文

《從 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() { }
}複製代碼

查看全文