ts靜態編譯
1. appjs和appts有什麼區別
動態和靜態、重載概念。
1、appts需要靜態編譯,它提供了強類型與更多面向對象的內容,沒有重載概念。
2、appts有可以重載,動態類語言相對更靈活。
2. ts與js最大的區別是什麼呢
一、程序不同:
ts需要靜態編譯,它提供了強類型與更多面向對象的內容。TypeScript是javaScript的超集,可以編譯成純JavaScript。這個和我們CSS離的Less或者Sass是很像的,用更好的代碼編寫方式來進行編寫,最後還是友好生成原生的JavaScript語言。
二、運行不同:
ts最終仍要編譯為弱類型的js文件,基於對象的原生的js在運行。故ts相較java/C#這樣天生面向對象語言是有區別和局限的,TypeScript是一個應用程序級的JavaScript開發語言。這也表示TypeScript比較牛逼,可以開發大型應用,或者說更適合開發大型應用。
主要功能
TypeScript的作者是安德斯·海爾斯伯格,C#的首席架構師,它是開源和跨平台的編程語言。它是JavaScript的一個超集,而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。
TypeScript擴展了JavaScript的語法,所以任何現有的JavaScript程序可以運行在TypeScript環境中。TypeScript是為大型應用的開發而設計,並且可以編譯為JavaScript。
3. TypeScript 入門指南
新系列 深入淺出TypeScript 來了,本系列至少20+篇。本文為第一篇,來介紹一下TypeScript 以及常見的類型。
TypeScript是一門由微軟推出的開源的、跨平台的編程語言。它是JavaScript的超集,擴展了 JavaScript 的語法,最終會被編譯為JavaScript代碼。
TypeScript的主要特性:
TypeScript 主要是為了實現以下兩個目標:
下面就來看看這兩個目標是如何實現的。
為什麼要給JavaScript加上類型呢?
我們知道,JavaScript是一種輕量級的解釋性腳本語言。也是弱類型、動態類型語言,允許隱式轉換,只有運行時才能確定變數的類型。正是因為在運行時才能確定變數的類型,JavaScript代碼很多錯誤在運行時才能發現。TypeScript在JavaScript的基礎上,包裝了類型機制,使其變身成為 靜態類型 語言。在 TypeScript 中,不僅可以輕易復用 JavaScript 的代碼、最新特性,還能使用可選的靜態類型進行檢查報錯,使得編寫的代碼更健壯、更易於維護。
下面是 JavaScript 項目中最常見的十大錯誤,如果使用 TypeScript,那麼在 編寫階段 就可以發現並解決很多 JavaScript 錯誤了:
類型系統能夠提高代碼的質量和可維護性,經過不斷的實踐,以下兩點尤其需要注意:
可以認為,在所有操作符之前,TypeScript 都能檢測到接收的類型(在代碼運行時,操作符接收的是實際數據;在靜態檢測時,操作符接收的則是類型)是否被當前操作符所支持。當 TypeScript 類型檢測能力覆蓋到所有代碼後,任意破壞約定的改動都能被自動檢測出來,並提出類型錯誤。因此,可以放心地修改、重構業務邏輯,而不用擔憂因為考慮不周而犯下低級錯誤。
在一些語言中,類型總是有一些不必要的復雜的存在方式,而 TypeScript 盡可能地降低了使用門檻,它是通過如下方式來實現的。
TypeScript 與 JavaScript 本質並無區別,我們可以將 TypeScipt 理解為是一個添加了類型註解的 JavaScript,為JavaScript代碼提供了編譯時的類型安全。
實際上,TypeScript 是一門「 中間語言 」,因為它最終會轉化為JavaScript,再交給瀏覽器解釋、執行。不過 TypeScript 並不會破壞 JavaScript 原有的體系,只是在 JavaScript 的基礎上進行了擴展。
准確的說,TypeScript 只是將JavaScript中的方法進行了標准化處理:
這段代碼在TypeScript中就會報錯,因為TS會知道a是一個數字類型,不能將其他類型的值賦值給a,這種類型的推斷是很有必要的。
上面說了,TypeScript會盡可能安全的推斷類型。我們也可以使用類型注釋,以實現以下兩件事:
在一些語言中,類型總是有一些不必要的復雜的存在方式,而 TypeScript 的類型是結構化的。比如下面的例子中,函數會接受它所期望的參數:
為了便於把 JavaScript 代碼遷移至 TypeScript,即使存在編譯錯誤,在默認的情況下,TypeScript 也會盡可能的被編譯為 JavaScript 代碼。因此,我們可以將JavaScript代碼逐步遷移至 TypeScript。
雖然 TypeScript 是 JavaScript 的超集,但它始終緊跟ECMAScript標准,所以是支持ES6/7/8/9 等新語法標準的。並且,在語法層面上對一些語法進行了擴展。TypeScript 團隊也正在積極的添加新功能的支持,這些功能會隨著時間的推移而越來越多,越來越全面。
雖然 TypeScript 比較嚴謹,但是它並沒有讓 JavaScript 失去其靈活性。TypeScript 由於兼容 JavaScript 所以靈活度可以媲美 JavaScript,比如可以在任何地方將類型定義為 any(當然,並不推薦這樣使用),畢竟 TypeScript 對類型的檢查嚴格程度是可以通過 tsconfig.json 來配置的。
在搭建TypeScript環境之前,先來看看適合TypeScript的IDE,這里主要介紹Visual Studio Code,筆者就一直使用這款編輯器。
VS Code可以說是微軟的親兒子了,其具有以下優勢:
因為 VS Code 中內置了特定版本的 TypeScript 語言服務,所以它天然支持 TypeScript 語法解析和類型檢測,且這個內置的服務與手動安裝的 TypeScript 完全隔離。因此, VS Code 支持在內置和手動安裝版本之間動態切換語言服務,從而實現對不同版本的 TypeScript 的支持。
如果當前應用目錄中安裝了與內置服務不同版本的 TypeScript,我們就可以點擊 VS Code 底部工具欄的版本號信息,從而實現 「use VS Code's Version」 和 「use Workspace's Version」 兩者之間的隨意切換。
除此之外,VS Code 也基於 TypeScript 語言服務提供了准確的代碼自動補全功能,並顯示詳細的類型定義信息,大大的提升了我們的開發效率。
1)全局安裝TypeScript:
2)初始化配置文件:
執行之後,項目根目錄會出現一個 tsconfig.json 文件,裡麵包含ts的配置項(可能因為版本不同而配置略有不同)。
可以在 package.json 中加入script命令:
3)編譯ts代碼:
TSLint 是一個通過 tslint.json 進行配置的插件,在編寫TypeScript代碼時,可以對代碼風格進行檢查和提示。如果對代碼風格有要求,就需要用到TSLint了。其使用步驟如下: (1)在全局安裝TSLint:
(2)使用TSLint初始化配置文件:
執行之後,項目根目錄下多了一個 tslint.json 文件,這就是TSLint的配置文件了,它會根據這個文件對代碼進行檢查,生成的 tslint.json 文件有下面幾個欄位:
這些欄位的含義如下;
在說TypeScript數據類型之前,先來看看在TypeScript中定義數據類型的基本語法。
在語法層面,預設類型註解的 TypeScript 與 JavaScript 完全一致。因此,可以把 TypeScript 代碼的編寫看作是為 JavaScript 代碼添加類型註解。
在 TypeScript 語法中,類型的標注主要通過類型後置語法來實現:「 變數: 類型 」
在 JavaScript 中,原始類型指的是 非對象且沒有方法 的數據類型,包括:number、boolean、string、null、undefined、symbol、bigInt。
它們對應的 TypeScript 類型如下:
JavaScript原始基礎類型TypeScript類型 numbernumber booleanboolean stringstring nullnull undefinendefined symbolsymbol bigIntbigInt
需要注意 number 和 Number 的區別:TypeScript中指定類型的時候要用 number ,這是TypeScript的類型關鍵字。而 Number 是 JavaScript 的原生構造函數,用它來創建數值類型的值,這兩個是不一樣的。包括 string 、 boolean 等都是TypeScript的類型關鍵字,而不是JavaScript語法。
TypeScript 和 JavaScript 一樣,所有數字都是 浮點數 ,所以只有一個 number 類型。
TypeScript 還支持 ES6 中新增的二進制和八進制字面量,所以 TypeScript 中共支持 2、8、10和16 這四種進制的數值:
字元串類型可以使用單引號和雙引號來包裹內容,但是如果使用 Tslint 規則,會對引號進行檢測,使用單引號還是雙引號可以在 Tslint 規則中進行配置。除此之外,還可以使用 ES6 中的模板字元串來拼接變數和字元串會更為方便。
類型為布爾值類型的變數的值只能是true或者false。除此之外,賦值給布爾值的值也可以是一個計算之後結果為布爾值的表達式:
在 JavaScript 中,undefined和 null 是兩個基本數據類型。在 TypeScript 中,這兩者都有各自的類型,即 undefined 和 null,也就是說它們既是實際的值,也是類型。這兩種類型的實際用處不是很大。
注意,第一行代碼可能會報一個tslint的錯誤: Unnecessary initialization to 'undefined' ,就是不能給一個變數賦值為undefined。但實際上給變數賦值為undefined是完全可以的,所以如果想讓代碼合理化,可以配置tslint,將" no-unnecessary-initializer "設置為 false 即可。
默認情況下,undefined 和 null 是所有類型的子類型,可以賦值給任意類型的值,也就是說可以把 undefined 賦值給 void 類型,也可以賦值給 number 類型。當在 tsconfig.json 的"compilerOptions"里設置為 "strictNullChecks": true 時,就必須嚴格對待了。這時 undefined 和 null 將只能賦值給它們自身或者 void 類型。這樣也可以規避一些錯誤。
BigInt是ES6中新引入的數據類型,它是一種內置對象,它提供了一種方法來表示大於 2- 1 的整數,BigInt可以表示任意大的整數。
使用 BigInt 可以安全地存儲和操作大整數,即使這個數已經超出了JavaScript構造函數 Number 能夠表示的安全整數范圍。
我們知道,在 JavaScript 中採用雙精度浮點數,這導致精度有限,比如 Number.MAX_SAFE_INTEGER 給出了可以安全遞增的最大可能整數,即 2- 1 ,來看一個例子:
可以看到,最終返回了true,這就是超過精讀范圍造成的問題,而 BigInt 正是解決這類問題而生的:
這里需要用 BigInt(number) 把 Number 轉化為 BigInt ,同時如果類型是 BigInt ,那麼數字後面需要加 n 。
在TypeScript中, number 類型雖然和 BigInt 都表示數字,但是實際上兩者類型是完全不同的:
symbol我們平時用的比較少,所以可能了解也不是很多,這里就詳細來說說symbol。
symbol 是 ES6 新增的一種基本數據類型,它用來表示獨一無二的值,可以通過 Symbol 構造函數生成。
注意:Symbol 前面不能加 new關鍵字,直接調用即可創建一個獨一無二的 symbol 類型的值。
可以在使用 Symbol 方法創建 symbol 類型值的時候傳入一個參數,這個參數需要是一個字元串。如果傳入的參數不是字元串,會先自動調用傳入參數的 toString 方法轉為字元串:
上面代碼的第三行可能會報一個錯誤:This condition will always return 'false' since the types 'unique symbol' and 'unique symbol' have no overlap. 這是因為編譯器檢測到這里的 s1 === s2 始終是false,所以編譯器提醒這代碼寫的多餘,建議進行優化。
上面使用Symbol創建了兩個symbol對象,方法中都傳入了相同的字元串,但是兩個symbol值仍然是false,這就說明了 Symbol 方法會返回一個獨一無二的值。Symbol 方法傳入的這個字元串,就是方便我們區分 symbol 值的。可以調用 symbol 值的 toString 方法將它轉為字元串:
在TypeScript中使用symbol就是指定一個值的類型為symbol類型:
在ES6中,對象的屬性是支持表達式的,可以使用於一個變數來作為屬性名,這對於代碼的簡化有很多用處,表達式必須放在大括弧內:
symbol 也可以作為屬性名,因為symbol的值是獨一無二的,所以當它作為屬性名時,不會與其他任何屬性名重復。當需要訪問這個屬性時,只能使用這個symbol值來訪問(必須使用方括弧形式來訪問):
在使用obj.name訪問時,實際上是字元串name,這和訪問普通字元串類型的屬性名是一樣的,要想訪問屬性名為symbol類型的屬性時,必須使用方括弧。方括弧中的name才是我們定義的symbol類型的變數name。
使用 Symbol 類型值作為屬性名,這個屬性是不會被 for…in遍歷到的,也不會被 Object.keys() 、 Object.getOwnPropertyNames() 、 JSON.stringify() 等方法獲取到:
雖然這些方法都不能訪問到Symbol類型的屬性名,但是Symbol類型的屬性並不是私有屬性,可以使用 Object.getOwnPropertySymbols 方法獲取對象的所有symbol類型的屬性名:
除了這個方法,還可以使用ES6提供的 Reflect 對象的靜態方法 Reflect.ownKeys ,它可以返回所有類型的屬性名,Symbol 類型的也會返回:
Symbol 包含兩個靜態方法, for 和 keyFor 。 1)Symbol.for()
用Symbol創建的symbol類型的值都是獨一無二的。使用 Symbol.for 方法傳入字元串,會先檢查有沒有使用該字元串調用 Symbol.for 方法創建的 symbol 值。如果有,返回該值;如果沒有,則使用該字元串新創建一個。使用該方法創建 symbol 值後會在全局范圍進行注冊。
上面代碼中,創建了一個iframe節點並把它放在body中,通過這個 iframe 對象的 contentWindow 拿到這個 iframe 的 window 對象,在 iframe.contentWindow上添加一個值就相當於在當前頁面定義一個全局變數一樣。可以看到,在 iframe 中定義的鍵為 TypeScript 的 symbol 值在和在當前頁面定義的鍵為'TypeScript'的symbol 值相等,說明它們是同一個值。
2)Symbol.keyFor() 該方法傳入一個 symbol 值,返回該值在全局注冊的鍵名:
看完簡單的數據類型,下面就來看看比較復雜的數據類型,包括JavaScript中的數組和對象,以及TypeScript中新增的元組、枚舉、Any、void、never、unknown。
在 TypeScript 中有兩種定義數組的方式:
以上兩種定義數組類型的方式雖然本質上沒有任何區別,但是更推薦使用第一種形式來定義。一方面可以避免與 JSX 語法沖突,另一方面可以減少代碼量。
注意,這兩種寫法中的 number 指定的是數組元素的類型,也可以在這里將數組的元素指定為其他任意類型。如果要指定一個數組里的元素既可以是數值也可以是字元串,那麼可以使用這種方式: number|string[] 。
在JavaScript中,object是引用類型,它存儲的是值的引用。在TypeScript中,當想讓一個變數或者函數的參數的類型是一個對象的形式時,可以使用這個類型:
可以看到,當給一個對象類型的變數賦值一個對象時,就會報錯。對象類型更適合以下場景:
在 JavaScript 中並沒有元組的概念,作為一門動態類型語言,它的優勢是支持多類型元素數組。但是出於較好的擴展性、可讀性和穩定性考慮,我們通常會把不同類型的值通過鍵值對的形式塞到一個對象中,再返回這個對象,而不是使用沒有任何限制的數組。TypeScript 的元組類型正好彌補了這個不足,使得定義包含固定個數元素、每個元素類型未必相同的數組成為可能。
元組可以看做是數組的擴展,它表示已知元素數量和類型的數組,它特別適合用來實現多值返回。確切的說,就是已知數組中每一個位置上的元素的類型,可以通過元組的索引為元素賦值::
可以看到,定義的arr元組中,元素個數和元素類型都是確定的,當為arr賦值時,各個位置上的元素類型都要對應,元素個數也要一致。
當訪問元組元素時,TypeScript也會對元素做類型檢查,如果元素是一個字元串,那麼它只能使用字元串方法,如果使用別的類型的方法,就會報錯。
在TypeScript 新的版本中,TypeScript會對元組做越界判斷。超出規定個數的元素稱作越界元素,元素賦值必須類型和個數都對應,不能超出定義的元素個數。
這里定義了介面 Tuple ,它繼承數組類型,並且數組元素的類型是 number 和 string 構成的聯合類型,這樣介面 Tuple 就擁有了數組類型所有的特性。並且指定索引為0的值為 string 類型,索引為1的值為 number 類型,同時指定 length 屬性的類型字面量為 2,這樣在指定一個類型為這個介面 Tuple 時,這個值必須是數組,而且如果元素個數超過2個時,它的length就不是2是大於2的數了,就不滿足這個介面定義了,所以就會報錯;當然,如果元素個數不夠2個也會報錯,因為索引為0或1的值缺失。
TypeScript 在 ES 原有類型基礎上加入枚舉類型,使得在 TypeScript 中也可以給一組數值賦予名字,這樣對開發者比較友好。枚舉類型使用enum來定義:
上面定義的枚舉類型的Roles,它有三個值,TypeScript會為它們每個值分配編號,默認從0開始,在使用時,就可以使用名字而不需要記數字和名稱的對應關系了:
除此之外,還可以修改這個數值,讓SUPER_ADMIN = 1,這樣後面的值就分別是2和3。當然還可以給每個值賦予不同的、不按順序排列的值:
我們可以將一個值定義為any類型,也可以在定義數組類型時使用any來指定數組中的元素類型為任意類型:
any 類型會在對象的調用鏈中進行傳導,即any 類型對象的任意屬性的類型都是 any,如下代碼所示:
需要注意:不要濫用any類型,如果代碼中充滿了any,那TypeScript和JavaScript就毫無區別了,所以除非有充足的理由,否則應該盡量避免使用 any ,並且開啟禁用隱式 any 的設置。
void 和 any 相反,any 是表示任意類型,而 void 是表示沒有類型,就是什麼類型都不是。這在 定義函數,並且函數沒有返回值時會用到 :
需要注意: void 類型的變數只能賦值為 undefined 和 null ,其他類型不能賦值給 void 類型的變數。
never 類型指永遠不存在值的類型,它是那些 總會拋出異常 或 根本不會有返回值的函數表達式的返回值 類型,當變數被永不為真的類型保護所約束時,該變數也是 never 類型。
下面的函數,總是會拋出異常,所以它的返回值類型是never,用來表明它的返回值是不存在的:
never 類型是任何類型的子類型,所以它可以賦值給任何類型;而沒有類型是 never 的子類型,所以除了它自身以外,其他類型(包括 any 類型)都不能為 never 類型賦值。
上面代碼定義了一個立即執行函數,函數體是一個死循環,這個函數調用後的返回值類型為 never,所以賦值之後 neverVariable 的類型是 never 類型,當給neverVariable 賦值 123 時,就會報錯,因為除它自身外任何類型都不能賦值給 never 類型。
基於 never 的特性,我們可以把 never 作為介面類型下的屬性類型,用來禁止操作介面下特定的屬性:
可以看到,無論給 props.name 賦什麼類型的值,它都會提示類型錯誤,這就相當於將 name 屬性設置為了只讀 。
unknown 是TypeScript在3.0版本新增的類型,主要用來描述類型並不確定的變數。它看起來和any很像,但是還是有區別的,unknown相對於any更安全。
對於any,來看一個例子:
上面這些語句都不會報錯,因為value是any類型,所以後面三個操作都有合法的情況,當value是一個對象時,訪問name屬性是沒問題的;當value是數值類型的時候,調用它的toFixed方法沒問題;當value是字元串或數組時獲取它的length屬性是沒問題的。
當指定值為unknown類型的時候,如果沒有 縮小類型範圍 的話,是不能對它進行任何操作的。總之,unknown類型的值不能隨便操作。那什麼是類型範圍縮小呢?下面來看一個例子:
這里由於把value的類型縮小為Date實例的范圍內,所以進行了value.toISOString(),也就是使用ISO標准將 Date 對象轉換為字元串。
使用以下方式也可以縮小類型範圍:
關於 unknown 類型,在使用時需要注意以下幾點:
在實際使用中,如果有類型無法確定的情況,要盡量避免使用 any,因為 any 會丟失類型信息,一旦一個類型被指定為 any,那麼在它上面進行任何操作都是合法的,所以會有意想不到的情況發生。因此如果遇到無法確定類型的情況,要先考慮使用 unknown。
4. 什麼是ts 編程
什麼是ts
ts是js的超集,意味著js本身的語法在ts裡面也能跑的通。ts一方面是對js加上了很多條條框框的限制,另一方面是拓展了js的一些能力,就像es6提供了那麼多神奇的語法糖一樣。只要按照一定的規則去書寫js,就能享受到ts帶來的好處。
當然因為現在的ts足夠強大,並且有自家的vscode保駕護航,才方便了我們這些過去想都不(lan)敢(de)想的苦逼程序員。
js改造成ts的工作量很大程度取決於你想對自己的代碼限制的有多細致,描述的有多完善。最簡單的就像上面說的,改個拓展名就行了(當然很大程度上可能會通過不了各種靜態檢查)。如果你寫的越多,用你代碼的同志就越大可能喜歡你寫的東西。
5. java語言在被設計的時候為什麼會加上 編譯 這一步
java語言在被設計的時候為什麼會加上編譯這一步,其實主要的考慮因素是性能,靜態語言的執行效率比動態語言要高得多。所以需要編譯。
6. 小白准備轉行學習前端,有大神可以提一些建議嗎
學習是以興趣為前提的,你要對你所要學的內容產生興趣,這樣你才會花心思去學習。這和是不是小白沒關系的,對於小白而言,在學習過程中就需要更努力,多花時間和心思沒有什麼是學不會的。
自學方法:
1、作為一個初學者,你必須明確系統的學習方案,我建議一定有一個指導的人,全靠自己學,放棄的幾率非常大,在你對於web前端還沒有任何概念的時候,需要一個人領進門,之後就都靠自己鑽研,第一步就是確定web前端都需要哪些內容,並且在多少時間內學完,建議時間6個月保底。
2、視頻為主,書為輔。很多初學者在學習前端的時候非常喜歡去買書,但是最後的結果是什麼?看來看去什麼都不會寫,所以在這里給大家提醒,書可以看,但是是在建立於你已經對於某個知識點有了具體操作的執行後,在用書去鞏固概念,這樣更加利於你對於知識的理解。
3、對於學習技術來講,掌握一個學習方法是非常重要的,其實對於學習web前端來講,學習方法確實很多都是相通的,一旦學習方法不對,可能就會造成「方法不對,努力白費」。其實關於這方面還是很多的,我就簡單說個例子,有的人邊聽課邊跟著敲代碼,這樣就不對,聽課的時候就專心聽,做題的時候就專心做題,這都是過來人的經驗,一定要聽。根據每個人的不同,可能學習方法也會有所出路,找到適合你自己的學習法方法是學習的前提。
4、不建議自己一個人瞎學,在我了解學習編程的這些人來看,從零基礎開始學並且最後成功做這份工作的其實並沒有幾個,我覺得大部分原因就是因為他們都不了解web前端是干什麼的,學什麼的,就盲目的買書看,到處找視頻看,最後看著看著就放棄了,所以我建議初學者在沒有具體概念之前,還是找有經驗的人請教一下,聊過之後你就會知道web前端具體是干什麼的,該怎麼學,這是我個人的小建議,可以不採納。
自學路線:
第1階段:前端頁面重構(4周)
內容包含了:(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段:JavaScript高級程序設計(5周)
內容包含:(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段:PC端全棧項目開發(3周)
內容包含:(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段:移動端項目開發(6周)
內容包含:(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段:混合(Hybrid,ReactNative)開發(1周)
內容包含:(微信小程序開發、ReactNative、各類混合應用開發)
第6階段:NodeJS全棧開發(1周)
內容包括:(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL資料庫)
視頻教程:
網頁鏈接
網頁鏈接
如果你對於學習前端有任何不懂的可以隨時來問我,如果沒有比較好的教程,也可以問我要。
7. ts和js有什麼區別
ts需要靜態編譯,它提供了強類型與更多面向對象的內容。
ts最終仍要編譯為弱類型的js文件,基於對象的原生的js,再運行。故ts相較java/C#這樣天生面向對象語言是有區別和局限的
ts是由微軟牽頭主導的,主要來自C#
TypeScript是一個應用程序級的JavaScript開發語言。(這也表示TypeScript比較牛逼,可以開發大型應用,或者說更適合開發大型應用)
TypeScript是JavaScript的超集,可以編譯成純JavaScript。這個和我們CSS離的Less或者Sass是很像的,
我們用更好的代碼編寫方式來進行編寫,最後還是友好生成原生的JavaScript語言。
TypeScript跨瀏覽器、跨操作系統、跨主機、且開源。由於最後他編譯成了JavaScript所以只要能運行JS的地方,都可以運行我們寫的程序,設置在node.js里。
TypeScript始於JavaScript,終於JavaScript。遵循JavaScript的語法和語義
TypeScript可以重用JavaScript代碼,調用流行的JavaScript庫。
TypeScript提供了類、模塊和介面,更易於構建組件和維護。
8. ts插件加蓋在哪
可用對象的方法寫,或者使用已有的模塊,如果不使用這兩種方法是不能靜態編譯的。
9. 動態語言會淘汰靜態語言嗎
,盡管沒有我想像的那麼多爭議,但還是如期引發了一些誤解。有一些朋友指出動態語言,具體來說是 Python 中的各種問題。這些我認為是大部分是正確的。
我寫上文的用意,在於討論動態語言使用過程中,關於質量控制的必要性,以及其引發的性價比方面的爭議。這並不表示動態語言全面的優於靜態語言,更不表示靜態語言會被動態語言全面的取代。進一步,這里我簡單的說一下,我所認識到的,靜態語言相對的優越性,和存在意義。
這里首先我表達一下我一貫的觀點:計算機不會魔法。具體來說兩方面,一是離機器越近,性能上越有可能達到更快;二是目前的機器模型,總是以線性方式管理數據的(值得吐槽的是在操作系統以上,文件分區系統也總是這樣乾的,更底層能否以哪怕是極座標方式,直接在二/三維空間上定位訪問,而非扇區、柱面、簇這種形式,我不清楚,有待方家指點)。
線性管理信息帶來的效應就是:基於線性數據結構,或以地址訪問信息的編程工具,通常來說會比基於字典結構的更快,至少有更大的優化空間。而靜態語言的話,編譯時我們已經確定了對象的結構和尺寸(動態尺寸的內容可以通過引用管理),這是動態語言無法做到的。動態語言的對象結構,總是基於字典結構,要兼顧對象結構在運行時發生改變的問題。這使得它的數據管理總是要比直接地址訪問要多上那麼一層。這也是甚少見到動態語言編譯器的原因。流行的動態語言,幾乎都是解釋/位元組碼平台,甚至,最常見的 Python/Ruby 等等語言,幾乎都有飽受批評的 GIL(Global Interpreter Lock)。以 Python 社區的經驗來說,多年來出現的數個無GIL的 C-Python 實現,單核性能都不如現在的官方版本。Jython 和 IronPython 則是得益於 JVM 和 CLR,這兩個久經經考驗的虛擬機平台,它們的 first-class language 都是靜態編譯型語言(盡管其主流編譯器生成的是位元組碼,但是通常我們都視Java 和 C#為編譯語言)。為 Perl 社區期待多年的 Perl6 ,至今還沒有真正的發布(其虛擬機 Parrot 雖然已經發布,但受制於主力語言實現進度,現在還沒有得到足夠的實戰驗證)。為動態語言實現一個高性能的,特別是並行的高性能環境,難度之高,可見一斑。
根本上說,在當前的硬體模型上,想要以非線性的方式管理信息,動態伸縮,動態修改結構,非常的不容易。舉一個例子,候捷老師有一個講座,是以windows 95為例,詳細講解 malloc/free 的底層實現,有聽過的朋友應該對操作系統動態管理內存資源的復雜程度有所體會。類似的內容在很多操作系統之類的技術書籍中都有介紹,有興趣的朋友可以找來看看,我手邊有一本《Unix系統編程》就有相關的內容。
這類問題涉及比較深入的底層問題,我不是科班出身,這方面比較外行,講的不是很好,不過有興趣的朋友可以深究一下,會發現這事兒比看起來要麻煩得多。想要讓動態語言達到靜態化的性能,是件相當有挑戰的事。Google的 Protocol Buffer 協議,也是基於靜態模型的。
現代的靜態語言,搞了很好的偽裝,使它寫起來可以非常的有動感,例如 C#3,Scala等,但究其本質,它們代碼中涉及的類型,仍然是可以編譯期確定的。我所接觸過的語言中,此類功能最有歷史的應該是Haskell,而它是通過一個非常嚴苛的數學體系來推導類型,在此過程中,還是時有需要程序員顯式聲明函數類型,才能完成編譯。
靜態語言在變得越來越友好敏捷,動態語言在越來越快,但是兩者之間的分界,仍然相當的清晰,靜態語言更快,更具優化潛力。動態語言更靈活,更具表達能力。這是兩者不能被互相取代的根本原因。
當然,性能問題並不簡單,動態語言在宏觀上往往沒有具部的測試結果看起來那麼慢,這是因為要表達復雜的業務邏輯,往往需要復雜的數據結構和訪問代碼,這些復雜的數據內容,要隨著用戶的訪問不斷變化。要實現這一切,如果使用靜態語言,就要關注動態數據結構的實現,如果使用的是沒有GC的開發技術,還要關注內存資源的回收,確實會出現繞了一大圈兒,結果實現的系統還沒有現成的動態語言快的現像(盡管這不是普遍的)。更何況現實中總是以線性讀寫的IO介面,更嚴重拉平了不同語言之間的性能差異。所以現在比較得到認可的實現方式往往是以動態語言實現項目,然後,如果有需求,也有這個成本負擔,就以靜態語言優化性能瓶頸。
當然,上述的模式往往用在伺服器型的項目中,在GUI環境中,要與顯示器、滑鼠鍵盤等人機交互環境頻繁的互動,這個資源付出非常的大,加上在CPP等靜態語言大行的時代,GUI開發已經相當成熟,技術力量沉積的歷史原因,這個領域仍然是以靜態的、編譯型的語言為主力。最多是為了提交二次開發能力,提供動態語言調用的介面,或嵌入一個解釋環境,有限的利用。其實即使是伺服器環境,隨著互聯網的發展,性能問題也正在越來越突出。我就遇到過某個簡單邏輯的功能,使用Python怎樣都無法優化到理想的程度,最終用Objective C寫了一個nginx模塊。另一方面說Objective C這樣的語言已經相當的動態化,使用它的字典結構,要比用C方便的多,在二進制上又可以完全兼容於C,在性能和空間付出上,明顯可以觀察到比大多C的字典結構,要多付出一些性能代價。計算機沒有魔法,人得到便利,總是要付出一些計算資源。把它盡可能的貼近理想,是技術人員的目標。
越來越多的大型架構,要求我們不僅以模塊、連接庫和函數介面的層面思考問題,更多的要考慮實際運行時的,運行實例和伺服器的行為。我們不但需要附件齊備的運行時環境,也需要可以直達硬體的,高速有效的工具。包括開發一些不那麼動態但是更快速的定製服務環境,也成為一個越來越常見的需求。
雖然編程語言在發展,我們有更多,更強大的方式來表達我們的思維,但是隨著用戶量、商業模式和服務方式的迅速變化,新的挑戰也不斷出現。對於職業的IT開發團隊,我們在面對更多的挑戰。我們需要更為豐富的技術組合,指望一種技術一統天下,即使局限於互聯網應用這個領域,也仍然是一個奢望。這十年來動態語言的興起,其實是在補過去邏輯表達方面不足的功課,這是硬體發展帶來的有限的福利,但是硬體資源永遠是快速發展,但卻不足使用。動態語言和靜態語言組合使用,兼顧高效開發與高性能的效果,在目前可以預見的未來,仍然是比較實際的思路。
10. TypeScript IDE
WebStorm提供了創建TypeScript的模板文件,但並沒提供自動編譯TS文件為JS文件和Map文件。
配置File Watcher來對TS文件進行自動編譯
File > Settings > Languages & Frameworks > TypeScript
選中 Recompile on changes
WebStorm斷點調試TypeScript編譯出來的JavaScript
WebStorm之所以能夠調試TS文件,主要是因為Map文件,因此TS必須生成Map文件。
設置斷點調試