TypeScript 详解

梦里梦外; 2022-08-31 06:52 55阅读 0赞

1、TypeScript是什么？

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

2、TS和JS的区别

2.1、TS的优点

1.  静态输入  
    静态类型化是一种功能，可以在进行编写脚本时检测错误。查找并修复错误，对于编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。
2.  大型的开发项目  
    有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。而使用TypeScript工具来进行重构更变的容易、快捷。
3.  更好的协作  
    当发开大型项目时，进行开发的过程当中乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。

3、TS开发环境的搭建

有两种主要的方式来获取TypeScript工具：

*  通过npm（Node.js包管理器）
 *  安装Visual Studio的TypeScript插件

在这里的安装基本上我们都采用node进行安装，首先我们需要下载nodeJs，之后我们直接执行命令进行安装TS。

npm install -g typescript

安装完成之后我们可以使用以下命令查看TS的版本

tsc -v

之后我们新建一个项目，在项目当中我们新建一个ts文件，我们在ts文件当中我们先使用js的代码内容：

console.log("hello TS")

然后我们的ts文件是不能够在浏览器当中进行解析的，我们的ts文件首先需要通过编译，编译之后才能够被浏览器进行解析，我们直接使用命令

// tsc + 文件名
    tsc demo.ts

编译之后我们的目录下面会产生一个和ts文件同名的js文件，之后我们就可以直接使用这个编译得到的js即可。我们安装好了node，就可以直接使用node命令对js文件进行解析了，使用node命令：

// node + 文件名
    node demo.js

4、TS变量的声明和赋值

let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的， let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。因为TypeScript是JavaScript的超集，所以它本身就支持let和const。在这里我们也就不对var、let、const做详细的解释了，相信了解js的小伙伴也是可以区分开来的。

// 声明一个变量a 并且a的数据类型为number
    let a : number ;
    // 所以对a的值赋为字符串就会出现报错
    // a = "hello"
    a = 10;
    
    let b : string ;
    b = "hello"
    b = 3
    
    // 可以看到我们这里的let会编译成var，在这里我们编译后的js是ES3的版本
    
    // 声明变量直接赋值
    let c : boolean = true
    
    // 变量的声明和赋值时同时进行，会自动对变量进行制定数据类型
    let d = true;
    d = "123"
    
    // js不考虑参数的数据类型和个数
    function sum(a,b){ 
    	return a+b
    }
    
    console.log(sum(41,"41"))
    
    // 其中这里的类型也可以进行给到参数，返回值
    function sum1(a:number,b:number){ 
    	return a+b
    }
    
    console.log(sum1(41,"”47"))
    // 并且对参数的个数进行限制
    console.log(sum1(41,41,100))
    
    // 返回值指定类型
    function sum2(a:number,b:number):number{ 
    	return a+"hello"
    }
    console.log(sum2(1,2))

5、TS类型

类型选择

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>例子</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>number</td> 
   <td>1, 2, -22</td> 
   <td>任意数字，</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>“here we go”</td> 
   <td>任意字符串</td> 
  </tr> 
  <tr> 
   <td>boolean</td> 
   <td>true、false</td> 
   <td>布尔值true或false</td> 
  </tr> 
  <tr> 
   <td>字面量</td> 
   <td>其本身</td> 
   <td>限制变量的值就是该字面量的值</td> 
  </tr> 
  <tr> 
   <td>any</td> 
   <td>*</td> 
   <td>任意类型</td> 
  </tr> 
  <tr> 
   <td>unknown</td> 
   <td>*</td> 
   <td>类型安全的any</td> 
  </tr> 
  <tr> 
   <td>void</td> 
   <td>空值（undefined）</td> 
   <td>没有值（或undefined）</td> 
  </tr> 
  <tr> 
   <td>never</td> 
   <td>没有值</td> 
   <td>不能是任何值</td> 
  </tr> 
  <tr> 
   <td>object</td> 
   <td>{name:’Allen’}</td> 
   <td>任意的JS对象</td> 
  </tr> 
  <tr> 
   <td>array</td> 
   <td>[1,2,3]</td> 
   <td>任意JS数组</td> 
  </tr> 
  <tr> 
   <td>tuple</td> 
   <td>[4,5]</td> 
   <td>元素，TS新增类型，固定长度数组</td> 
  </tr> 
  <tr> 
   <td>enum</td> 
   <td>enum{A, B}</td> 
   <td>枚举，TS中新增类型</td> 
  </tr> 
 </tbody> 
