从零学TypeScript-03 | 青训营笔记

64 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第8天

还是接着上次的说。


2.1.12 any类型

当值的类型为any时,可以对该值进行任意操作,并且不会有代码提示

let obj:any = {x:0}
obj.hello//访问不存在的属性
obj()//当作函数调用
const n:number = obj//赋值给其他类型的变量

这样的话TypeScript就会变成AnyScript,也就是失去了类型保护。

其他隐式具有any类型的情况:

  1. 声明变量不提供类型,也不提供默认值。

image.png 2. 函数参数不加类型

image.png 由于我们不推荐使用any,所以在这两种情况下我们还是要手动加上类型。


2.1.13 typeof运算符

众所周知,JS中提供了typeof操作符用来在JS中获取数据的类型。实际上,ts也提供了typeof操作符,可以在类型上下文中引用变量或属性的类型,也就是类型查询。ts全面支持ES2015中引入的class关键字,并为其添加了类型注解和其他语法,比如可见性、修饰符等。

使用场景:根据已有变量的值获取该类的类型来简化类型书写。

let p = { x:1,y:2 }
//不用typeof
function getType (param:{x:number,y:number}) => {}
getType(p)
//用typeof
function getType (param:typeof p) => {}
getType(p)

注意,type of只能用来查询变量或属性的类型,无法查询其他形式的类型,比如函数调用的类型,这时就会报错

image.png

2.2 TypeScript高级类型

2.2.1 class类

class Person{}
const p = new Person()//创造Person的实例对象

根据ts中的类型推论,可以知道Person类的实例对象P的类型是Person。ts中的class不仅提供了class的语法功能,也作为一种类型存在。

给类添加成员变量

class Person{
age:number
name = '祎祎'//相当于name;string = '祎祎'
}
const p = new Person()//创造Person的实例对象

这样实例对象p就有了属性age和属性name

接下来我们再来看看构造方法,所谓构造方法,就是为类的实例属性设置初始值的,配合类去实现实例对象的实例化这个过程的

class Person{
age:number//指定实例属性
name:string
constructor(age:number,age:string){
    this.age = age
    this.name = name
}
}
const p = new Person(18,'mengww')//创造Person的实例对象
//p.age = 18,p.name = 

此时创建的p这个实例对象的类型就是Person,所以不需要也不能给构造方法设置返回值类型,指定类型使没有意义的也是没有必要的

接下来我们来看看实例方法

class Point {
    x = 10//实例属性
    y = 100
    calc(n:number):void{
        this.x *= n;//通过this访问当前实例对象并对其进行操作
        this.y *= n;
    }
}
const p = new Point();
p.calc(10);
console.log(p.x,p.y);//p.x=100,p.y=1000