Typescript(一)
TS
還有第二篇:https://blog.csdn.net/weixin_52519753/article/details/122017651
1. TS是什么?
1.以js為基礎構建的語言
2.js的超集,可以在支持js的平臺執行
3.對js進行擴展,并添加類型,把js變成了靜態語言
動態類型語言:在運行期進行類型檢查的語言,也就是在編寫代碼的時候可以不指定變量的數據類型,比如Python和Ruby
靜態類型語言:它的數據類型是在編譯期進行檢查的,也就是說變量在使用前要聲明變量的數據類型,這樣的好處是把類型檢查放在編譯期,提前檢查可能出現的類型錯誤,典型代表C/C++和Java
4.TS不能在JS解析器執行,需要進行編譯成為js
5.相較于JS而言,TS擁有了靜態類型,更加嚴格的語法,更強大的功能;TS可以在代碼執行前就完成代碼的檢查,減小了運行時異常的出現的幾率;TS代碼可以編譯為任意版本的JS代碼,可有效解決不同JS運行環境的兼容問題;同樣的功能,TS的代碼量要大于JS,但由于TS的代碼結構更加清晰,變量類型更加明確,在后期代碼的維護中TS卻遠遠勝于JS。
2.TypeScript 開發環境搭建
下載Node.js
- 64位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
- 32位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
安裝Node.js,在cmd輸入 node -v
使用npm全局安裝typescript
-
進入命令行
-
輸入:npm i -g typescript
再輸入tsc檢查安裝好了嗎?
創建一個ts文件
使用tsc對ts文件進行編譯
-
進入命令行cmd進入ts的文件夾
-
執行命令:tsc xxx.ts,之后會產生一個xxx.js文件
3. 開始
1.類型聲明
? 類型聲明
-
類型聲明是TS非常重要的一個特點
-
通過類型聲明可以指定TS中變量(參數、形參)的類型
-
指定類型后,當為變量賦值時,TS編譯器會自動檢查值是否符合類型聲明,符合則賦值,否則報錯
-
簡而言之,類型聲明給變量設置了類型,使得變量只能存儲某種類型的值
-
語法:
- let 變量: 類型;let 變量: 類型 = 值;function fn(參數: 類型, 參數: 類型): 類型{...
}
let a:number;
a=10;
// a的值只能賦值數字型,否則報錯.在js是沒有靜態語言類型的,在ts就有.
a="ios";
var b:string;
b="hello"
b="as"var c= false;
c=true;
// 類型推斷:在有變量值的時候TS會進行類型判斷
function sum(a:number,b:number):number{return a+b
}
sum(22,32)//在():number就定義了sum就是number類型
ts會對賦值過來的數據進行檢查,js會不會進行檢查,而是自動判斷直接賦值.
類型表:
類型例子描述 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中新增類型 -
字面量(字面量是也是一種類型)
var d:'male'|"java" d="male" d="java" // 當值不一樣時候報錯,作用:進行輸入值的限制 // '|' 是"或"的意思(聯合類型) d="c" // |的使用 // var e:Sting 相比下面的會多一個類型 var e:boolean|String e=true e="golang" //9會進行報錯,因為不符合類型 e=9 -
any類型
// any是任意類型,相當于TS關閉了類型檢測了,變回了js的弱類型 // 不建議使用, 失去了TS的意義 var f:any; f="123" // 下面這種不指定類型,TS檢測器會判定為any類型 var f; let f; f="123" f=1234 // any可以賦值給任何變量,這樣會影響h變量的限制,導致h的string直接無效,這就是不推薦使用的any的原因,為了改變這種情況出現了unknown類型 let h:string; h=f; console.log(h) //1234 console.log(typeof h) //number -
unknown(一個類型安全的any)
let i:unknown; i=123;let o:number; o=i;// 這里會顯示報錯,解決了any的問題 // 賦值的時候會檢查i的類型,只要不符合就不通過 // 原理如下: if( typeof i ==="number"){o=<number>i; } -
斷言
o=i as number;//告訴編譯器i是一個number類型,進行強調作用 o=<number>i;//強轉 -
void
平常的使用
function函數會自動判斷return的類型是什么
function a2(num):boolean|number{if(num>0){return true}return 0 } function a3():void{return 1 //這里報錯函數強制要求了a3()必須返回void,如果return就會報錯 } function a4():void{} // void 返回的是 undefind -
number
- let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; // 可以賦值多種進制數值
-
string
let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. /// 進行字符串拼接,語法:${變量名} -
object(沒啥用)
let obj: object = {}; js中{}是對象 let person:{name:String;age?:number } person={name:''} // age加了?所以是可選屬性. let person1:{name:string,[xx:string]:unknown} person1={name:'lqc',age:12,sg:181} // 限制某個字段的時候,要加[xx:類型]:unknown -
array
類型[]
string[ ] 是數組類型
let arr:string[]; arr=['1','2','3'] -
tuple
let tuple1:[string,string] tuple1=['one','two'] -
enum 枚舉
enum Gender{Mela=0,Female=1 } let mess:{name:string,gender:Gender} i={name:"lqc",gender:Gender.Mela} console.log(i.gender===Gender.Mela);// 兩個都是0枚舉的定義
+ enum 名字{? 屬性=,? 屬性,// 如果屬性是字符串要賦值;如果是數字那他就會自己增長,默認從0開始增長,如果第一個屬性是1,那么第二個如果沒有賦值就是2。// 枚舉可以作為類型限制,可以獲取其值,不可以賦值}enum 名字{
? 屬性=,
? 屬性=,
// 如果屬性是字符串要賦值;如果是數字那他就會自己增長,默認從0開始增長,如果第一個屬性是1,那么第二個如果沒有賦值就是2。
}
枚舉的好處就是我們輸入一些字段是男的,但是后面的代碼會把他轉化為0或者1,代表男生或者女生
TS有報紅一定要處理!!!
- let 變量: 類型;let 變量: 類型 = 值;function fn(參數: 類型, 參數: 類型): 類型{...
}
let a:number;
a=10;
// a的值只能賦值數字型,否則報錯.在js是沒有靜態語言類型的,在ts就有.
a="ios";
var b:string;
b="hello"
b="as"var c= false;
c=true;
// 類型推斷:在有變量值的時候TS會進行類型判斷
function sum(a:number,b:number):number{return a+b
}
sum(22,32)//在():number就定義了sum就是number類型
4、編譯選項
-
自動編譯文件
-
編譯文件時,使用 -w 指令后,TS編譯器會自動監視文件的變化,并在文件發生變化時對文件進行重新編譯。
-
示例:
- tsc xxx.ts -w
-
-
自動編譯整個項目
-
如果直接使用tsc指令,則可以自動將當前項目下的所有ts文件編譯為js文件。
-
但是能直接使用tsc命令的前提時,要先在項目根目錄下創建一個ts的配置文件 tsconfig.json
-
tsconfig.json是一個JSON文件,添加配置文件后,只需只需 tsc 命令即可完成對整個項目的編譯(一開始文件里面加一個大括號就可以了)
配置選項:
-
include
-
定義希望被編譯文件所在的目錄
-
默認值:["**/*"]
-
**表示任意目錄,*表示任意文件
-
示例:
- "include":["src/**/*", "tests/**/*"]
-
上述示例中,所有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代碼
-
-
module
-
設置編譯后代碼使用的模塊化系統
-
這個是要使用的模塊化規范
-
可選值:
- CommonJS、UMD、AMD、System、ES2020、ESNext、None
-
示例:
"compilerOptions": {"module": "CommonJS" }
-
-
lib
-
指定代碼運行時所包含的庫(宿主環境)(在瀏覽器就不需要dom了,在node.js之中就要安裝dom)
-
可選值:
- 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" }
outDir
-
編譯后文件的所在目錄
-
默認情況下,編譯后的js文件會和ts文件位于相同的目錄,設置outDir后可以改變編譯后文件的位置
-
示例:
- "compilerOptions": {"outDir": "dist" }
-
設置后編譯后的js文件將會生成到dist目錄
-
-
outFile
-
將所有的文件編譯為一個js文件
-
默認會將所有的編寫在全局作用域中的代碼合并為一個js文件,如果module制定了None、System或AMD則會將模塊一起合并到文件之中(模塊化的不建議合并,也不兼容)
-
示例:
- "compilerOptions": {"outFile": "dist/app.js" }
-
allowJs
- 是否對js文件編譯
-
checkJs
-
是否對js文件進行檢查
-
示例:
- "compilerOptions": {"allowJs": true,"checkJs": true }
-
-
removeComments
- 編譯后的js是否刪除注釋
- 默認值:false
-
noEmit
- 不對代碼進行編譯
- 默認值:false
嚴格檢查
- strict
- 啟用所有的嚴格檢查,默認值為true,設置后相當于開啟了所有的嚴格檢查
- alwaysStrict(在有導入其他文件的時候默認會開啟嚴格模式;沒有導包的時候在js頭部,會自動加一句"use strict")
- 總是以嚴格模式對代碼進行編譯
- noImplicitAny
- 禁止隱式的any類型
- noImplicitThis
- 禁止類型不明確的this
- strictBindCallApply
- 嚴格檢查bind、call和apply的參數列表
- strictFunctionTypes
- 嚴格檢查函數的類型
- strictNullChecks
- 嚴格的空值檢查
- strictPropertyInitialization
- 嚴格檢查屬性是否初始化
-
-
額外檢查
- noFallthroughCasesInSwitch
- 檢查switch語句包含正確的break
- noImplicitReturns
- 檢查函數沒有隱式的返回值
- noUnusedLocals
- 檢查未使用的局部變量
- noUnusedParameters
- 檢查未使用的參數
- noFallthroughCasesInSwitch
-
高級
- allowUnreachableCode
- 檢查不可達代碼
- 可選值:
- true,忽略不可達代碼
- false,不可達代碼將引起錯誤
- noEmitOnError
- 有錯誤的情況下不進行編譯
- 默認值:false
- allowUnreachableCode
-
-
-
-
5、webpack
-
通常情況下,實際開發中我們都需要使用webpack構建工具對代碼進行打包,TS同樣也可以結合構建工具一起使用,下邊以webpack為例介紹一下如何結合構建工具使用TS。
-
步驟:
-
初始化項目
- 進入項目根目錄,執行命令 npm init -y
- 主要作用:創建package.json文件
- 進入項目根目錄,執行命令 npm init -y
-
下載構建工具
- npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
- 共安裝了7個包
- webpack
- 構建工具webpack
- webpack-cli
- webpack的命令行工具
- webpack-dev-server
- webpack的開發服務器
- typescript
- ts編譯器
- ts-loader
- ts加載器,用于在webpack中編譯ts文件
- html-webpack-plugin
- webpack中html插件,用來自動創建html文件
- clean-webpack-plugin
- webpack中的清除插件,每次構建都會先清除目錄
- webpack
- 共安裝了7個包
- npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
-
根目錄下創建webpack的配置文件webpack.config.js
// 補全路徑 const path = require("path"); // 生成html模塊 const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = 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(),// 加載html插件new HtmlWebpackPlugin({title:'TS測試'}),]} -
根目錄下創建tsconfig.json,配置可以根據自己需要
- {"compilerOptions": {"target": "ES2015","module": "ES2015","strict": true} }
-
修改package.json添加如下配置
- {...略..."scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack serve --open chrome.exe"},...略... }
-
在src下創建ts文件,并在并命令行執行npm run build對代碼進行編譯,或者執行npm start來啟動開發服務器
-
經過一系列的配置,使得TS和webpack已經結合到了一起,除了webpack,開發中還經常需要結合babel來對代碼進行轉換以使其可以兼容到更多的瀏覽器,在上述步驟的基礎上,通過以下步驟再將babel引入到項目中。
-
安裝依賴包:
- 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
-
修改webpack.config.js配置文件
- ...略... module: {rules: [{test: /\.ts$/,use: [{loader: "babel-loader",options:{presets: [["@babel/preset-env",{"targets":{"chrome": "58","ie": "11"},"corejs":"3","useBuiltIns": "usage"}]]}},{loader: "ts-loader",}],exclude: /node_modules/}] } ...略...
-
如此一來,使用ts編譯后的文件將會再次被babel處理,使得代碼可以在大部分瀏覽器中直接使用,可以在配置選項的targets中指定要兼容的瀏覽器版本。
5、Babel
6. 面向對象
面向對象是程序中一個非常重要的思想,簡而言之就是程序之中所有的操作都需要通過對象來完成。面向對象是一種對現實世界理解和抽象的方法,是計算機編程技術發展到一定階段后的產物.
- 舉例來說:
- 操作瀏覽器要使用window對象
- 操作網頁要使用document對象
- 操作控制臺要使用console對象
一切操作都要通過對象,也就是所謂的面向對象,那么對象到底是什么呢?這就要先說到程序是什么,計算機程序的本質就是對現實事物的抽象,抽象的反義詞是具體,比如:照片是對一個具體的人的抽象,汽車模型是對具體汽車的抽象等等。程序也是對事物的抽象,在程序中我們可以表示一個人、一條狗、一把槍、一顆子彈等等所有的事物。一個事物到了程序中就變成了一個對象。
在程序中所有的對象都被分成了兩個部分數據和功能,以人為例,人的姓名、性別、年齡、身高、體重等屬于數據,人可以說話、走路、吃飯、睡覺這些屬于人的功能。數據在對象中被成為屬性,而功能就被稱為方法。所以簡而言之,在程序中一切皆是對象。
定義類
- class 類名 {屬性名: 類型;constructor(參數: 類型){this.屬性名 = 參數;}方法名(){....}}
-
示例:
class Person{name: string;age: number;constructor(name: string, age: number){this.name = name;this.age = age;}sayHello(){console.log(`大家好,我是${this.name}`);} } const p = new Person('孫悟空', 18); p.sayHello(); - this指向的是p這個實例,this指向的是對象的實例 this.name = name; this.age = age; 與 p.name="孫悟空" p.age=18 是同一個意思的
2.constructor(){}是一個構造函數,實例創建就直接運行
類的屬性
class Person{name:string='孫悟空';static age:number=18; } const tony=new Person() console.log(Person.age);name是實例屬性,可以直接通過tony.name訪問
age是靜態屬性(類屬性),通過Person.age訪問到
下面是編譯后的js
"use strict"; class Person {constructor() {this.name = '孫悟空';} } Person.age = 18; const tony = new Person(); console.log(Person.age); console.log(tony); static readonly age:number=18;? readonly是只讀屬性,不可以修改
6. 心得:
? 1.函數定義模板,需要添加參數類型和放回類型
function a11(one:number,two:number):number{return one +two } a11(1,2) a11(2,2)變量定義模板
let 名字:string;
let name:string[];
字面量也可以是object,而且object也可以進行定義
let person1:{name:string,[xx:string]:unknown} person1={name:'lqc',age:12,sg:181} // 限制某個字段的時候,要加[xx:類型]:unknownTypeScript 使用ts的語法轉換為各種es版本的東西
總結
以上是生活随笔為你收集整理的Typescript(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: # 计算圆周长和面积
- 下一篇: [算法]LeetCode第194场周赛2