TS学习(八) :TS中的类

TS中类的书写

以前在js中书写类是这样的,然后我们在加上TS的类型检查你会发现报错了

class User {
    constructor(name:string,age:number) {
        this.name=name;
        this.age=age;
    }
}

为什么呢? 在TS中他认为你这样写代码不是很好,因为在TS中你把User这个类写出来以后,

它里面有哪些属性和方法,你应该很清楚的知道,所以TS认为你这些属性应该单独在一个地方写,

而不是使用构造函数constructor动态的创造数据,在js中是可以使用构造函数取动态添加数据,

而在TS中是不允许的,TS认为在创建一个对象后是不允许取给对象添加属性的,

由于动态添加属性,可能会存在一些隐患,所以TS是不允许我们动态添加属性的

const obj = {}
obj.name='蜗牛';
obj.age=18;

知识补充

在TS中这样是不行的,有人可能就会说因为const原因,我只能说小伙子你还年轻,js基础不扎实,

const 我一般是用来定义常量的,就是一些固定的东西比如某个状态码,如 const STATUS=200,

像这样的 放在配置文件中,使用时候导入进行使用,const 说定义的值不能改变,说的其实就是内存地址

基本数据类型内存地址是不会变的,而引用数据类型,内存地址是会改变的,这里为什么还是可以使用const

那是因为const 不能改变的只是引用数据类型的名字,地址是可以换的,比如 const 房间1={},定义一个房间

名字叫”房间1“,虽然我可以给房间里面添加删除东西,但是房间名字没有改变,那我是不是可以吧另外一个房间的名字也改成”房间1“,

只不过地址换了,但是名字没有变,所以就是这个道理


知识点补充完,继续TS,既然TS不允许动态添加属性那该怎么书写呢

使用属性列表来描述类中的属性,什么意思,举个

class User {
    name:string
    age:number
    constructor(name: string, age: number) {
        this.name=name;
        this.age=age;
    }
}
const u= new User("蜗牛",18);
//不能添加属性
u.sex="男"//这里就会报错
//还可以这样赋值
const u= new User();
u.name="蜗牛",18
u.age=18

把属性写在类里面,表示这个类里面有这些属性,在后面使用时只能使用这些属性,不能添加,否则会报错

在这里我想到这个好像有点难受,万一我的属性有很多,那不是要写一堆,感觉好麻烦

属性的初始化检查

有时候我们可能忘记了给对象赋值,如:在构造函数中没有给age赋值

class User {
    name:string
    age:number
    constructor(name: string, age: number) {
        this.name=name;
    }
}
const u= new User("蜗牛",18);

但是他不会报错,但是有些属性我们必须要赋值的,那这个时候怎么办呢

这里我们就得用到一个配置了 strictPropertyInitialization,更加严格的检查属性有没有初始化,会检查属性有没有赋值

{
    "compilerOptions": {
        "target": "es2016",//配置编译目标代码的版本标准
        "module": "commonjs",//配置编译目标使用的模块化标准
        "lib": ["es2016"], //表示默认详情下ts使用的是那一个环境
        "outDir": "./dist",//编译结果的目录
        "strictNullChecks": true,//TS检查变量是否是null
        "removeComments": true,/*编译结果中是否包含注释*/
        "noImplicitUseStrict": true,/*编译结果中是否有"use strict"*/
        "esModuleInterop": true,//启用es模块化交互非es模块导出
        "strictPropertyInitialization": true,//更加严格的检查属性有没有初始化
    },
    "include":["./src"],//执行ts的目录
}

加上这个配置后,上面构造函数中没有给age赋值,TS就会提示age属性报错,我们必须给属性进行赋值

属性默认值