</table>

为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

// 可以直接使用字面量进行声明,就好像是一个常量，声明之后的值是不可改变的
    let a: 10;
    a = 12;
    
    // | 表示 或 ，也就是说 b 的值 可以是 men 也可以是 women
    let b: 'man' | 'women'
    b = 'menwomen'
    
    // 既可以是字符串也可以是布尔值
    let c: string | boolean
    c = 'hello'
    c = true
    
    // any 表示任意类型
    let d: any
    d = true
    
    // unknow 表示未知类型
    let e: unknown
    e = 'hello'
    
    let s: string
    
    // any 可以赋值给任意对象 ,这时的s就会被any盖掉
    s = d
    // 而使用 unknow 进行赋值就会报错
    // s = e
    // 而我们需要将e的值赋给s，我们需要进行类型判断
    if (typeof e === "string") { 
    	s = e
    }
    
    // 或者使用类型断言，将e强行表示为string类型
    s = e as string
    s = <string>e
    
    // void 表示函数没有返回值 可以不return，但是可以return null underfind
    function fn(num): void { 
    	console.log("void")
    }
    
    // 而使用 nerve 表示没有返回值 返回为null和underfind也会报错
    function fun(): never { 
    	return null
    }
    
    // 对象
    let f: Object
    f = { }
    
    // 而使用 {} 就可以对对象的属性进行限制，并且对象的属性也必须相同，而我们在对属性名后面加上一个？ 表示属性可选
    let g: {  name: string, age?: number }
    g = {  name: "a" }
    g = {  sex: "men" }
    g = {  name: "b", age: 18 }
    
    // 通过【abb:string】:any 表示我们的后续属性可以有任意属性
    let h: {  name: string, [abb: string]: any }
    h = {  name: 'yueyue', age: 18, sex: "man" }
    
    let i: (a: number, b: number) => number
    
    i = function (n1, n2): number { 
    	return n1 + n2
    }
    
    // arr 数组 字符串数组
    let j: string[]
    j = ['a', 'b', 'c']
    let k: Array<number>
    k = [1, 2, 4, 5]
    
    // 元组表示一个已知元素数量和类型的数组，各元素的类型不必相同。
    let l：[string, number]
    l = ['12', 5]
    
    
    // 枚举
    enum sex { 
    	men = 1,
    	women = 0,
    }
    
    let m: {  name: string, sex: sex }
    
    m = {  name: 'yueyue', sex: sex.women }
    console.log(m)

6、TS编译设置

在每一次的ts文件进行修改之后我们都需要使用tsc命令进行编译成js，还是比较麻烦的，我们这里可以使用如下命令对ts文件进行侦听，当侦听的文件内容发生改变之后，会自动进行编译ts。

tsc XXX.ts -w

但是这里的话我们只能对单个ts文件进行侦听编译。当我们的项目当中有很多的ts文件，我们要怎么对所有的ts文件全部侦听呢？我们在我们的项目下新建一个tsconfig.json文件，这就是ts编译的配置文件，当我们先给上一个\{\}之后，我们在项目下直接执行如下命令就可以对整个项目的ts文件进行侦听了。

tsc -w

之后我们可以对这个tsconfig.json文件进行一些设置。

{ 
        /** * 用来指定哪些ts需要被编译 ** 表示任意目录 * 表示任意文件 */
        "include": [
            "./"
        ],
        "exclude": [
            "./demo.ts"
        ],
        "compilerOptions": { 
            // 编译的js版本目标
            "target": "ES6",
            // 模块化版本
            "module": "system",
            // 指定项目中要使用到的库
            "lib": ["esnext"],
            // 编译后所在目录
            "outDir": "./dist",
            // 将编译的js合并到一起
            "outFile": "./dist/app.js",
            // 是否对js进行编译，false表示不对js进行编译
            "allowJs": false,
            // 是否对js文件进行检验，false表示不检验
            "checkJs": false,
            // 是否移除注释，false表示不去掉注释
            "removeComments": false,
            // 不生成编译文件，
            "noEmit": false,
            // 当编译出错时不生成编译文件
            "noEmitOnError": false,
            // 所有严格模式的总开关
            "strict": false,
            // 是否开启严格模式，false表示不开启
            "alwaysStrict": false,
            // 当一个变量不指定类型时，默认使用any，设置为true时，表示不允许使用隐式any
            "noImplicitAny": false,
            // 设置为true，表示不允许使用隐式this
            "noImplicitThis": false,
        }
    }

