TS

還有第二篇:https://blog.csdn.net/weixin_52519753/article/details/122017651

1. TS是什么?

1.以js為基礎(chǔ)構(gòu)建的語(yǔ)言

2.js的超集,可以在支持js的平臺(tái)執(zhí)行

3.對(duì)js進(jìn)行擴(kuò)展,并添加類型,把js變成了靜態(tài)語(yǔ)言

動(dòng)態(tài)類型語(yǔ)言：在運(yùn)行期進(jìn)行類型檢查的語(yǔ)言，也就是在編寫(xiě)代碼的時(shí)候可以不指定變量的數(shù)據(jù)類型，比如Python和Ruby
靜態(tài)類型語(yǔ)言：它的數(shù)據(jù)類型是在編譯期進(jìn)行檢查的，也就是說(shuō)變量在使用前要聲明變量的數(shù)據(jù)類型，這樣的好處是把類型檢查放在編譯期，提前檢查可能出現(xiàn)的類型錯(cuò)誤，典型代表C/C++和Java

4.TS不能在JS解析器執(zhí)行,需要進(jìn)行編譯成為js

5.相較于JS而言，TS擁有了靜態(tài)類型，更加嚴(yán)格的語(yǔ)法，更強(qiáng)大的功能；TS可以在代碼執(zhí)行前就完成代碼的檢查，減小了運(yùn)行時(shí)異常的出現(xiàn)的幾率；TS代碼可以編譯為任意版本的JS代碼，可有效解決不同JS運(yùn)行環(huán)境的兼容問(wèn)題；同樣的功能，TS的代碼量要大于JS，但由于TS的代碼結(jié)構(gòu)更加清晰，變量類型更加明確，在后期代碼的維護(hù)中TS卻遠(yuǎn)遠(yuǎn)勝于JS。

2.TypeScript 開(kāi)發(fā)環(huán)境搭建

下載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

• 進(jìn)入命令行

• 輸入：npm i -g typescript

  再輸入tsc檢查安裝好了嗎?

創(chuàng)建一個(gè)ts文件

使用tsc對(duì)ts文件進(jìn)行編譯

• 進(jìn)入命令行cmd進(jìn)入ts的文件夾

• 執(zhí)行命令：tsc xxx.ts,之后會(huì)產(chǎn)生一個(gè)xxx.js文件

3. 開(kāi)始

1.類型聲明

? 類型聲明

• 類型聲明是TS非常重要的一個(gè)特點(diǎn)

• 通過(guò)類型聲明可以指定TS中變量（參數(shù)、形參）的類型

• 指定類型后，當(dāng)為變量賦值時(shí)，TS編譯器會(huì)自動(dòng)檢查值是否符合類型聲明，符合則賦值，否則報(bào)錯(cuò)

• 簡(jiǎn)而言之，類型聲明給變量設(shè)置了類型，使得變量只能存儲(chǔ)某種類型的值

