摘要:它有時被稱做鴨式辨型法或結構性子類型化。在里,接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。賦值后,和再也不能被改變了。函數的返回值類型是通過其返回值推斷出來的此例是和。技術本身沒有好壞,長遠看,弱類型語言并不是那么的友好。
TypeScript不是一個高深的技術,它不過是一個javascript的超集,那么什么是超集呢?
所謂的超集 其實就是最終將你寫的TypeScript編譯成javascript去執行,因為瀏覽器上能跑的腳本語言是javascript,這個本質要搞清楚
傳統的Javascript 缺點: 1.弱類型,不嚴謹無法在編寫時察覺出同一個變量的類型是否保持一致
比如:
var a = 1 //如果這個b的值是“1”,字符串 var b = "1" console.log(a+b)
結果:
2.不依賴插件,無法感知編碼書寫是否出現邊際錯誤(出現某一瞬間空值等)特別是ES6之前存在全局變量,var會給全局狀態下添加屬性以及污染全局加上ES5的變量提升作用域等混合情況,很容易導致變量查找時出現undefined的問題,但是這個問題需要代碼運行才能報錯
例如:
var a; function test() { a = 1 } console.log(a) //undefined console.log(window.a)//undefined ------------------- var a; function test() { a = 1 } test() console.log(a) // 1 console.log(window.a) //1
像上面這種情況,如果遇到了,項目很大,排查起來還是很煩的3.不依賴插件,沒有靜態類型以及上下文檢查
特別是在書寫Node.js的時候,往往這種偏后臺類型的代碼,高并發場景出現一個小問題都是致命的,如果是一個超大型項目,排查問題起來非常困難
傳統的javascript
這段代碼,變量a根本就沒有定義,但是根本沒有報錯,這種場景可以在項目中可能是右查詢沒有查詢到,然后輸出undefined. 可是如果是在使用這個變量去做某些事情
例如:
這個a變量是一個用戶很核心的數據,但是它是undefined。然后又經過若干的類型轉換,被js轉換成不知道是什么的數據展示給了客戶,那么炸了,可能會引起整個項目出現致命性錯誤直接奔潰
4. 大型項目,多人合作,如果出了BUG往往可能要浪費大家很多時間(摸魚時間)例如 :
你的同事A寫了一個模塊,大概5個文件,一共1000行代碼
經過1000行代碼的處理,最終輸出好幾個值(變量)給了你
如下代碼:
export default { store, checkPassWord, applyMiddleWare, //.... }
一個不合格的同事 給你的沒有注釋的代碼 于是你 :
一個合格的同事:
/** @params store //數據對象 @params checkPassWord //檢查密碼函數 @params applyMiddleWare //應用中間間 */ export default { store, checkPassWord, applyMiddleWare, //.... }
如果你用到他的暴露對象內容特別多的時候,就要一個一個去看注釋,而且關鍵是:
這里面每個函數的傳入參數,返回的參數,注釋不一定那么完整詳細。
那么只有去溝通了,一旦溝通起來。時間成本上升,并且如果大家開發任務都特別緊急的時候,炸了~
于是,TypeScript出現了TypeScript 3.1 現已發布
最新版本文檔地址 最新TypeScript版本文檔地址
TypeScript并不能說是一門完全全新的語言,可以說它是一個基于javaScipt的超集
什么是超集? 其實就是原生ES6語法+Type類型
強烈建議閱讀阮一峰老師的ES6入門
我們來看下 TypeScript的工作方式:
全局下載TypeScript 手動編譯TS文件變成js文件
npm install -g typescript
用全局安裝的typescript來編譯輸出一把剛才的文件
還沒有編譯,現在已經開始報出問題,但是報出問題可以繼續編譯嗎?
即使靜態校驗出現問題,最終還是編譯成功:
這里特別注意,TS里面的靜態類型,以及枚舉等,編譯成js后是不存在的
上面并沒有體現typeScript的特殊價值
TypeScript的核心原則之一是對值所具有的結構進行類型檢查。 它有時被稱做“鴨式辨型法”或“結構性子類型化”。 在TypeScript里,接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。
//接口名為LabelledValue interface LabelledValue { label: string; } //函數傳入的參數 labelledObj遵循 LabelledValue接口 function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
以上代碼經過ts編譯后,所有接口和靜態類型都沒有了 :
function printLabel(labelledObj) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" }; printLabel(myObj);
如果ts在代碼編寫階段出現了類型的校驗錯誤,那么會直接提示:
我將接口的string改成了number類型
我們僅僅改變了接口的類型,就立刻檢驗到了錯誤,這樣不必等到開發模式下的熱更新調試后再報錯。
當然 你在接口定義時候,可以在變量后加上?號
這樣是一個可選屬性
例如:
interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare = {color: "white", area: 100}; if (config.color) { newSquare.color = config.color; } if (config.width) { newSquare.area = config.width * config.width; } return newSquare; } let mySquare = createSquare({color: "black"});
還有只讀屬性的接口定義:
interface Point { readonly x: number; readonly y: number; }
你可以通過賦值一個對象字面量來構造一個Point。 賦值后, x和y再也不能被改變了。
let p1: Point = { x: 10, y: 20 }; p1.x = 5; // error!
用得比較多的函數類型檢查
先編寫接口
interface SearchFunc { (source: string, subString: string): boolean; }
定義函數
let mySearch: SearchFunc; mySearch = function(source: string, subString: string) { let result = source.search(subString); return result > -1; }
對于函數類型的類型檢查來說,函數的參數名不需要與接口里定義的名字相匹配。 比如,我們使用下面的代碼重寫上面的例子:
let mySearch: SearchFunc; mySearch = function(src: string, sub: string): boolean { let result = src.search(sub); return result > -1; }
函數的參數會逐個進行檢查,要求對應位置上的參數類型是兼容的。 如果你不想指定類型,TypeScript的類型系統會推斷出參數類型,因為函數直接賦值給了 SearchFunc類型變量。 函數的返回值類型是通過其返回值推斷出來的(此例是 false和true)。 如果讓這個函數返回數字或字符串,類型檢查器會警告我們函數的返回值類型與 SearchFunc接口中的定義不匹配。
let mySearch: SearchFunc; mySearch = function(src, sub) { let result = src.search(sub); return result > -1; }
鴨式辨形法,說的是:一個動物長得看起來像鴨子,叫起來也像鴨子,那么它就可以被認為是鴨子
定義類的類型:
interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } }
一個接口可以繼承多個接口,創建出多個接口的合成接口。
interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; }
照本宣科寫了這么多,其實這些就是TS的最有用的地方。文檔寫得比較好,建議多去看幾遍,前提是一定要學好ES6!TS中一定要盡量避免使用any類型
any類型有太多不可預測的后果
function identity(arg: T): T { return arg; }
我們給identity添加了類型變量T。 T幫助我們捕獲用戶傳入的類型(比如:number),之后我們就可以使用這個類型。 之后我們再次使用了 T當做返回值類型。現在我們可以知道參數類型與返回值類型是相同的了。 這允許我們跟蹤函數里使用的類型的信息。
其他的API可以去刷文檔,下面說重點: 工程化環境:typescript遇上了webpack
React官方推薦使用typescript
使用傳統的 react腳手架
在 Create React App 中使用 TypeScript npx create-react-app my-app --typescript
typescript遇上webpack
切記 所有的ts的依賴,都必須是@types開頭的 否則用不了
配置tsconfig.json文件
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" }, "include": [ "./src/**/*" ] }
npm install --save react react-dom @types/react @types/react-dom
webpack.config.js配置文件
module.exports = { entry: "./src/index.tsx", output: { filename: "bundle.js", path: __dirname + "/dist" }, devtool: "source-map", resolve: { extensions: [".ts", ".tsx", ".js", ".json"] }, module: { rules: [ { test: /.tsx?$/, loader: "awesome-typescript-loader" }, { enforce: "pre", test: /.js$/, loader: "source-map-loader" } ] }, externals: { "react": "React", "react-dom": "ReactDOM" } };
大家可能對externals字段有所疑惑。 我們想要避免把所有的React都放到一個文件里,因為會增加編譯時間并且瀏覽器還能夠緩存沒有發生改變的庫文件。
webpack 4.39版配置typeScript
TS最基礎關鍵的核心思想,已經介紹完了我們不妨總結一下:
TS最核心的優勢 :
靜態類型檢查+校驗,代碼并沒有運行編譯,就已經知道哪里有問題了,無論是變量查找還是類型錯誤
TS給我們解決了什么問題
減少了開發溝通成本,打開你的代碼就知道傳入的是什么參數,返回什么參數。編譯后代碼量并沒有增加
TS給我們帶來了什么麻煩
多寫了很多接口,類型,一些快速開發的小項目感覺用上更麻煩。如果是比較古老的js插件第三方庫,還用不了,要另想其他辦法去支持。
大型項目,可以上ts,還是要上ts,中小型項目,看工期,看你是否打算在時間允許情況下嘗試使用ts。
技術本身沒有好壞,長遠看,弱類型語言并不是那么的友好。谷歌的Go語言,寫法就跟TypeScript很像,如果想要擁有更廣闊的技術視野,建議前端是可以從TS學起,他們的思想大都差不多。
最后,歡迎大家加入我們的segmentFault前端交流群,我的個人微信是:CALASFxiaotan,加我會拉你進群哦~
群里大把小姐姐等你們~
覺得寫得好,記得點個贊哦,永不脫發
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106962.html
摘要:它有時被稱做鴨式辨型法或結構性子類型化。在里,接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。賦值后,和再也不能被改變了。函數的返回值類型是通過其返回值推斷出來的此例是和。技術本身沒有好壞,長遠看,弱類型語言并不是那么的友好。 showImg(https://segmentfault.com/img/bVbwQe2?w=1792&h=1266); TypeScript不...
摘要:春招結果五月份了,春招已經接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底,截止今天,已經斬獲唯品會電商前端研發部大數據與威脅分析事業部京東精銳暑假實習生的騰訊的是早上打過來的。 春招結果 五月份了,春招已經接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底,截止今天,已經斬獲唯品...
摘要:準備不充分第一輪不過第一家,廣州琶洲一家環境超級好,福利也不錯,主營美顏的公司,這也是我最感遺憾的一次面試機會。主要是第一輪面試第一個問題的種數據類型,只答了一個。 前言 首先需要說明的一點,本人只是一個畢業一年,只有一年工作經驗的普通PHPer,能力有限,這篇文章只是將我這幾周來的感受和體驗分享出來,希望能給許多像我一樣,或者互聯網行業的新手帶來一些收獲,當然哪里說的不對或不足還是希...
摘要:可能是被領導拒絕漲薪給刺激了,就一直想著跳槽漲薪。還有就是那個不肯漲薪的領導,辭職以后,所有的都是,卻連都不愿意給我漲。 畢業1年時間,從2k漲到15k,轉行測試承...
閱讀 3981·2021-11-22 15:31
閱讀 2518·2021-11-18 13:20
閱讀 3098·2021-11-15 11:37
閱讀 6957·2021-09-22 15:59
閱讀 736·2021-09-13 10:27
閱讀 3767·2021-09-09 09:33
閱讀 1434·2019-08-30 15:53
閱讀 2562·2019-08-29 15:37