这些TypeScript的基础三

Posted 2023-02-23 ZZZ --- jh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了这些TypeScript的基础三相关的知识，希望对你有一定的参考价值。

webpack

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

步骤:

初始化项目

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

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中的清除插件，每次构建都会先清除目录

根目录下创建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测试'
        ),
    ]

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


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

修改package.json添加如下配置


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

在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方法');

总结

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

以上是关于这些TypeScript的基础三的主要内容，如果未能解决你的问题，请参考以下文章

这些TypeScript的基础三

TypeScript（04）：基础类型

TypeScript基础入门之装饰器(三)

LayaBox---TypeScript---类型推论

第二章 ECMAScript 和 TypeScript概述

1typescript - 基础类型