學習typescript的筆記
TS的編譯選項
自動監視ts文件的修改的命令(僅限于當前文件)
tsc <ts文件名> -w
自動編譯完成所有文件的命令
tsc (需要在文件下創建一個名字為tsconfig.json的配置文件,在tsc后面加上-w可以自動監視ts文件的修改)
寫路徑的時候*代表任意文件,**代表任意目錄
"include":[]用來指定哪些需要被執行編譯的ts文件目錄
"exclude":[]用來指定不需要被編譯的ts文件目錄,默認值為["node_modules", "bower_components", "jspm_packages"]
"extends": ""用來指定繼承,類似于外部引用,
"file":[]類似于index,但是比它更麻煩
compilerOptions 編譯器的選項(json)語法
target 用來指定ts被編譯為的ES版本,ESNext是ES的最新版本
module 指定要使用的模塊化規范es2015是ES6版本
/lib 用來指定項目中要使用的庫,一般不用(類似于用document.getElementById)
outDir 用來指定編譯后文件所在的目錄
outFile 將代碼合并為一個文件
設置后outFile,所有的全局作用域中的代碼會合并到同一個文件中
allowJs是否對js文件進行編譯,默認是false
checkJs 是否檢查js代碼是否符合語法規范
removeComments是否移除注釋
noEmit是否不生成編譯后的文件,不想去進行代碼編譯,只是檢查語法時使用
noEmitOnError是否在有錯誤時不會生成編譯后文件
webpack打包
首先用npm init -y來初始化項目(主要是為了在項目下生成package.json文件);然后就安裝依賴(webpack、webpack-cli、typescript、ts-loader);接著創建webpack.config.js文件,在文件中用require引入path包,用module.exports導出對象,在對象中寫配置信息;
html-webpack-plugin插件作用是自動給我們生成HTML文件,但是如果添加了mode時不會自動引入生成的bundle.js文件;在plugins里用options對象來自定義配置,可以用template來指定模板
用webpack-dev-server插件時,在package.json配置start命令時,如果打開瀏覽器后報錯找不到chrome.exe,就可以不用寫--open后面的chrome.exe,按照老師配置webpack.config.js后,會運行出錯,需要在webpack.config.js中增加mode配置mode: "development",package.json需要增加"dev": "webpack --mode development"和"build": "webpack --mode production";
clean-webpack-plugin插件是為了清理dist目錄,插件的使用都是先引入插件,然后在plugins里面new就可以了;
在webpack.config.js文件里用resolve配置可以作為模塊引入和使用的文件
用babel來提高兼容性,先安裝@babel/core工具、@babel/preset-env(預制各種環境)、babel-loader、core-js(模擬js的運行環境,讓我們老版本的瀏覽器可以使用新的語法);module中rules的use配置是寫在后面的先執行;
面向對象
一切皆是對象,程序就是對現實事物的抽象。類相當于對象的模型。直接在實例上定義的屬性是實例屬性,需要通過對象的實例去訪問;使用static開頭的屬性是靜態屬性(類屬性),可以直接通過類去訪問;定義實例屬性,本身是存放在實例上的,只有通過new之后可以看到;在屬性前使用static關鍵字可以定義類屬性(靜態屬性)。
使用繼承后,子類將會擁有父類所以的方法和屬性;通過繼承可以將多個類中共有的代碼寫在一個父類中; 這樣只需要寫一次即可讓所以的子類都同時擁有父類中的屬性和方法; 如果希望在子類中添加父類中沒有的屬性和方法直接加就可以; 如果在子類中添加了父類相同的方法,子類的方法會覆蓋掉父類的方法;這種子類覆蓋掉父類方法的形式,稱為方法重寫。
constructor被稱為構造函數,構造函數會在對象創建時調用;在實例方法中,this就表示當前的實例;在構造函數中當前對象就是當前新建的那個對象;可以通過this想新建的對象中添加屬性
在類的方法中 super就表示當前類的父類
在使用繼承時,如果在子類中寫了構造函數,在子類構造函數中必須對父類的構造函數進行調用,用super()來調用
可以在class類前面加上abstract就表示是抽象類;抽象類和其他類區別不大,只是不能用來創建對象;抽象類是專門用來被繼承的類;抽象類中可以定義抽象方法
接口就是用來定義一個類結構,用來定義一個類中應該包含哪些屬性和方法;接口可以重復命名
接口可以在對于類的時候去限制類的結構,class實現接口用implements關鍵字
在類中使用private私有修飾符編譯ts文件為js文件后還是可以修改私有類的屬性時,可以在tsconfig.js文件里配置noEmitOnError為true
TS中設置getter方法的方式(get name(){
return this。——name;})
TS創建項目時webpack沒有對css進行處理的能力,需要自己配置,首先安裝less、less-loader、css-loader、style-loader 然后在webpack.config.js中配置規則;在安裝postcss、postcss-loader、postcss-preset-env(瀏覽器預制環境)

浙公網安備 33010602011771號