看了vue conf 2019的視頻, 特別興奮, vue3要來了! vue3是用typescript開發的, 我揣測在vue的帶領下typescript會成為主流呢, 要不先學點.

19年最酷的前端技術

我是19年初開始使用的typescript, 自從開始用上了就喜歡上了, 真的愛不釋手, 最愛他幾點:

  1. 很多小錯誤比如: 對象的欄位不存在或者欄位名字拼寫錯誤, 編輯器會在寫代碼的時候就提示你, 降低出低級錯誤的幾率.
  2. 標註了類型的變數, 使用的時候編輯器都會列出變數上的方法和屬性, 開發體驗更舒服.
  3. 很多大神的項目都用typescript開發, 看源碼的時候因為有了類型標註, 更容易理解.
  4. 讓自己寫的代碼看起來很厲害的樣子??.

我也希望更多的同行都開始用typescript, 讓他成為前端漲工資的又一個工具(回想下webpack和vue給你帶來什麼, 最早"喫螃蟹"的人, 肯定享受最大的紅利).

放幾個我學習typescript過程中寫的項目,自從用了typescript就特別喜歡造輪子, 寫的不好, 就是有份熱情, 拋磚引玉, 大家肯定能寫出更好的.

手勢庫: github.com/any86/any-to

命令式調用vue組件: github.com/any86/vue-cr

工作中常用的一些代碼片段: github.com/any86/useful

一個mini的事件管理器: github.com/any86/any-ev

typescript工作原理

通過typescript命令行工具, 把typescript轉成javascript, 從而支持在瀏覽器運行.

注: 後面的文章中typescript簡稱ts, javascript簡稱js.

typescript特性

ts和js最大的區別就是ts多了類型註解功能, 通過名字中的"type"也能看出語言的重點在"類型"上. 這個類型分為基礎類型和高級類型, 高級類型就是通過基礎類型組成的自定義類型.

基礎類型

ts中包含了boolean / number / string / object / 數組(數組的表示有多種, 後續文章會展開) / 元組 / 枚舉 / any / Undefined / Null / Void / Never

any是本文的重點, 一會會對他著重講解.

高級類型

大部分情況是對object類型做更細的標註, 此處不多講, 先放個例子瞭解即可, 知道關鍵詞interface即可, 中文名"介面", 後續章節會展開.

interface Article {
title: string;
count: number;
content: string;
tags: string[]; // 數組裡的元素都是字元串
}

聰明的vscode

當我們使用vscode編輯器的時候, 編輯器會根據我們的"類型註解"進行代碼提示和錯誤提示:

類型寫錯了, 也會提示:

動手開始, 安裝

  1. 安裝nodejs
  2. 在命令行運行npm i -g typescript, 安裝編譯器到全局.
  3. 安裝vscode編輯器.

開始寫代碼

生成js

  1. 建立一個文件夾, 在裡面新建一個hello.ts文件, 注意擴展名是ts.
  2. 用vscode打開hello.ts文件.
  3. 輸入如下代碼, 讓我們體驗下ts:

interface A {
a:number,
b:string
}
let obj:A = {a:123,b:456};

  1. 命令行進入文件夾, 執行命令

npx tsc hello.ts

好了我們可以看下文件內部多了一個hello.js, 打開看看:

var obj = { a: 123, b: 456 };

代碼中的"類型註解"不見了 ,我們的ts被編譯成js了, 是不是很神奇.

錯誤提示

interface A {
a:number,
b:string
}
// 錯誤, 會提示b的類型錯誤, 應該為string類型
let obj:A = {a:123,b:456};

any類型

any代表任意類型, 這個類型特別適合ts新手, 初期有些類型不知道如何表達, 我們就可以暫時使用any表達, 等熟練ts後再標註精準的類型.

下面的情況新手可能就不會了, 以為n標記為number, 但是循環中i大於5的時候就是字元串了, 所以ts就會提示錯誤.

let n:number;
for(let i = 0;i<10;i++) {
if(i <= 5) n = 10;
else n = 100;
}
// ts提示: 不能將類型「"100"」分配給類型「number」

作為新手如果初期你不知道"聯合類型"這個概念, 你就可以直接把n標記為any:

// 熟練後會是這麼標記的
// let n:string|number
let n:any;
for(let i = 0;i<10;i++) {
if(i <= 5) n = 10;
else n = 100;
}

總結

19年ts一定大火, 請大家放心學ts吧, 初期開發可以先用any體驗ts, 慢慢學習1個月左右其實就可以實戰了, 這篇後我也會在本月陸續更新完本typescript的教程, 保證大家在一個月內學會.


推薦閱讀：
相關文章