一：typeScript是什么？
1. TypeScript是JavaScript的超集。
2. 它對JS進行了擴展，向JS中引入了類型的概念，并添加了許多新的特性。
3. TS代碼需要通過編譯器編譯為JS，然后再交由JS解析器執行。
4. TS完全兼容JS，換言之，任何的JS代碼都可以直接當成TS使用。
5. 相較于JS而言，TS擁有了靜態類型，更加嚴格的語法，更強大的功能；TS可以在代碼執行前就完成代碼的檢查，減小了運行時異常的出現的幾率；TS代碼可以編譯為任意版本的JS代碼，可有效解決不同JS運行環境的兼容問題；同樣的功能，TS的代碼量要大于JS，但由于TS的代碼結構更加清晰，變量類型更加明確，在后期代碼的維護中TS卻遠遠勝于JS。
6. js本身是一種松散的語言，特別是在變量類型，語法規范上不夠正規，沒有明確的規定，所以就出現了ts，ts是在js基礎上對其缺點進行彌補的一種語言。

二：配置ts編譯環境
在nodejs環境的基礎上使用npm全局安裝typescript

• 進入命令行
• 輸入：npm i -g typescript
• 這個命令中就包含了ts編譯器
• 運行 tsc xxx.ts文件就可以將ts文件編譯成為js文件

三：typeScript中的特點類型聲明

- 語法：- ```typescriptlet 變量: 類型;let 變量: 類型 = 值;function fn(參數: 類型, 參數: 類型): 類型{...}```

• 自動類型判斷

  • TS擁有自動的類型判斷機制
  • 當對變量的聲明和賦值是同時進行的，TS編譯器會自動判斷變量的類型
  • 所以如果你的變量的聲明和賦值時同時進行的，可以省略掉類型聲明

例如let s:10;//這樣ts編譯器會默認添加其類型為number，必須是變量命名的同時也進行了賦值操作let s;//編譯器默認其類型是any，這樣就關閉了ts類型管理變成了原本的js

typeScript中的類型

- 類型：| 類型 | 例子 | 描述 || :-----: | :---------------: | :----------------------------: || 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中新增類型 |

• 字面量

  • 也可以使用字面量去指定變量的類型，通過字面量可以確定變量的取值范圍 |表示或的意思，&與也是存在的但是不用

  • let color: 'red' | 'blue' | 'black'; let num: 1 | 2 | 3 | 4 | 5;

• 類型斷言

  • 有些情況下，變量的類型對于我們來說是很明確，但是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;

四：ts編譯器配置信息

• 自動編譯文件

  • 編譯文件時，使用 -w 指令后，TS編譯器會自動監視文件的變化，并在文件發生變化時對文件進行重新編譯。

  • 示例：

    • tsc xxx.ts -w

• tsconfig.json是一個JSON文件，添加配置文件后，只需只需 tsc 命令即可完成對整個項目的編譯

  • 配置選項：
    include：定義需要被編譯的文件
  • "include":["src/**/*", "tests/**/*"]```

exclude：定義需要排除在外面的文件（該配置命令用的少）

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

extends：定義繼承文件（方便配置文件的編寫）

• "extends": "./configs/base"``
• file：指定被編譯文件的列表，只有需要編譯的文件少時才會用到（基本不用）

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
        • 嚴格檢查屬性是否初始化

    • 額外檢查

      • noFallthroughCasesInSwitch
        • 檢查switch語句包含正確的break
      • noImplicitReturns
        • 檢查函數沒有隱式的返回值
      • noUnusedLocals
        • 檢查未使用的局部變量
      • noUnusedParameters
        • 檢查未使用的參數

    • 高級

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

五：結合webpack編寫打包typeScript項目
簡單配置一個webpack.config.js配置文件：除了入口文件后綴名改為ts其他的差不多，主要是使用了ts-loader編譯配置
Babel插件的作用，對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/}]}...略...```

總結

以上是生活随笔為你收集整理的typeScript知识点总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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