1、TypeScript是什么
- 以JavaScript為基礎構建的語言，一個JavaScript的超集
- 對JS進行了拓展，向JS中引入類型的概念，並且添加了許多新的特性
- 支持在任何支持JavaScript的平台中執行
- TS的最終目的是為了項目易維護，易書寫
2、TypeScript增加了什么
- 增加了類型，增加支持ES的新特性，增加ES不具備的新特性
- 增加豐富的配置選項，相較於JS而言，TS擁有了靜態類型，更加嚴格的語法，更強大的功能，TS可以在代碼執行前就完成代碼的檢查，減小了運行時異常的幾率
- 相同的功能用TS的代碼量遠大於JS實現，但由於TS的代碼結構更加清晰，變量類型更加明確，在后期代碼的維護中TS遠遠勝於JS
3、TypeScript環境的搭建
1、下載node.js
2、安裝node.js
3、使用npm全局安裝typescript
- 進入命令行
- 輸入
npm install -g typescript
4、創建一個TS文件
5、使用tsc對文件進行編譯
- 在文件所在目錄打開終端
- 輸入
tsc xxx.ts
6、如果編輯器不能tsc編輯是沒有cmd的權限，給命令行工具管理員權限就可解決問題 附鏈接
4、TypeScript的基本類型
- 類型聲明
類型聲明是TS非常重要的一個特點，通過類型聲明可以指定TS中變量、形參、實參的類型，指定類型后，當為變量賦值時，TS編譯器會自動檢查值是否符合類型聲明，符合就賦值否則就報錯。總結：類型聲明給變量設置了類型，是的變量只能存儲某種類型的值
let 變量:類型
let 變量：類型 = 值
function fn(形參：類型，形參：類型)：類型{}//外面的類型限制了fn的返回值的類型
// never 表示永遠不會返回結果
function fnx(): never{
throw new Error('報錯了！');
}
-
自動類型判斷
- TS擁有自動的類型判斷機制
- 當對變量的聲明和賦值是同時進行的
- 所以如果你的變量的聲明和賦值是同時進行的，可以省略類型聲明
-
類型
類型 例子 描述 number 1，33，2.5 任意數字 string 'hi',"hi", hi任意字符串 boolean true、false 布爾值true或false 字面量 其本身 限制變量的值就是該字面量的值 any * 任意類型 unknown * 類型安全的any void 空值（undefined） 沒有值（或undefined） never 沒有值 不能是任何值 object ｛name：'肉絲'｝ 任意的JS對象 array [1,2,3] 任意JS數組 tuple [4,5] 元素，TS新增類型，固定長度數組 enum enum｛A,B｝ 枚舉，TS中新增類型 -
number
-
let decimal:number = 6 //十進制 let hex:number = 0xf00d //十六進制 let binary:number = 0b1010 //二進制 let octal:number = 0o744 //八進制 let big:bigint = 100n // 大字節
-
-
boolean
-
let isDone:boolean = false
-
-
string
-
let color:string = 'blue' color = 'red' let fullNmae:string = `Bob Bobbington` let age:number = 37 let sentence:string = `Hello , my name is ${fullname}` I'll be ${age + 1} years old next month
-
-
字面量
-
也可以使用字面量去指定變量的類型，通過字面量可以確定變量的取值范圍
-
let color:'red' | 'blue' | 'black' let num:1 | 2 | 3 | 4 | 5 ;
-
-
any
-
let d:any = 4 d = 'hello' d = true // 存在的問題是變量d可以賦值給其他變量
-
-
unknown
-
let unusable:unknown = undefined
-
-
never
-
function error(message:string):never { throw new Error(message) }
-
-
object (沒啥用)
-
let obj:object = {}
-
-
tuple
-
元組，規定了元素的類型順序必須完全對照的
-
let x: [string,number] x = ["hello",10] -
元組類型允許在元素類型后綴一個
?來說明元素是可選的：-
const list :[number,string?,boolean?] list = [1,'calm',true] list = [10,'calm'] list = [10]
-
-
元組類型的Rest使用
-
-
array
-
let list : number[] = [1,2,3] let list : Array<number> = [1,2,3]
-
-
類型斷言
-
有些情況下，變量的類型對於我們來說是很明確，但是TS編譯器卻並不清除，此時可以通過類型斷言來告訴編譯器變量的類型，斷言的兩種形式
-
第一種
-
let someValue : unknown = "this is a string" let strLength : number = (someValue as string).length
-
-
第二種
-
let someValue : unknown = "this is a string" let strLength : number = (<string>someValue).length
-
-
-
5、TypeScrip編譯選項
-
自動編譯文件
-
編譯文件時，使用-w命令后，TS編譯器會自動監視文件的變化，並在文件發生變化時對文件進行重新編譯
tsc example.ts -w
-
-
自動編譯整個項目
-
如果直接使用tsc指令，則可以自動將當前項目下的所有的文件編譯為js文件，但是直接使用tsc命令的前提是要現在項目根目錄下創建一個ts配置文件
tsconfig.json -
TSCONFIG.JSON是一個JSON文件，添加配置文件后，只需tsc命令即可完成對整個項目的編譯 -
配置選項
-
include
-
定義希望被編譯文件的所在的目錄
-
默認值：
["**/*"] -
示例
-
"include":["src/**/*","test/**/*"] -
上述示例中，所有src目錄和tests目錄下的文件都會被編譯
-
-
-
-
-
exclude
-
定義需要排除在外的目錄
-
默認值：["node_modules", "bower_components", "jspm_packages"]
-
示例：
-
"exclude": ["./src/hello/**/*"] -
上述示例中，src下hello目錄下的文件都不會被編譯
-
-
-
extends
-
定義被繼承的配置文件
-
示例：
-
"extends": "./configs/base" -
上述示例中，當前配置文件中會自動包含config目錄下base.json中的所有配置信息
-
-
-
files
-
指定被編譯文件的列表，只有需要編譯的文件少時才會用到
-
示例：
-
"files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ] -
列表中的文件都會被TS編譯器所編譯
-
-
compilerOptions
-
編譯選項是配置文件中非常重要也比較復雜的配置選項
-
在compilerOptions中包含多個子選項，用來完成對編譯的配置
-
項目選項
-
target
-
設置ts代碼編譯的目標版本
-
可選值：
- ES3（默認）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
-
示例：
-
"compilerOptions": { "target": "ES6" } -
如上設置，我們所編寫的ts代碼將會被編譯為ES6版本的js代碼
-
-
-
lib
-
指定代碼運行時所包含的庫（宿主環境）
-
可選值：
- ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......
-
示例：
-
"compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
-
-
-
module
-
設置編譯后代碼使用的模塊化系統
-
可選值：
- CommonJS、UMD、AMD、System、ES2020、ESNext、None
-
示例：
-
"compilerOptions": { "module": "CommonJS" }
-
-
-
outDir
-
編譯后文件的所在目錄
-
默認情況下，編譯后的js文件會和ts文件位於相同的目錄，設置outDir后可以改變編譯后文件的位置
-
示例：
-
"compilerOptions": { "outDir": "dist" } -
設置后編譯后的js文件將會生成到dist目錄
-
-
-
outFile
-
將所有的文件編譯為一個js文件
-
默認會將所有的編寫在全局作用域中的代碼合並為一個js文件，如果module制定了None、System或AMD則會將模塊一起合並到文件之中
-
示例：
-
"compilerOptions": { "outFile": "dist/app.js" }
-
-
-
rootDir
-
指定代碼的根目錄，默認情況下編譯后文件的目錄結構會以最長的公共目錄為根目錄，通過rootDir可以手動指定根目錄
-
示例：
-
"compilerOptions": { "rootDir": "./src" }
-
-
-
allowJs
- 是否對js文件編譯
-
checkJs
-
是否對js文件進行檢查
-
示例：
-
"compilerOptions": { "allowJs": true, "checkJs": true }
-
-
-
removeComments
- 是否刪除注釋
- 默認值：false
-
noEmit
- 不對代碼進行編譯
- 默認值：false
-
sourceMap
- 是否生成sourceMap
- 默認值：false
-
-
嚴格檢查
- strict
- 啟用所有的嚴格檢查，默認值為true，設置后相當於開啟了所有的嚴格檢查
- alwaysStrict
- 總是以嚴格模式對代碼進行編譯
- noImplicitAny
- 禁止隱式的any類型
- noImplicitThis
- 禁止類型不明確的this
- strictBindCallApply
- 嚴格檢查bind、call和apply的參數列表
- strictFunctionTypes
- 嚴格檢查函數的類型
- strictNullChecks
- 嚴格的空值檢查
- strictPropertyInitialization
- 嚴格檢查屬性是否初始化
- strict
-
額外檢查
- noFallthroughCasesInSwitch
- 檢查switch語句包含正確的break
- noImplicitReturns
- 檢查函數沒有隱式的返回值
- noUnusedLocals
- 檢查未使用的局部變量
- noUnusedParameters
- 檢查未使用的參數
- noFallthroughCasesInSwitch
-
高級
- allowUnreachableCode
- 檢查不可達代碼
- 可選值：
- true，忽略不可達代碼
- false，不可達代碼將引起錯誤
- noEmitOnError
- 有錯誤的情況下不進行編譯
- 默認值：false
- allowUnreachableCode
-
-
-
6、TypeScrip的打包
通常情況下，實際開發中我們都需要使用構建工具對待嗎進行打包，TS同樣也可以結合構建工具一起使用，下邊以webpack為例介紹一下如何結合構建共建工具使用TS
-
步驟
-
1.初始化項目
- 進入項目目錄，執行命令
npm init -y - 主要作用：創建package.json
- 進入項目目錄，執行命令
-
2.下載構建工具
npm i -D webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin- 共安裝七個包分別是
- webpack ：構建工具
- webpack-cli ：webpack的命令行工具
- webpack-dev-server ：webpakc的開發服務器
- typescript ：ts的編譯器
- ts-loader ：ts加載器，在webpack中編譯ts文件
- html-webpack-pluigin ：webpakc中html插件，用來自動創建html文件
- clean-webpakc-plugin ： webpack中的清除插件，每次構建都會先清除目錄
-
3.根目錄文件下創建webpack的配置文件webpack.config.js
const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin") const {cleanWbpackPlugin} = require("clean-webpack-plugin") module.exports = { optimization:{ minimize: false // 關閉代碼壓縮，可選 }, entry: "./src/index.ts", devtool: "inline-source-map", devServer: { contentBase: './dist' }, output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", environment: { arrowFunction: false // 關閉webpack的箭頭函數，可選 } }, resolve: { extensions: [".ts", ".js"] }, module: { rules: [ { test: /\.ts$/, use: { loader: "ts-loader" }, exclude: /node_modules/ } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title:'TS測試' }), ] } -
4.根目錄下創建tsconfig.json,配置可以根據自己需要
{ "complierOptions":{ "target":"ES2015", "module": "ES2015", "strict": true } } -
5.修改package.json添加如下配置
{ ...略... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack serve --open chrome.exe" }, ...略... } -
6.在src下創建ts文件，並在命令行執行
npm run build代碼進行編譯，或者執行npm start來啟動開發服務器
-
配置后的完整webpack.config.js截圖
package.json的完整配置
7、TypeScrip的兼容性
通過一系列的配置，TS和webpack已經打包在了一起，實際開發中除了webpack還需要結合babel來對代碼進行轉換以使其可以兼容更多的瀏覽器，在上述步驟的基礎上，在通過下步驟再講babel引入到項目中
1 . 安裝依賴包
npm i -D @babel/core @babel/preset-env babel-loader core-js- 共安裝了4個包，分別是：
- @babel/core
- babel的核心工具
- @babel/preset-env
- babel的預定義環境
- @babel-loader
- babel在webpack中的加載器
- core-js
- core-js用來使老版本的瀏覽器支持新版ES語法
- @babel/core
2.修改webpack.config.js配置文件
module: {
rules: [
{
test: /\.ts$/,
use: [
//ts結尾的文件用兩個loader，分別對應兩個對象的配置
{
loader: "babel-loader",
options:{
presets: [
[
"@babel/preset-env",
{
"targets":{
"chrome": "58",
"ie": "10"
},
"corejs":"3",
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
配置成功之后，使用TS編譯的文件會被tsloader和babel處理，是的代碼可以在大部分瀏覽器中直接使用，可以在配置選項的targets中指定要兼容的瀏覽器版本，針對ie我們一般只兼容到10