• 語(yǔ)法：

  • let 變量: 類型;let 變量: 類型 = 值;function fn(參數(shù): 類型, 參數(shù): 類型): 類型{... } let a:number; a=10; // a的值只能賦值數(shù)字型,否則報(bào)錯(cuò).在js是沒(méi)有靜態(tài)語(yǔ)言類型的,在ts就有. a="ios"; var b:string; b="hello" b="as"var c= false; c=true; // 類型推斷:在有變量值的時(shí)候TS會(huì)進(jìn)行類型判斷 function sum(a:number,b:number):number{return a+b } sum(22,32)//在():number就定義了sum就是number類型

    ts會(huì)對(duì)賦值過(guò)來(lái)的數(shù)據(jù)進(jìn)行檢查,js會(huì)不會(huì)進(jìn)行檢查,而是自動(dòng)判斷直接賦值.

  類型表：

  類型例子描述

  number	1, -33, 2.5	任意數(shù)字
  string	‘hi’, “hi”, hi	任意字符串
  boolean	true、false	布爾值true或false
  字面量	其本身	限制變量的值就是該字面量的值
  any	*	任意類型
  unknown	*	類型安全的any
  void	空值（undefined）	沒(méi)有值（或undefined）
  never	沒(méi)有值	不能是任何值
  object	{name:‘孫悟空’}	任意的JS對(duì)象
  array	[1,2,3]	任意JS數(shù)組
  tuple	[4,5]	元素，TS新增類型，固定長(zhǎng)度數(shù)組
  enum	enum{A, B}	枚舉，TS中新增類型

  • 字面量(字面量是也是一種類型)

    var d:'male'|"java" d="male" d="java" // 當(dāng)值不一樣時(shí)候報(bào)錯(cuò),作用:進(jìn)行輸入值的限制 // '|' 是"或"的意思(聯(lián)合類型) d="c" // |的使用 // var e:Sting 相比下面的會(huì)多一個(gè)類型 var e:boolean|String e=true e="golang" //9會(huì)進(jìn)行報(bào)錯(cuò),因?yàn)椴环项愋?/span> e=9

  • any類型

    // any是任意類型,相當(dāng)于TS關(guān)閉了類型檢測(cè)了,變回了js的弱類型 // 不建議使用, 失去了TS的意義 var f:any; f="123" // 下面這種不指定類型,TS檢測(cè)器會(huì)判定為any類型 var f; let f; f="123" f=1234 // any可以賦值給任何變量,這樣會(huì)影響h變量的限制,導(dǎo)致h的string直接無(wú)效,這就是不推薦使用的any的原因,為了改變這種情況出現(xiàn)了unknown類型 let h:string; h=f; console.log(h) //1234 console.log(typeof h) //number

  • unknown(一個(gè)類型安全的any)

    let i:unknown; i=123;let o:number; o=i;// 這里會(huì)顯示報(bào)錯(cuò),解決了any的問(wèn)題 // 賦值的時(shí)候會(huì)檢查i的類型,只要不符合就不通過(guò) // 原理如下: if( typeof i ==="number"){o=<number>i; }

  • 斷言

    o=i as number;//告訴編譯器i是一個(gè)number類型,進(jìn)行強(qiáng)調(diào)作用 o=<number>i;//強(qiáng)轉(zhuǎn)

  • void

    平常的使用

    function函數(shù)會(huì)自動(dòng)判斷return的類型是什么

    function a2(num):boolean|number{if(num>0){return true}return 0 } function a3():void{return 1 //這里報(bào)錯(cuò)函數(shù)強(qiáng)制要求了a3()必須返回void,如果return就會(huì)報(bào)錯(cuò) } function a4():void{} // void 返回的是 undefind

  • number

  • let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; // 可以賦值多種進(jìn)制數(shù)值

  • string

    let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. /// 進(jìn)行字符串拼接,語(yǔ)法:${變量名}

  • object（沒(méi)啥用）

    let obj: object = {}; js中{}是對(duì)象 let person:{name:String;age?:number } person={name:''} // age加了?所以是可選屬性. let person1:{name:string,[xx:string]:unknown} person1={name:'lqc',age:12,sg:181} // 限制某個(gè)字段的時(shí)候,要加[xx:類型]:unknown

  • array

    類型[]

    string[ ] 是數(shù)組類型

    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);// 兩個(gè)都是0

    枚舉的定義

    + enum 名字{? 屬性=，? 屬性，// 如果屬性是字符串要賦值；如果是數(shù)字那他就會(huì)自己增長(zhǎng)，默認(rèn)從0開(kāi)始增長(zhǎng)，如果第一個(gè)屬性是1，那么第二個(gè)如果沒(méi)有賦值就是2。// 枚舉可以作為類型限制，可以獲取其值，不可以賦值}

    enum 名字{

    ? 屬性=，

    ? 屬性=，

    // 如果屬性是字符串要賦值；如果是數(shù)字那他就會(huì)自己增長(zhǎng)，默認(rèn)從0開(kāi)始增長(zhǎng)，如果第一個(gè)屬性是1，那么第二個(gè)如果沒(méi)有賦值就是2。

    }

    枚舉的好處就是我們輸入一些字段是男的，但是后面的代碼會(huì)把他轉(zhuǎn)化為0或者1，代表男生或者女生

  TS有報(bào)紅一定要處理!!!

4、編譯選項(xiàng)

• 自動(dòng)編譯文件

  • 編譯文件時(shí)，使用 -w 指令后，TS編譯器會(huì)自動(dòng)監(jiān)視文件的變化，并在文件發(fā)生變化時(shí)對(duì)文件進(jìn)行重新編譯。

  • 示例：

    • tsc xxx.ts -w

• 自動(dòng)編譯整個(gè)項(xiàng)目

  • 如果直接使用tsc指令，則可以自動(dòng)將當(dāng)前項(xiàng)目下的所有ts文件編譯為js文件。

  • 但是能直接使用tsc命令的前提時(shí)，要先在項(xiàng)目根目錄下創(chuàng)建一個(gè)ts的配置文件 tsconfig.json

  • tsconfig.json是一個(gè)JSON文件，添加配置文件后，只需只需 tsc 命令即可完成對(duì)整個(gè)項(xiàng)目的編譯(一開(kāi)始文件里面加一個(gè)大括號(hào)就可以了)

  配置選項(xiàng)：

  • include

    • 定義希望被編譯文件所在的目錄

    • 默認(rèn)值：["**/*"]

    • **表示任意目錄，*表示任意文件

    • 示例：

      • "include":["src/**/*", "tests/**/*"]

      • 上述示例中，所有src目錄和tests目錄下的文件都會(huì)被編譯

    exclude

    • 定義需要排除在外的目錄

    • 默認(rèn)值：[“node_modules”, “bower_components”, “jspm_packages”]

    • 示例：

      • "exclude": ["./src/hello/**/*"]

      • 上述示例中，src下hello目錄下的文件都不會(huì)被編譯

    extends

    • 定義被繼承的配置文件

    • 示例：

      • "extends": "./configs/base"

      • 上述示例中，當(dāng)前配置文件中會(huì)自動(dòng)包含config目錄下base.json中的所有配置信息（進(jìn)行配置文件的繼承）

    files

    • 指定被編譯文件的列表，只有需要編譯的文件少時(shí)才會(huì)用到

    • 示例：

      • "files": ["core.ts","sys.ts","types.ts","scanner.ts","parser.ts","utilities.ts","binder.ts","checker.ts","tsc.ts"]

      • 列表中的文件都會(huì)被TS編譯器所編譯

    compilerOptions（放在根目錄）

    • 編譯選項(xiàng)是配置文件中非常重要也比較復(fù)雜的配置選項(xiàng)

    • 在compilerOptions中包含多個(gè)子選項(xiàng)，用來(lái)完成對(duì)編譯的配置

      • 項(xiàng)目選項(xiàng)

        • target

          • 設(shè)置ts代碼編譯的目標(biāo)版本

          • 可選值：

            • ES3（默認(rèn)）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

          • 示例：

            • "compilerOptions": {"target": "ES6" }

            • 如上設(shè)置，我們所編寫(xiě)的ts代碼將會(huì)被編譯為ES6版本的js代碼

        • module

          • 設(shè)置編譯后代碼使用的模塊化系統(tǒng)

          • 這個(gè)是要使用的模塊化規(guī)范

          • 可選值：

            • CommonJS、UMD、AMD、System、ES2020、ESNext、None

          • 示例：

            "compilerOptions": {"module": "CommonJS" }

        • lib

          • 指定代碼運(yùn)行時(shí)所包含的庫(kù)（宿主環(huán)境）（在瀏覽器就不需要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

          • 編譯后文件的所在目錄

          • 默認(rèn)情況下，編譯后的js文件會(huì)和ts文件位于相同的目錄，設(shè)置outDir后可以改變編譯后文件的位置

          • 示例：

            • "compilerOptions": {"outDir": "dist" }

            • 設(shè)置后編譯后的js文件將會(huì)生成到dist目錄

        • outFile

          • 將所有的文件編譯為一個(gè)js文件

          • 默認(rèn)會(huì)將所有的編寫(xiě)在全局作用域中的代碼合并為一個(gè)js文件，如果module制定了None、System或AMD則會(huì)將模塊一起合并到文件之中（模塊化的不建議合并，也不兼容）

          • 示例：

            • "compilerOptions": {"outFile": "dist/app.js" }

          • allowJs

            • 是否對(duì)js文件編譯

          • checkJs

            • 是否對(duì)js文件進(jìn)行檢查

            • 示例：

              • "compilerOptions": {"allowJs": true,"checkJs": true }

          • removeComments

            • 編譯后的js是否刪除注釋
            • 默認(rèn)值：false

          • noEmit

            • 不對(duì)代碼進(jìn)行編譯
            • 默認(rèn)值：false

          嚴(yán)格檢查

          • strict
            • 啟用所有的嚴(yán)格檢查，默認(rèn)值為true，設(shè)置后相當(dāng)于開(kāi)啟了所有的嚴(yán)格檢查
          • alwaysStrict(在有導(dǎo)入其他文件的時(shí)候默認(rèn)會(huì)開(kāi)啟嚴(yán)格模式;沒(méi)有導(dǎo)包的時(shí)候在js頭部,會(huì)自動(dòng)加一句"use strict")
            • 總是以嚴(yán)格模式對(duì)代碼進(jìn)行編譯
          • noImplicitAny
            • 禁止隱式的any類型
          • noImplicitThis
            • 禁止類型不明確的this
          • strictBindCallApply
            • 嚴(yán)格檢查bind、call和apply的參數(shù)列表
          • strictFunctionTypes
            • 嚴(yán)格檢查函數(shù)的類型
          • strictNullChecks
            • 嚴(yán)格的空值檢查
          • strictPropertyInitialization
            • 嚴(yán)格檢查屬性是否初始化

        • 額外檢查

          • noFallthroughCasesInSwitch
            • 檢查switch語(yǔ)句包含正確的break
          • noImplicitReturns
            • 檢查函數(shù)沒(méi)有隱式的返回值
          • noUnusedLocals
            • 檢查未使用的局部變量
          • noUnusedParameters
            • 檢查未使用的參數(shù)

        • 高級(jí)

          • allowUnreachableCode
            • 檢查不可達(dá)代碼
            • 可選值：
              • true，忽略不可達(dá)代碼
              • false，不可達(dá)代碼將引起錯(cuò)誤
          • noEmitOnError
            • 有錯(cuò)誤的情況下不進(jìn)行編譯
            • 默認(rèn)值：false

5、webpack

• 通常情況下，實(shí)際開(kāi)發(fā)中我們都需要使用webpack構(gòu)建工具對(duì)代碼進(jìn)行打包，TS同樣也可以結(jié)合構(gòu)建工具一起使用，下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TS。

• 步驟：

• 初始化項(xiàng)目

  • 進(jìn)入項(xiàng)目根目錄，執(zhí)行命令 npm init -y
    • 主要作用：創(chuàng)建package.json文件

• 下載構(gòu)建工具

  • npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
    • 共安裝了7個(gè)包
      • webpack
        • 構(gòu)建工具webpack
      • webpack-cli
        • webpack的命令行工具
      • webpack-dev-server
        • webpack的開(kāi)發(fā)服務(wù)器
      • typescript
        • ts編譯器
      • ts-loader
        • ts加載器，用于在webpack中編譯ts文件
      • html-webpack-plugin
        • webpack中html插件，用來(lái)自動(dòng)創(chuàng)建html文件
      • clean-webpack-plugin
        • webpack中的清除插件，每次構(gòu)建都會(huì)先清除目錄

• 根目錄下創(chuàng)建webpack的配置文件webpack.config.js

  // 補(bǔ)全路徑 const path = require("path"); // 生成html模塊 const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin");module.exports = {optimization:{minimize: false // 關(guān)閉代碼壓縮，可選},entry: "./src/index.ts",devtool: "inline-source-map",devServer: {contentBase: './dist'},output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",environment: {arrowFunction: false // 關(guān)閉webpack的箭頭函數(shù)，可選}},resolve: {extensions: [".ts", ".js"]},module: {rules: [{test: /\.ts$/,use: {loader: "ts-loader" },exclude: /node_modules/}]}, // 插件plugins: [new CleanWebpackPlugin(),// 加載html插件new HtmlWebpackPlugin({title:'TS測(cè)試'}),]}

• 根目錄下創(chuàng)建tsconfig.json，配置可以根據(jù)自己需要

  • {"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下創(chuàng)建ts文件，并在并命令行執(zhí)行npm run build對(duì)代碼進(jìn)行編譯，或者執(zhí)行npm start來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器

5、Babel

• 經(jīng)過(guò)一系列的配置，使得TS和webpack已經(jīng)結(jié)合到了一起，除了webpack，開(kāi)發(fā)中還經(jīng)常需要結(jié)合babel來(lái)對(duì)代碼進(jìn)行轉(zhuǎn)換以使其可以兼容到更多的瀏覽器，在上述步驟的基礎(chǔ)上，通過(guò)以下步驟再將babel引入到項(xiàng)目中。

• 安裝依賴包：

  • npm i -D @babel/core @babel/preset-env babel-loader core-js
  • 共安裝了4個(gè)包，分別是：
    • @babel/core
      • babel的核心工具
    • @babel/preset-env
      • babel的預(yù)定義環(huán)境
    • @babel-loader
      • babel在webpack中的加載器
    • core-js
      • core-js用來(lái)使老版本的瀏覽器支持新版ES語(yǔ)法

• 修改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/}] } ...略...

  • 如此一來(lái)，使用ts編譯后的文件將會(huì)再次被babel處理，使得代碼可以在大部分瀏覽器中直接使用，可以在配置選項(xiàng)的targets中指定要兼容的瀏覽器版本。

6. 面向?qū)ο?/h2>

面向?qū)ο笫浅绦蛑幸粋€(gè)非常重要的思想，簡(jiǎn)而言之就是程序之中所有的操作都需要通過(guò)對(duì)象來(lái)完成。面向?qū)ο笫且环N對(duì)現(xiàn)實(shí)世界理解和抽象的方法，是計(jì)算機(jī)編程技術(shù)發(fā)展到一定階段后的產(chǎn)物.

• 舉例來(lái)說(shuō)：
  • 操作瀏覽器要使用window對(duì)象
  • 操作網(wǎng)頁(yè)要使用document對(duì)象
  • 操作控制臺(tái)要使用console對(duì)象

一切操作都要通過(guò)對(duì)象，也就是所謂的面向?qū)ο?#xff0c;那么對(duì)象到底是什么呢？這就要先說(shuō)到程序是什么，計(jì)算機(jī)程序的本質(zhì)就是對(duì)現(xiàn)實(shí)事物的抽象，抽象的反義詞是具體，比如：照片是對(duì)一個(gè)具體的人的抽象，汽車(chē)模型是對(duì)具體汽車(chē)的抽象等等。程序也是對(duì)事物的抽象，在程序中我們可以表示一個(gè)人、一條狗、一把槍、一顆子彈等等所有的事物。一個(gè)事物到了程序中就變成了一個(gè)對(duì)象。