7、使用webpack进行打包

7.1、webpack基本打包

首先我们使用 `npm init` 对我们的项目进行初始化。之后我们直接安装webpack，执行命令：

// webpack 相关包
    npm install webpack webpack-cli -g
    npm install webpack webpack-cli -D
    // ts-loader包
    npm install ts-loader --save-dev

之后我们需要对webpack的配置文件进行配置，先创建一个webpack.config.js文件。这里对于webpack的配置就不做详细解释了。

const { 
        resolve
    } = require('path')
    
    module.exports = { 
        // 入口
        entry: './src/index.js',
        // 输出
        output: { 
            // 输出文件名
            filename: 'main.js',
            // 路径
            path: resolve(__dirname, 'build')
        },
        // loader
        module: { 
            rules: [{ 
                // 匹配哪些文件
                test: /\.ts$/,
                // 使用哪些loader进行处理
                use: 'ts-loader',
                exclude: /node_modules/
            }]
        },
        plugins: [],
    }

之后我们再对tsconfig.json进行设置，我们就给上几个简单的设置，

{ 
      "compilerOptions": { 
        "target": "ES6",
        "module": "ES6",
        "strict": true
      }
    }

并且我们可以再package.json文件当中进行设置执行命令。添加如下代码：之后我们直接执行命令：`npm run build`就可以进行打包了  
![4bedf1037ecb4f7491c06ee583931fb6.png][]  
7.2、打包Html文件

进行html文件的打包，我们首先需要安装对应的依赖，html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件，如果直接将 html 文件置于 ./src 目录中，用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。使用命令安装：

npm i -D html-webpack-plugin

之后我们在webpack的配置文件当中对这个依赖进行导入：

const { 
        resolve
    } = require('path')
    
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = { 
        // 入口
        entry: './src/index.js',
        // 输出
        output: { 
            // 输出文件名
            filename: 'main.js',
            // 路径
            path: resolve(__dirname, 'build')
        },
        // loader
        module: { 
            rules: [{ 
                // 匹配哪些文件
                test: /\.ts$/,
                // 使用哪些loader进行处理
                use: 'ts-loader',
                exclude: /node_modules/
            }]
        },
        plugins: [
            // 1、默认的html文件
            // new HtmlWebpackPlugin(),
            // 2、自定义内容
            // new HtmlWebpackPlugin({ 
            // title:"this is title"
            // })
            // 3、使用模板
             new HtmlWebpackPlugin({ 
                template:'./src/index.html'
            })
        ],
        // 模式 （开发、生产）
        mode: 'development'
    }

之后我们进行webpack打包，我们可以看到在打包生成的文件当中会生成一个html文件，也就是我们在这里进行定义的文件（默认、自定义、模板）

7.3、打包后的文件监听

我们还可以给webpack安装一个内置服务器，用来对打包后的文件进行实时监听变化，执行命令进行安装：

npm i -D webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

**webpack-dev-server 主要提供两个功能：**

1.  为静态文件提供web服务
2.  自动刷新和热替换(HMR)  
    自动刷新指当修改代码时webpack会进行自动编译，更新网页内容  
    热替换指运行时更新各种模块，即局部刷新

之后我们在上面说的webpack的配置文件当中，配置命令，加上一个start命令，表示启动服务并且使用chrome浏览器打开

"start": "webpack serve --open chrome.exe"

之后我们就可以直接使用`npm start`命令进行执行了，  
还有一个工具

npm i -D clean-webpack-plugin

7.4、关于模块化的打包

关于模块化，在进行开发的过程当中，我们基本上会引入多个其他的js、ts等等文件，这里就涉及到了模块化的问题，也很好处理，我们只需要在配置文件当中添加如下代码，表示可以对指定文件作为模块进行导入。

// 表示哪些文件可以作为模块进行导入
        resolve: { 
            extensions: ['.js', '.ts']
        },

7.5、babel版本控制打包

打包后的ES版本和浏览器兼容问题，这里我们可以使用babel对打包时控制js的版本，以及对浏览器版本的支持，先安装babel以及相关包。

npm i -D @babel/core @babel/preset-env babel-loader core-js

