摘要:別急還沒說完我們使用操作符構造了類的一個實例,這會調用類的構造函數,按照定義對實例進行初始化注意為了兼容和,中的類會被編譯為中的函數。
前言:
“我們為需要構建和維護大型JavaScript程序的團隊設計了TypeScript,以滿足他們的需求。TypeScript可幫助他們在軟件組件之間定義接口,并且幫助理解現存JavaScript庫的行為。同時,使用TypeScript的團隊可以將代碼構建成動態加載的模塊,以減少命名沖突的問題。TypeScript可選的類型系統使開發者們可以使用一些高效的開發工具和最佳實踐:靜態檢查,基于符號的導航,代碼補全和代碼重構. 摘自——TypeScript語言特性”基本配置環境:
此部分直接開始我們的干貨之旅,以下是作者本人經過親身實踐,采用圖文并茂的方式給大家詳細講解基本上手配置環境的過程。
如果你用的是VsCode,那么作者為你感到高興,因為說明你與作者站到了一起。廢話不多說,先上干貨:
看見上圖你就知道你Ts的環境已經完成,下面你需要的是擼起袖子書寫你第一句HelloWorld吧!
2.如果你使用其他代碼編譯器或者使用的是OS X 或 Linux操作系統,可以下載一個NPM模塊,如果你不熟悉npm也不需要擔心,到目前為止,只需要知道它是Node包管理的標準并且是Node.js的默認包管理工具即可。為了能使用npm,你需要先在開發環境中安裝node.js。可以在Node.js的官方網站上https://node.js.org/找到相應...。(寫了這么多騷氣的告訴你,無論你用哪一種node已經無孔不入。已經不再是你的可選項,趕緊下載一個去吧!)對了! 別忘了 npm install -g typescript
3.繼續在命令行環境下鍵入 tsc -init 進行初始化,
你會發現根目錄下多了 tsconfig.json 的文件,記錄了編譯成JS的選項
打開該文件,會發現主要選項已經幫你設置好了,比較常用的設置是
”target” : 編譯為何種規范,一般設置為 ES5 或者 ES2016/2017
“outdir” : 輸出目錄
“alwaysStrict” : 打開嚴格模式 (‘use strict’)
命令行下輸入 code . 打開VSCode進入該目錄,按下 Ctrl+shift+B 快捷鍵會進行編譯,初次編譯會選擇編譯模式,如下圖所示:
我們在此處選擇監視模式,這樣基于以上的幾點就完成了Ts的基本配置任務
類型經過作者(*中保)在前面一段云里霧里的講解不知道給大家講懂了多少,如果還有細節不理解的地方可以聯系作者本人,接下來就要介紹類型:
先擼一把概念:首先我們已經了解了TypeScript是JavaScript的超集,TypeScript通過向JavaScript增加可選的靜態類型聲明來把JavaScript變成強類型的程序語言。可選的靜態類型聲明可約束函數,變量,屬性等程序實體,這樣編譯器和相應的開發工具就可以在開發過程中提供更好的正確性驗證和幫助功能,大家看到這的朋友如果是滿嘴我靠,我靠,我靠。說的什么,感覺好專業一句聽不懂。作者本人為了讓大家接受到最專業的類型解釋語句,是在自己的書中,結合視屏學習過程中抽離了精華,進行了語句本身的重構。嘻嘻看到這里如果還覺的少給我裝逼有干貨沒?說了這么多請看作者自己實際操作的下圖:
寫到這里還有很多朋友問我,你最喜歡Ts的什么地方,目前來講:1.強類型特性能讓程序員對自己和其他開發團隊成員在代碼中表達出意圖 2.TypeScript類型檢測在編譯時期進行并且沒有運行時的開銷。
此處溫馨提示一下,let與const關鍵字在TypeScript1.4中就可以使用了,但只有在編譯目標為ECMAScript6或者以上時才可用,大家如果想使用還需要手動在package.json中手動配置下方可使用。
2.接下來就是我們講述類型的重中之重了,既然本章節是講類型,先帶大家了解下Ts的基本類型(此處與JS略有不同希望大家仔細閱讀)
基本類型有boolean,number,string,array,void和所有用戶自定義的enum類型。(此處大家要重點了解的是所有上述講到的類型在TS中,都是一個唯一的頂層的AnyType類型的子類型,any關鍵字代表這種類型。讓我們看一下這些原始類型。下面是我本人整合的一些內容基本都在這里了)
此處不知道大家有沒有什么想法?(反正我是沒有),接下來就給大家介紹一種聯合類型(以圖中的內容為主)。
聯合類型用來聲明那些可以存儲多種類型值的變量。在上面這個例子中,我們聲明了一個可以存儲一個(字符串)或者一組路徑(字符串數組)的變量Lzb。在例子中,我們也對這個變量進行了賦值,將字符串和字符串的數組合法地賦值給了這個變量。然而,當試圖將一個數字賦值給它時我們遇到了一個編譯錯誤,因為這個聯合類型并沒有聲明number為它的合法類型。
此處我給大家介紹一部分函數的內容(此部分內容個人認為尤為重要):且看下圖
下面是將Ts轉換為JS后的內容繼續看下圖:
在ECMAScript6(即最新版本的JavaScript)中,添加了基于類的面向對象編程語法。由于TS是基于ES6的,所以開發者如今就已經可以開始使用基于類的面向對象的語法中了。TS的編譯器會負責將TS代碼編譯為兼容主流瀏覽器和平臺的JavaScript代碼。
讓我們來看一個在TS中定義類的例子:(如下圖所示)
簡單來講,在上面的例子里,我們一起定義了一個名為Character的新類。這個類有三個成員:一個名為fullname的屬性,一個構造函數constructor,和一個greet方法。當我們在Ts中聲明類時,所有的屬性和方法默認都是公共的。或許你可能已經留意到,當(在對象內部)訪問對象內的成員時,我們都在前面加上了this操作符,this操作符表明了這是一個成員訪問操作(好吧,排除前面一大段日常裝逼操作,返璞歸真的來說,如果你在類內部想定義一個屬性,如果你不在構造函數constructor中this給其賦值的話,用有道詞典的話來講屬性“fullname”沒有初始化器,也沒有在構造函數中明確指定。)簡單來講就會報錯。別急還沒說完(我們使用new操作符構造了Character類的一個實例,這會調用類的構造函數,按照定義對實例進行初始化)
注意:為了兼容ECMAScript3 和 ECMAScript5,TS中的類會被編譯為JavaScript中的函數。函數
在學習這部分內容之前必須先隆重介紹下我們的函數:函數是任何TypeScript應用程序中的基礎功能塊,它們非常強大,我們最開始接觸函數概念應該是在數學當中,記得當時講解的是:函數是執行某項特定功能的模塊。同樣這樣的概念,也可以延伸到我們的編程當中。
函數聲明和函數表達式:
函數在TS中分為了顯示指定函數名稱的(命名函數)和不顯示指定名稱的(匿名函數)我們看下圖代碼來具體理解
人生若只如初見,你會感覺什么都很美好!就和上面這兩種函數一樣(那么的熟悉,那么的相似),但是它們的行為并不一樣,解釋器會首先在代碼解釋階段執行函數聲明,而另一方面,除非函數表達式被賦值。否則就不會被執行。(好吧,到這里我相信我需要再用白話來解釋下,簡單的來講如果你僅僅是函數聲明,像圖中的第一個函數的形式的話,你的調用可以發生在前后都可以,但是如果是第二種則會發生變量提升的過程,所以如果你是在之前去調用的話,結果就和圖中的一樣畫了個紅線。)
函數的類型
先看下面截圖我們再做解釋:
在上述函數中,我們定義了參數name的類型(string)和返回值類型(string).有時候我們不只需要定義函數中元素的類型,還需要定義函數本身的類型。讓我們再看下下面這個截圖:
在上述例子中,我們聲明了變量greetUnnamed 及其類型。greetUnnamed的類型是一個只包含一個名為name的string類型參數,在調用后返回類型為string的函數。在聲明了這個變量之后,一個完全符合變量類型的函數被賦值給了它。我們也可以聲明greetUnnamed的類型,并在同一行中將一個函數賦值給它,而不是分割成兩行,比如下面這個例子:
就像上面這個例子,之前的代碼片段中同樣聲明了變量greetUnnamed和它的類型。我們也可以在同一行中把一個函數賦值給這個變量,被賦值的函數類型必須與變量類型相同。
有可選參數的函數
與JavaScript 不同,調用函數時傳的參數的數量或類型不符合函數中定義的參數要求時,TypeScript編譯器會報錯。讓我們通過一個代碼示例來證明這點:
上述函數名為Add并包含三個number類型參數:LZB,Bar,LZBbar。如果調用這個函數時沒有完整地傳入三個參數,會得到一個編譯錯誤,提示提供的參數與函數聲明中的參數無法匹配。
在一些場景下,我們也許想調用這個函數且不提供所有的參數。TypeScript提供了一個函數可選參數的特性,可以幫助增加這個函數的靈活性。可以在TypeScript中通過在函數參數后追加一個字符?,指定函數參數是可選的。更新一下前面的函數,將LZBbar參數從必選參數修改為可選參數。
請看清楚,我們在此將參數LZBbar的名稱更改為了LZBbar?,并在函數內部檢測LZBbar參數是否被提供。修改后,在我們提供兩個或者三個參數調用這個函數時,TypeScript編譯器不再拋出錯誤。
值得注意的是,可選參數必須位于必選參數列表的后面。
有默認參數的函數
當函數有可選參數時,我們必須檢測參數是否被傳遞了(就像上一個例子中那樣)。
在一些場景中,應為一個可選參數設置默認值。可以使用內聯if結構重寫Add函數(從上一個代碼片段中)
這個函數并沒有錯誤,但是可以通過提供LZBbar參數的默認值,來代替標記其為可選參數,以改善其可讀性。
我們只需要在聲明函數簽名時使用 = 操作符提供一個默認值,即可指定函數參數是可選的。TypeScript編譯器會在JavaScript輸出結果中生成一個if結構,在LZBbar參數沒有傳遞給函數時設置一個默認值。
有剩余參數的函數
我們已經了解了如何使用可選和默認參數來改善函數調用。讓我們再回到上一個例子中:
我們在之前的學習過程中已經學習到了如何調用Add函數并傳遞兩個或者三個參數,但是如果希望允許其他開發者傳遞四個或者五個參數呢?不得不再添加兩個額外的默認或者可選參數。那如果希望允許開發者傳遞任意數量的參數呢?解決方案是使用剩余參數。剩余參數語法允許把不限量的參數表示為一個數組(這一做法非常類似于原生JS中的arguments):
看一下上述代碼片段,我們用一個參數LZB替換了之前的參數。你會注意到,參數LZB前面有一個三個點的省略號。一個剩余參數必須包含一個數組類型,否則就會出現編譯錯誤。我們現在可以以任意數量的參數調用Add函數:
雖然沒有具體的參數數量限制,理論上可以取數字類型的最大值。但實際上,這依賴于如何調用這個函數。
JavaScript函數有一個被稱為arguments的內建對象,這個對象可以通過arguments局部變量取到。arguments變量是一個非常像數組的對象,包含了調用函數時的所有參數。(如果我們檢查JavaScript的輸出會發現,TypeScript遍歷arguments參數,以便將所有參數添加到foo變量中:)
對這個額外的針對函數參數的遍歷存在一些爭議。雖然難以想象這個額外的遍歷是否會成為一個性能瓶頸,但是如果你認為這可能會對應用程序帶來性能問題,應考慮不使用剩余參數而是只使用一個數組作為函數參數。
上述代碼只有一個包含了number類型的數組。調用API會和剩余參數有一些不同,但是可以去除對函數參數列表進行遍歷的操作:
函數作用域
一些低級語言(比如C語言)包含了底層內存管理特性。在擁有更高層抽象的編程語言(比如TypeScript)中,當變量被創建時,內存就已經被分配,并且在它們不被使用時會被清理掉。這個清理內存的過程被稱為垃圾回收,由JavaScript運行時的垃圾回收器實現。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53655.html
摘要:可以做做不到的事情。看完這段代碼就不難理解文檔中所說的會返回一個帶有個的函數了。進階深入探究源碼我們知道在版本后,在加載模塊時,可以指定模塊加載模式,我們能使用幾種方式來控制我們要加載的模塊。 前言 require.context 其實是一個非常實用的 api。但是 3-4 年過去了,卻依舊還有很多人不知道如何使用。 而這個 api 主要為我們做什么樣的事情?它可以幫助我們動態加載我們...
摘要:是的超級,遵循最新的規范相當于包含了的語法。表示方法沒有返回任何類型類型表示的是那些永不存在的值的類型,例如異常錯誤寫法錯誤三函數內容概述函數的定義可選參數默認參數剩余參數函數重載箭頭函數。 一、Typescript 介紹、環境搭建 1.1 Typescript 介紹 1.TypeScript 是由微軟開發的一款開源的編程語言,像后端 java、C#這樣的面向對象語言可以讓 js 開發...
摘要:本套課程包含兩大部分,第一部分是基礎部分,也是重要部分,參考官方文檔結構,針對內容之間的關聯性和前后順序進行合理調整。 showImg(https://segmentfault.com/img/bVbpBA0?w=1460&h=400); 講師簡介: iview 核心開發者,iview-admin 作者,百萬級虛擬渲染表格組件 vue-bigdata-table 作者。目前就職于知名互...
閱讀 852·2023-04-25 23:59
閱讀 3748·2021-10-08 10:04
閱讀 1684·2019-08-30 14:05
閱讀 1018·2019-08-30 13:58
閱讀 494·2019-08-29 18:41
閱讀 1130·2019-08-29 17:15
閱讀 2324·2019-08-29 14:13
閱讀 2749·2019-08-29 13:27