初学TypeScript系列(三)

109 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第10天,点击查看活动详情

TypeScript 基础知识

(ps: 接着初学TypeScript系列( 二 ),继续学习TS相关基础知识 )

g. 元组(Tuple)

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。

let a: [string, number] = ['letter', 7]; 

//当访问一个已知索引的元素时,会得到正确的类型
console.log(a[0].substring(1)) // OK   etter
console.log(a[1].substring(1)) // Error, "类型number”上不存在属性“substring”

//当添加元素时,它的类型会被限制为该元组的联合类型
let a: [string, number] = ['letter', 7]; 
a.push('male'); // OK
a.push(true); //  Error,"类型boolean”的参数不能赋给类型“string | number”的参数。 

h. 对象(object)

// 使用特定的对象类型注释声明一个名为 person 的变量
let person: {
  name: string;
  age: number;
};

// 给 person 分配一个具有所有必要属性和值类型的对象
person = {
  name: 'Tani',
  age: 17,
};

I. 类型断言

用来手动指定一个值的类型

语法:

尖括号语法: <类型>值

as语法 : 值 as 类型  
// 类型断言  将 any 断言为一个具体的类型
 let value: any = "a string"; 
 let strLength: number = (value as string).length;


// 类型断言 将一个联合类型断言为其中一个类型
function getLength(x: number | string) {
  if ((<string>x).length) {
    return (x as string).length
  } else {
    return x.toString().length
  }
}
console.log(getLength('abcd'), getLength(1234)) // '4' '4'

TypeScript 中的类

TypeScript 除了实现了 ES6 中的类的功能以外,还添加了一些新的用法。

使用 class 定义类,使用 constructor 定义构造函数。

通过 new 生成新实例的时候,会自动调用构造函数。

//声明一个 Greeter 类
class Greeter {
  // 声明属性
  message: string

  // 构造方法(构造函数)
  constructor (message: string) {
    this.message = message
  }

  // 一般方法
  greet (): string {
    return 'Hello ' + this.message
  }
}

// 创建类的实例
const greeter = new Greeter('world')
// 调用实例的方法
console.log(greeter.greet()) // 'Hello world'

使用 extends 关键字实现类的继承,子类中使用 super 关键字来调用父类的构造函数和方法。

class Animal {
  name: string
  constructor (name: string) {
    this.name = name
  }
  cry () {
    console.log('wang! wang!')
  }
  run (distance: number=0) {
    console.log(`${this.name} run ${distance}m`) 
  }
}

class Dog extends Animal {
  constructor (name: string) {
    // 调用父类型构造方法
    super(name)
  }
  // 重写父类型的方法
  run (distance: number=100) {
    super.run(distance)
  }
}

const dog = new Dog('万岁')
dog.run()  
dog.cry() // 可以调用从父中继承得到的方法  

TypeScript 三种访问修饰符

用来描述类内部的属性/方法的可访问性

  • public 修饰的属性或方法是公有的

    可以在任何地方被访问到,默认所有的属性和方法都是 public 的

  • private 修饰的属性或方法是私有的

    不能在声明它的类的外部访问,只能类内部可以访问

  • protected 修饰的属性或方法是受保护的

    它和 private 相似,区别是它在子类中允许被访问。类内部和子类可以访问

class Person {
  private name: string; // 类的私有属性、外部访问不到
  protected email: string; // 只能从这个类和子类中进行访问和修改
  public age: number; // 任何地方都可以访问和修改

  constructor(n: string, c: string, a: number) {
    this.name = n;
    this.email = c;
    this.age = a;
  }

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

const person1 = new Person('ConardLi', 'conard@xx.com', 17);
person1.sayHello(); // 'Hi,我是 ConardLi ,今年 17 岁了'
console.log(person1.name); // 属性“name”为私有属性,只能在类“Person”中访问。
console.log(person1.email); // 属性“email”受保护,只能在类“Person”及其子类中访问。
console.log(person1.age); // 17