從 JavaScript 到 TypeScript 系列

linkFly發表於2017-10-16
JavaScriptTypeScript

隨著應用的龐大，專案中 JavaScript 的程式碼也會越來越臃腫，這時候許多 JavaScript 的語言弊端就會愈發明顯，而 TypeScript 的出現，就是著力於解決 JavaScript 語言天生的弱勢：靜態型別。

前端開發 QQ 群：377786580

這篇文章首發於我的個人部落格 《聽說》，系列目錄：

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

檢視全文

相關文章