用typescript寫react和node是怎樣的一種體驗

時間 2019-11-09

標籤 typescript react node 怎樣一種體驗欄目 React 简体版

原文原文鏈接

還不知道typescript是啥的前端童鞋須要作下功課了。javascript

接觸typescript挺早的。13年末的時候，公司的牛人在團隊內推廣typescript，沒多久咱們就把typescript作的項目搞上了生產環境。玩新東西的初期都是很爽的，但沒多久就變成了災難。團隊人員更替，培訓/學習成本增長；開發工具不統一，效率極其低下；ts帶來的利好被消耗的一乾二淨，只有無盡的坑。種種不順，最後不得不把全部ts文件刪除。html

這是一次很差的經歷，後面我很長一段時間都沒再寫過typescript了。可是，15年發生了兩件事，讓typescript再次回到個人視線。前端

一是es6規範的落地，二是visual studio code的發佈。這兩條正好解決了上面提到的兩個主要痛點：語言和工具。java

隨着es6的普及，應該沒幾個前端童鞋會說本身不會點es6了吧。typescript最初就是基於es6的，箭頭函數、模塊、類等等，只不過是在es6的基礎上加了個強類型（要是會as就更簡單了）。放到如今的前端環境，typescript的學習成本已經很低了，比各類前端框架的學習成本都低，能夠放心在團隊內推廣。node

再說開發工具。typescript剛出的時候只有vs、vim、webstorm支持，除了微軟自家vs系列，其餘編輯器對ts的支持僅僅只有語法檢測，智能提示、重命名什麼的那是妄想。
而visual studio體積太大，輕量級的express也接近1G了，光這一點就能嚇跑一撥童鞋了。然而，去年4月底，visual studio code橫空出世，沒有vs家族的龐大致積，性能又甩出同源的atom幾條街，對typescript和javascript的支持至關給力，簡直就是爲前端童鞋而生的。今年4月中旬，vs code就會發布1.0版本，也就下週的事了。要不爲何說ms大法好？react

除了語言和工具，typescript的生態也在不斷完善，DefinitelyTyped上有各類主流框架/類庫的頭文件，知足各類各樣的需求；頭文件管理工具tsd(已經廢棄，新的工具叫typings)也作的愈來愈好，ts項目管理一個json文件就搞定。webpack

一門語言，有了良好的生態，要火起來那是早晚的事。git

好了，說回正題。es6

react

第一次看到React.propTypes的時候，心想這不就是interface麼，typescript+react指日可待啊。果真，typescript從 v1.6開始支持jsx語法。組件的props和state均可以定義interface，類型檢測有了，propTypes拜拜。github

直接貼代碼：

interface Props {
    from: string;
    message: string;
}

class Greeting extends React.Component<Props,any> {
    render () {
        const {from,message} = this.props;
        return (
            <div>
                <p>來自{from}的消息</p>
                <p>{message}</p>
            </div>
        )
    }
}

配上vs code,到哪都有的智能提示簡直不能再爽，貼張gif感覺下。