这些TypeScript的基础三

webpack

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS.

步骤:

1. 初始化项目

   进入项目根目录,执行命令npm init -y — 创建package.json文件

2. 下载构建工具

   npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin 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中的清除插件，每次构建都会先清除目录

3. 根目录下创建webpack的配置文件webpack.config.js

   const path = require("path");
   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(),
           new HtmlWebpackPlugin({
               title:'TS测试'
           }),
       ]
   }
   

4. 根目录下创建tsconfig.json，配置可以根据自己需要

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

5. 修改package.json添加如下配置

   {
     ...,
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack",
       "start": "webpack serve --open chrome.exe"
     },
     ...
   }
   

6. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

---

类 class

要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象.不同的类可以用来创建不同的对象

定义类

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},今年${this.age}岁`);
    // 大家好,我是Jackson,今年20岁
  }
}
// 使用类
const p = new Person('Jackson',20);
p.sayHello();

---

面向对象的特点

封装

• 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装

• 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

• 只读属性（readonly）：

  如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

• TS中属性具有三种修饰符：

  • public（默认值），可以在类、子类和对象中修改
  • protected ，可以在类、子类中修改
  • private ，可以在类中修改

// public(默认值) --- 可以在类,子类和对象中修改
class Person{
  public name:string; //写或者什么都不写都是public
  public age:number;

  constructor(name:string,age:number){
    this.name = name; //可以在类中修改
    this.age = age;
  }

  sayHello(){
    console.log(`大家好,我是${this.name},今年${this.age}岁`);
  }

}

class aa extends Person{
  constructor(name:string,age:number){
    super(name,age);
    this.name = name; //子类中可以修改
  }
}

const p = new Person('Jackson',20);
p.name = 'yyqx'; //可以通过对象修改
p.sayHello();

// protected --- 可以在类,子类中修改
class Person{
  protected name:string;
  protected age:number;

  constructor(name:string,age:number){
    this.name = name; //可以修改
    this.age = age;
  }

  sayHello(){
    console.log(`大家好,我是${this.name},今年${this.age}岁`);
  }

}

class aa extends Person{
  constructor(name:string,age:number){
    super(name,age);
    this.name = name; //子类中也可以你修改
  }
}

const p = new Person('Jackson',20);
// p.name = 'yyqx'; //不能修改
p.sayHello();

// private --- 可以在类中修改
class Person{
  private name:string;
  private age:number;

  constructor(name:string,age:number){
    this.name = name; //可以修改
    this.age = age;
  }

  sayHello(){
    console.log(`大家好,我是${this.name},今年${this.age}岁`);
  }

}

class aa extends Person{
  constructor(name:string,age:number){
    super(name,age);
    this.name = name; //子类中不能修改
  }
}

const p = new Person('Jackson',20);
p.name = 'yyqx';
p.sayHello();

• 属性存取器

  对于一些不希望被任意修改的属性可以将其设置为private;

  直接将其设置为private将导致无法再通过对象修改其中的属性;

  可以在类中定义一组读取,设置属性的方法,这种对属性读取或设置的属性被称为属性的存取器;

  读取属性的方法叫做setter方法,设置属性的方法叫做getter方法;

  class Person{
    private name:string;
  
    constructor(name:string,age:number){
      this.name = name;
    }
  
    sayHello(){
      return this.name;
    }
  
  }
  
  const p = new Person('Jackson',20);
  console.log(p.name); //Jackson 通过getter读取name属性
  p.name = 'yyqx'; //
  

• 静态属性

  静态属性(方法),也称为类属性. 使用静态属性无需创建实例,通过类即可直接使用;

  静态属性(方法)使用static开头;

  class Person{
    static PI=3.1415926;
    static sum( num1:number, num2:number){
      return num1 + num2;
    }
  }
  console.log(Person.PI);
  console.log(Person.sum(12,45)); //57
  

• this : 在类中,使用this表示当前对象

继承

• 通过继承可以将其他类中的属性和方法引入到当前类中

• class Person{
    name:string;
    age:number;
  
    constructor(name:string,age:number){
      this.name = name;
      this.age = age;
    }
  }
  
  class aa extends Person{
    bark(){
      console.log(`${this.name}在这里`); //旺财在这里
    }
  }
  
  const p = new aa('旺财',4);
  p.bark();
  

• 通过继承可以在不修改类的情况下完成对类的扩展

• 重写 – 发生继承时,如果子类中的方法会替换掉父类中的同名方法就称为方法的重写. 在子类中可以使用supper来完成对父类的引用

  class Person{
    name:string;
    age:number;
  
    constructor(name:string,age:number){
      this.name = name;
      this.age = age;
    }
  
    run(){
      console.log('父类中的run方法');
    }
  }
  
  class aa extends Person{
    bark(){
      console.log(`${this.name}在这里`); //旺财在这里
    }
  
    run(){
      console.log('子类中的run方法,会重写父类中的run方法');
    }
  }
  
  const p = new aa('旺财',4);
  p.bark();
  p.run(); //子类中的run方法,会重写父类中的run方法
  

• 抽象类(abstract class) – 它是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例.

  // 使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现
  abstract class Person{
    abstract run():void;
    break(){
      console.log('break方法');
    }
  }
  
  class aa extends Person{
    run(){
      console.log('run方法');
    }
  }
  

---

总结

1. webpack打包时要初始化项目,下载构建工具,然后配置修改才可以启动
2. 定义类class
3. TS属性的三种修饰符:
   • public（默认值），可以在类、子类和对象中修改
   • protected ，可以在类、子类中修改
   • private ，可以在类中修改
4. 静态属性 static