typeScript知识点总结

最新推荐文章于 2025-05-10 20:11:16 发布

只管去努力

最新推荐文章于 2025-05-10 20:11:16 发布

阅读量528

点赞数 2

CC 4.0 BY-SA版权

文章标签： typescript

本文链接：https://blog.youkuaiyun.com/weixin_53011724/article/details/113445455

一：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中的特点类型声明

 - 语法：

    - ```typescript
      let 变量: 类型;
      
      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/
            }
        ]
    }
    ...略...
    ```