爲vue3學點typescript(1), 體驗typescript

更新啦

第一課, 體驗typescript

第二課, 基礎類型和入門高級類型

第三課, 泛型

第四課, 解讀高級類型

第五課, 什麼是命名空間(namespace)?

vue3要來了

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

19年最酷的前端技術

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

1. 不少小錯誤好比: 對象的字段不存在或者字段名字拼寫錯誤, 編輯器會在寫代碼的時候就提示你, 下降出低級錯誤的概率.
2. 標註了類型的變量, 使用的時候編輯器都會列出變量上的方法和屬性, 開發體驗更舒服.
3. 不少大神的項目都用typescript開發, 看源碼的時候由於有了類型標註, 更容易理解.
4. 讓本身寫的代碼看起來很厲害的樣子🐂.

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

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

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

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

工做中經常使用的一些代碼片斷: https://github.com/any86/usef...

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

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';
}

補充

忽然想起若是咱們的配置不同,可能會看到不同的提示, 因此補充下個人ts配置, 請你們學習的時候按照這個配置來學習本課程, 每一個配置我都加了註釋, 若是譯文請在下方留言, 知無不言.

用法也很簡單, tsconfig.json放在你項目的根目錄便可:

// tsconfig.json
{
    "compilerOptions": {
        // 不報告執行不到的代碼錯誤。
        "allowUnreachableCode": true,
        // 必須標註爲null類型,才能夠賦值爲null
        "strictNullChecks": true,
        // 嚴格模式, 強烈建議開啓
        "strict": true,
        // 支持別名導入:
        // import * as React from "react"
        "esModuleInterop": true,
        // 目標js的版本
        "target": "es5",
        // 目標代碼的模塊結構版本
        "module": "es6",
        // 在表達式和聲明上有隱含的 any類型時報錯。
        "noImplicitAny": true,
        // 刪除註釋
        "removeComments": true,
        // 保留 const和 enum聲明
        "preserveConstEnums": false,
        // 生成sourceMap    
        "sourceMap": true,
        // 目標文件所在路徑
        "outDir": "./lib",
        // 編譯過程當中須要引入的庫文件的列表
        "lib": [
            "dom",
            "es7"
        ],
        // 額外支持解構/forof等功能
        "downlevelIteration": true,
        // 是否生成聲明文件
        "declaration": true,
        // 聲明文件路徑
        "declarationDir": "./lib",
        // 此處設置爲node,才能解析import xx from 'xx'
        "moduleResolution": "node"
    },
    // 入口文件
    "include": [
        "src/main.ts"
    ]
}

總結

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