当然我们也可以给属性进行默认值,比如默认性别为”男“,做法有两种

  • 方法1,构造函数参数默认法,这样在创建user对象时可以不传就是默认的男,如果想要修改,则const u= new User("蜗牛",18,"女"),这样就可以了

      class User {
          name:string
          age:number
          gender: "男" | "女" 
          constructor(name: string, age: number,gender:"男" | "女" = "男") {
              this.name=name;
              this.age=age;
              this.gender=gender;
          }
      }
    
  • 方法2,属性默认法,在定义属性时就给默认值,在定义属性gender时,就给默认值为男,这样在构造函数里面就不用给这个属性进行赋值,

    那这里有个问题,既然构造函数里面没有该属性的赋值操作,那该怎么修改该属性呢,如果你想要在const u= new User("蜗牛",18,"女")这里面加一个参数,你会发现没有用,

    因为构造函数都没有该参数,加了也没有,正确的方法时,使用 对象[属性]="XX"; 的方式进行修改,如 u.gender="女";这样就可以改变值了

    class User {
        name:string
        age:number
        gender: "男" | "女" = "男"
        constructor(name: string, age: number) {
            this.name=name;
            this.age=age;
        }
    }
    

属性可选值

当属型是可以有值也可以不传时,如当我们的身份证号可以填写也可以不填时,该怎么给属性赋值呢,两种方法

  • 方法1、 “|”符号 IDCard:string | undefined = undefined,这样的写法

    class User {
        IDCard: string | undefined =undefined;
        constructor() {
        }
    }
    
  • 方法2、链式操作法 IDCard?: string,像js中的链式操作一样

    class User {
        IDCard?: string
        constructor() {
        }
    }
    

只读属性

当某个属性创建后就无法更改时,那这个属性后面就不能在进行修改了,那我们就得用到readonly,加上这个后,在后面就无法进行修改了

class User {
    readonly uid:number
    constructor() {
        this.uid=new Date().getTime()
    }
}
const u= new User();
//这里想修改,结果不让修改,报错
u.uid=1

访问修饰符,可以控制类中的某个成员的访问权限

  • public:默认的访问修饰符,公开的,所有的代码均可访问

  • private: 私有的修饰符,只有在类中可以访问

    class User {
        readonly uid:number
        name:string
        age:number
        gender: "男" | "女" ="男"
        IDCard?: string
        private money:number = 1000000//这是自己的钱,不希望外面进行访问,进行修改
        useMoney: number =0//使用钱和赚到的钱
        constructor(name: string, age: number) {
            this.uid=new Date().getTime()
            this.name=name;
            this.age=age;
        }
        makeMoney(){
            this.money +=this.useMoney
            console.log("剩余金额"+this.money)
        }
    }
    
    const u= new User("蜗牛",18);
    u.useMoney=1000//挣钱
    u.makeMoney()//查看还有多少钱
    

    补充:在js中要实现私有的可以使用Symble;当然这些修饰符也可以用在方法上,这样私有方法外部禁止调用

    class User {
        private money:number = 1000000//这是自己的钱,不希望外面进行访问,进行修改
        useMoney: number =0//使用钱和赚到的钱
        constructor() {
        }
       private makeMoney(){
            this.money +=this.useMoney
            console.log("剩余金额"+this.money)
        }
    }
    const u= new User();
    u.makeMoney()//这里就会报错,禁止调用该方法
    

补充

我们这样写,构造函数里面直接赋值给属性,没有做任何操作,这样显得太机械化,麻烦,

  class User {
      name:string
      age:number
      constructor(name: string, age: number) {
          this.name=name;
          this.age=age;
      }
  }

TS给了我们一个语法糖, 当一个属性在构造函数里面,没有做任何操作就直接赋值给属性了,可以简写成,如下,这样和上面的写法得到的结果是一样的

这样的写法 有且仅当,属性通过构造函数的参数传递,并且不做任何处理的赋值给该属性,可以进行简写

class User2 {
    constructor(public name: string,public age: number) {}
}
const u2=new User2("可莉",18)
console.log(u2);

你可能感兴趣的:(TypeScript,javascript,前端,开发语言)