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

二：配置ts編譯環(huán)境
在nodejs環(huán)境的基礎(chǔ)上使用npm全局安裝typescript

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

三：typeScript中的特點(diǎn)類型聲明

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

• 自動類型判斷

  • TS擁有自動的類型判斷機(jī)制
  • 當(dāng)對變量的聲明和賦值是同時(shí)進(jìn)行的，TS編譯器會自動判斷變量的類型
  • 所以如果你的變量的聲明和賦值時(shí)同時(shí)進(jìn)行的，可以省略掉類型聲明

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

typeScript中的類型

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

• 字面量

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

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

• 類型斷言

  • 有些情況下，變量的類型對于我們來說是很明確，但是TS編譯器卻并不清楚，此時(shí)，可以通過類型斷言來告訴編譯器變量的類型，斷言有兩種形式：

    • 第一種

      • 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編譯器配置信息

• 自動編譯文件

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

  • 示例：

    • tsc xxx.ts -w

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

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

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

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

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

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

compilerOptions ：配置選項(xiàng)

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

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

    • 項(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è)置，我們所編寫的ts代碼將會被編譯為ES6版本的js代碼

      • lib

        • 指定代碼運(yùn)行時(shí)所包含的庫（宿主環(huán)境）

        • 可選值：

          • 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

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

        • 可選值：

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

        • 示例：

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

      • outDir

        • 編譯后文件的所在目錄

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

        • 示例：

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

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

      • outFile

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

        • 默認(rèn)會將所有的編寫在全局作用域中的代碼合并為一個(gè)js文件，如果module制定了None、System或AMD則會將模塊一起合并到文件之中

        • 示例：

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

      • rootDir

        • 指定代碼的根目錄，默認(rèn)情況下編譯后文件的目錄結(jié)構(gòu)會以最長的公共目錄為根目錄，通過rootDir可以手動指定根目錄

        • 示例：

          • "compilerOptions": {"rootDir": "./src" }

      • allowJs

        • 是否對js文件編譯

      • checkJs

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

        • 示例：

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

      • removeComments

        • 是否刪除注釋
        • 默認(rèn)值：false

      • noEmit

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

      • sourceMap

        • 是否生成sourceMap
        • 默認(rèn)值：false

    • 嚴(yán)格檢查

      • strict
        • 啟用所有的嚴(yán)格檢查，默認(rèn)值為true，設(shè)置后相當(dāng)于開啟了所有的嚴(yán)格檢查
      • alwaysStrict
        • 總是以嚴(yán)格模式對代碼進(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語句包含正確的break
      • noImplicitReturns
        • 檢查函數(shù)沒有隱式的返回值
      • noUnusedLocals
        • 檢查未使用的局部變量
      • noUnusedParameters
        • 檢查未使用的參數(shù)

    • 高級

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

五：結(jié)合webpack編寫打包typeScript項(xiàng)目
簡單配置一個(gè)webpack.config.js配置文件：除了入口文件后綴名改為ts其他的差不多，主要是使用了ts-loader編譯配置
Babel插件的作用，對js文件進(jìn)行瀏覽器兼容性的考慮

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

總結(jié)

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

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