TS 基础学习(二)

对象类型:
  JS中的对象是有属性和方法构成的,而TS中对象的类型就是在描述对象的结构(有什么类型的属性和方法)
  1、直接使用{}来描述对象结构。属性采用属性名:类型的形式;方法采用方法名():返回值类型的形式
  2、如果方法有参数,就在方法名后面的小括号中指定参数类型(比如:greet(name: string):void)
  3、在一行代码中指定对象的多个属性类型时,使用;(分号)来分隔
  4、如果一行代码只指定一个属性类型(通过换行分隔多个属性类型),可以去掉;(分号)
  5、方法的类型也可以使用箭头函数形式
// 对象类型的写法:
  let person: { name: string; age: number; sayHi(name: string):void } = {
     name: 'jack',
     age: 19,
     sayHi(name) {
     }
  }
  // 上述写法也可等同于
  let person1: {
      name: string
      age: number
      sayHi(name: string):void
   } = {
      name: 'jack',
      age: 19,
      sayHi(name) {
   }
  }
interface(接口)和type(类型别名)的对比:
  相同点: 都可以对象指定类型
  不同点:接口,只能为对象指定类型, 类型别名,不仅可以为对象指定类型,实际上可以为任何类型指定别名。
  如果两个接口之间有相同的属性或方法, 可以将公共的属性或方法抽离出来,通过继承来实现复用
  1、使用extends(继承)关键字实现了接口Point3D继承Point2D
  2、继承后,Point3D就有了Point2D的所有属性和方法。
元祖
  1、元组类型确切地标记出有多少个元素,以及每个元素的类型。
  2、该示例中, 元素有两个元素, 每个元素的类型都是number
类型推论
  在TS中, 某些没有明确指出类型的地方,TS的类型推论机制会帮助提供类型。
  换句话说:由于类型推论的存在,在这些地方,类型注解可以省略不写
  发生类型推论的2中常见场景: 1.声明变量并初始化时。 2. 决定函数返回值时。
  解释:
  使用as关键字实现类型断言
  关键字as后面的类型是一个更加具体的类型
  const aLink = document.getElementById('link') as HTMLAnchorElement
  另外一种语法, 使用<>语法:
  const bLink = <HTMLAnchorElement>document.getElementById('link')

枚举
  枚举的功能类似于字面量类型 + 联合类型组合的功能, 也可以表示一组明确的可选值。
  枚举: 定义一组命名常量。它描述一个值, 该值可以是这些命名常量中的一个。
  1、使用enum关键字定义枚举。
  2、约定枚举名称,枚举中的值以大写字母开头
  3、枚举中的多个值之间通过,(逗号)分割
  4、定义好枚举后, 直接使用枚举名称作为类型注解。
  注意:形参direction的类型为枚举Direction,那么实参的值就应该是枚举Direction成员的任意一个, 例如:changeDirection(Direction.Down) 类似于JS中的对象,通过点(.)语法访问枚举成员
除了数字枚举, 我们还可以定义枚举成员的值是字符串的枚举(字符串枚举)
  注意: 字符串枚举是没有自增长行为,因此字符串枚举的每个成员必须有初始化值
  1、枚举是TS为数不多的费JavaScript类型扩展(不仅仅是类型)的特性之一。
  2、因为其他类型仅仅是被当做类型,而枚举不仅用作类型,还提供值(枚举成员都是有值的)。
  3、也就是说,其它的类型会在编译为JS代码自动移除,但是枚举类型会被编译为JS代码!
any类型
  原则: 不推荐使用any!这会让TypeScript变为‘AnyScript’(失去TS类型保护的优势)。因为当值的类型为any时,可以对该值进行任意操作,并且不会有代码提示。
  除非临时使用any来,“避免”书写很长,很复杂的类型!其他隐式具有any类型的情况:
  1.声明变量不提供类型也不提供默认值。
  2.函数参数不加类型。
  注意:因为不推荐使用any,所以这两种情况下都应该提供类型
typedof
  JS中提供了typeof操作符,用来在JS中获取数据的类型。
  TS也提供了typeof操作符,可以在类型上下文中引用变量或属性的类型(类型查询)
  1、使用typeof操作符获取变量p的类型,结果与第一种(对象字面量形式的类型)相同
  2、typeof出现在类型注解的位置(参数名称的冒号后面)所处的环境就在类型上下文(区别于JS代码)
  注意:typeof只能用来查询变量或属性的类型,无法查询其他形式的类型(比如:函数调用的类型)

posted @ 2024-06-26 15:05  等风来灬  阅读(27)  评论(0编辑  收藏  举报