JS高級 + TypeScript + Nodejs 專題 【更新中。。】


一. JS簡介

1. ECMAScript

(1). 簡介

 ES 的全稱是 ECMAScript , 它是由 ECMA 國際標准化組織,制定的一項腳本語言的標准化規范。

 每一次標准的誕生都意味着語言的完善,功能的加強。JavaScript語言本身也有一些令人不滿意的地方。

  • 變量提升特性增加了程序運行時的不可預測性

  • 語法過於松散,實現相同的功能,不同的人可能會寫出不同的代碼

(2). ECMAScript和JavaScript的關系

  JavaScript包括:ECMAScript、DOM、BOM三部分組成。

  A. ECMAScript---語言核心功能基於ES規范

  B. DOM— js支持對DOM的維護,通過document,element對象實現.這些都是在ES中沒有的.

  C. BOM— js支持對BOM的維護,通過window對象實現.這些都是在ES中沒有的.

(2). ES6-11功能總結

 

 

 

 

二. TypeScript簡介

1. JavaScript痛點

(1). 優秀的JavaScript沒有缺點嗎?

 A. 比如ES5以及之前的使用的var關鍵字關於作用域的問題;

 B. 比如最初JavaScript設計的數組類型並不是連續的內存空間

 C. 比如直到今天JavaScript也沒有加入類型檢測這一機制

(2). JavaScript正在慢慢變好

 A. 不可否認的是,JavaScript正在慢慢變得越來越好,無論是從底層設計還是應用層面。

 B. ES6、7、8等的推出,每次都會讓這門語言更加現代、更加安全、更加方便

 C. 但是直到今天,JavaScript在類型檢測上依然是毫無進展

2. 認識TypeScript

(1). 我們來看一下TypeScript在GitHub和官方上對自己的定義:

 A. GitHub說法:TypeScript is a superset of JavaScript that compiles to clean JavaScript output.p

 B. TypeScript官網:TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

 C. 翻譯一下:TypeScript是擁有類型的JavaScript超集,它可以編譯成普通、干凈、完整的JavaScript代碼。

(2). 怎么理解上面的話呢?

 A. 我們可以將TypeScript理解成加強版的JavaScript

 B. JavaScript所擁有的特性,TypeScript全部都是支持的,並且它緊隨ECMAScript的標准,所以ES6、ES7、ES8等新語法標准,它都是支持的

 C. 並且在語言層面上,不僅僅增加了類型約束,而且包括一些語法的擴展,比如枚舉類型(Enum)、元組類型(Tuple)等;

 D. TypeScript在實現新特性的同時,總是保持和ES標准的同步甚至是領先

 E. 並且TypeScript最終會被編譯成JavaScript代碼,所以你並不需要擔心它的兼容性問題,在編譯時也不需要借助於Babel這樣的工具

 F. 所以,我們可以把TypeScript理解成更加強大的JavaScript,不僅讓JavaScript更加安全,而且給它帶來了諸多好用的好用特性;

3. TypeScript特點

(1).始於JavaScript,歸於JavaScript

 A. TypeScript從今天數以百萬計的JavaScript開發者所熟悉的語法和語義開始。使用現有的JavaScript代碼,包括流行的JavaScript庫,並從JavaScript代碼中調用TypeScript代碼;

 B. TypeScript可以編譯出純凈、 簡潔的JavaScript代碼,並且可以運行在任何瀏覽器上、Node.js環境中和任何支持ECMAScript 3(或更高版本)的JavaScript引擎中;

(2). TypeScript是一個強大的工具,用於構建大型項目

 A. 類型允許JavaScript開發者在開發JavaScript應用程序時使用高效的開發工具和常用操作比如靜態檢查和代碼重構

 B. 類型是可選的,類型推斷讓一些類型的注釋使你的代碼的靜態驗證有很大的不同。類型讓你定義軟件組件之間的接口和洞察現有JavaScript庫的行為;

(3).擁有先進的 JavaScript

 A. TypeScript提供最新的和不斷發展的JavaScript特性,包括那些來自2015年的ECMAScript和未來的提案中的特性,比如異步功能和Decorators,以幫助建立健壯的組件;

 B. 這些特性為高可信應用程序開發時是可用的,但是會被編譯成簡潔的ECMAScript3(或更新版本)的JavaScript;

4. TS的編譯環境

(1). 首先要有nodejs環境 【詳見:https://www.cnblogs.com/yaopengfei/p/14478126.html

(2). 需要在電腦上安裝 TypeScript ,這樣就可以把ts編譯成js運行了。

 A. 全局安裝ts npm install typescript -g 】

 B. 查看ts版本 【tsc --version】

 

(3). 測試

 進入ts文件的目錄,輸入 【tsc ./test1.ts】,會在當前目錄下生成一個轉換好的test1.js文件。

5.TS的兩種運行模式

模式1:

 通過webpack,配置本地的TypeScript編譯環境和開啟一個本地服務,可以直接運行在瀏覽器上;

模式2:

 通過ts-node庫,為TypeScript的運行提供執行環境 

 

三. NodeJs簡介 

 

 

 

 

 

 

 

 

四. 目錄

 

階段一:ECMAScript語法(ES6-ES11)

 第一節:ES6用法之let、const、解構賦值、箭頭函數、剩余參數

 第二節:ES6用法之內置對象擴展(Array、String、Set)

 第三節:ES6用法之Function、Object、Class、Symbol

 第四節:ES6用法之Map、RegExp、Number、Proxy

 第五節:ES6用法之Reflect、Promise、Iterator

 第六節:ES6用法之Generator、Module模塊化導入導出

 第七節:ES7之includes、冪等運算符 和 ES8之async/await、Object擴展、String擴展、尾逗號

 第八節:ES9之for await of、RegExp擴展、Object擴展、Promise擴展、String擴展

 第九節:ES10之Object、String、Array、Function、可選Catch、JSON、Symbol擴展

 第十節:ES11之String、Dynamic、BigInt、allSettled、globalThis、Optional chaining、Nulish coalescing Operator

 第十一節:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 第十一節:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

 

階段三:TypeScript專題

 第一節:TypeScript簡介、環境配置、幾種編譯方式(基於webpack 、ts-node)

 第二節:ts變量聲明、通用js數據類型、ts新數據類型、ts類型補充

 第三節:TypeScript類型補充和函數詳解(參數、返回值、類型、參數【可選/默認】、剩余參數、this、重載)

 第四節:TypeScipt類、接口、枚舉類型詳解

 第五節:TypeScript泛型詳解 和 模塊、模塊化、namespace、類型查找、declare剖析

 第X節:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

階段二:Nodejs專題

 第一節:nodejs簡介/安裝/用法 及 npm、nrm、VsCode的使用

 第二節:nodejs基礎用法之Commonjs導入/導出、讀寫文件、路徑等

 第三節:ES6模塊化歷史 及 默認、按需、直接導入導出、Vue單文件

 第四節:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

 

 

 

 

 

 

 

 

 

 

 

!

  • 作       者 : Yaopengfei(姚鵬飛)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 聲     明1 : 如有錯誤,歡迎討論,請勿謾罵^_^。
  • 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址,否則保留追究法律責任的權利。
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM