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有報紅一定要處理!!!

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
            • 檢查未使用的參數

        • 高級

          • allowUnreachableCode
            • 檢查不可達代碼
            • 可選值：
              • true，忽略不可達代碼
              • false，不可達代碼將引起錯誤
          • noEmitOnError
            • 有錯誤的情況下不進行編譯
            • 默認值：false

5、webpack

• 通常情況下，實際開發中我們都需要使用webpack構建工具對代碼進行打包，TS同樣也可以結合構建工具一起使用，下邊以webpack為例介紹一下如何結合構建工具使用TS。

• 步驟：

• 初始化項目

  • 進入項目根目錄，執行命令 npm init -y
    • 主要作用：創建package.json文件

• 下載構建工具

  • 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的配置文件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來啟動開發服務器

5、Babel

• 經過一系列的配置，使得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語法

• 修改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中指定要兼容的瀏覽器版本。

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:類型]:unknown

TypeScript 使用ts的語法轉換為各種es版本的東西

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。