在程序中所有的對(duì)象都被分成了兩個(gè)部分?jǐn)?shù)據(jù)和功能，以人為例，人的姓名、性別、年齡、身高、體重等屬于數(shù)據(jù)，人可以說(shuō)話、走路、吃飯、睡覺(jué)這些屬于人的功能。數(shù)據(jù)在對(duì)象中被成為屬性，而功能就被稱為方法。所以簡(jiǎn)而言之，在程序中一切皆是對(duì)象。

定義類

• class 類名 {屬性名: 類型;constructor(參數(shù): 類型){this.屬性名 = 參數(shù);}方法名(){....}}

• 示例：

  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這個(gè)實(shí)例,this指向的是對(duì)象的實(shí)例
this.name = name; this.age = age; 與 p.name="孫悟空" p.age=18 是同一個(gè)意思的

2.constructor(){}是一個(gè)構(gòu)造函數(shù),實(shí)例創(chuàng)建就直接運(yùn)行

類的屬性

class Person{name:string='孫悟空';static age:number=18; } const tony=new Person() console.log(Person.age);

name是實(shí)例屬性,可以直接通過(guò)tony.name訪問(wèn)

age是靜態(tài)屬性(類屬性),通過(guò)Person.age訪問(wèn)到

下面是編譯后的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.函數(shù)定義模板,需要添加參數(shù)類型和放回類型

function a11(one:number,two:number):number{return one +two } a11(1,2) a11(2,2)

變量定義模板

let 名字:string;

let name:string[];

字面量也可以是object,而且object也可以進(jìn)行定義

let person1:{name:string,[xx:string]:unknown} person1={name:'lqc',age:12,sg:181} // 限制某個(gè)字段的時(shí)候,要加[xx:類型]:unknown

TypeScript 使用ts的語(yǔ)法轉(zhuǎn)換為各種es版本的東西

總結(jié)

以上是生活随笔為你收集整理的Typescript(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。