而我们对babel打包的配置，简单配置就是我们直接添加一个babel-loader进去，这样我们就可以进行babel打包，降低ES版本，当然了，我们也可以通过详细的配置对babel进行设置：

module: { 
            rules: [{ 
                // 匹配哪些文件
                test: /\.ts$/,
                // 使用哪些loader进行处理
                use: [{ 
                        //指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: { 
                            //设置预定义的环境
                            presets: [
                                [
                                    //指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    { 
                                        // 要兼容的目标浏览器及版本
                                        targets: { 
                                            "chrome": "88",
                                            "ie": "8"
                                        },
                                        //指定corejs的版本
                                        "corejs": "3",
                                        //使用corejs的方式 "usage" 表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    // 'babel-loader',
                    'ts-loader'
                ],
                exclude: /node_modules/
            }]
        },

通过这个配置进行打包之后我们可以看一下打包生成的js文件，

> 比如说，我们的ts文件当中定义一个Promise对象，而这是ES6当中才出现的对象，而对于IE很多都是不支持的，我们看一下打包之后这个Promise对象变成了什么。

8、TS的面向对象

在对于TypeScript的面向对象这里，在JS当中也是有用到的，以及对于其他的编程语言如Java、python、c\#等当中也是面向对象，这里后面关于面向对象的代码也就不做详细解释了，基本上不同的地方都是语法问题。

8.1、类的创建

我们使用class进行类的声明和创建，其中的属性和方法直接进行定义，之后可以使用static和readonly对属性、方法进行修饰。

class Person { 
      // 属性定义
      // 实例属性
      name: string = "yueyue";
      // 静态属性
      static age: number = 18;
      // 只读属性
      readonly sex: string = "男";
    
      // 方法定义
      say() { 
        console.log("say");
      }
      static sayhello(){ 
          console.log("say hello")
      }
    }
    
    let p = new Person();
    
    console.log(p);
    console.log(Person.age);
    
    p.sex = "女";
    console.log(p);
    p.say();
    Person.sayhello()

8.2、构造函数

class Dog { 
      name: string;
      age: number;
      // 构造函数
      constructor(name: string, age: number) { 
        this.name = name;
        this.age = age;
      }
      bark() { 
        console.log(this.name);
      }
    }
    
    const dog = new Dog("中华田园犬", 3);
    console.log(dog);
    dog.bark();

8.3、继承

class Animal { 
      name: string;
      age: number;
      // 构造函数
      constructor(name: string, age: number) { 
        this.name = name;
        this.age = age;
      }
      bark() { 
        console.log(this.name);
      }
    }
    
    // 继承
    class Pig extends Animal { 
      bark() { 
        console.log("this is pig");
      }
      run() { 
        console.log(`${ this.name} is running`);
      }
    }
    
    const pig = new Pig("皮特兰猪", 7);
    console.log(pig);
    pig.bark();
    pig.run();

8.4、接口

interface myinterface { 
      name: string;
      age: number;
    }
    
    const obj: myinterface = { 
      name: "yueyue",
      age: 18,
    };
    console.log(obj);

8.5、封装

class Dog { 
      private _name: string;
      private _age: number;
      // 构造函数
      constructor(name: string, age: number) { 
        this._name = name;
        this._age = age;
      }
      getName() { 
        return this._name;
      }
      setName(name: string) { 
        this._name = name;
      }
      get age() { 
        return this._age;
      }
      set age(value: number) { 
        this._age = value;
      }
      bark() { 
        console.log(this._name);
      }
    }
    
    const dog = new Dog("中华田园犬", 3);
    dog.setName("柴犬");
    console.log(dog.getName());
    dog.age = 4;
    console.log(dog.age);

8.6、泛型

function fn<T>(name: T): T { 
      return name;
    }
    
    console.log(fn(10));
    console.log(fn<string>("name"));
    
    interface inter { 
      length: number;
    }
    
    function fn1<T extends inter>(a: inter): number { 
      return a.length;
    }
    
    console.log(fn1({  length: 45 }));

![在这里插入图片描述][70968c7ae4904a7d884fa6c7428413c4.png_pic_center]

[4bedf1037ecb4f7491c06ee583931fb6.png]: /images/20220829/d8c26839c01c4106aa2d195af42ec827.png
[70968c7ae4904a7d884fa6c7428413c4.png_pic_center]: /images/20220829/3337045f1d4c4ebab649befe30ecc320.png