typescript基础(2)

TypeScript 是一种由微软开发的的强类型编程语言。它是JavaScript的一个超集，可以编译成纯Javascript，兼容JavaScript，提供类和模块的概念，它的最大的特点就是类型化。未来前端开发的趋势。不能在浏览器或node中直接运行需要先编译为Javascript才能运行。

interface接口强约束对象的属性、属性的个数、属性值的类型

为一系列同类对象或同类别的类提供属性定义和方法声明但没有任何赋值和实现的数据类型

可描述类的一部分抽象行为，也可描述对象的结构形状
接口一般首字母大写, 适用于属性多方法少的情况
赋值的时候，变量的形状必须和接口的形状保持一致
接口中可定义可选属性只读属性任意属性

interface接口只能定义对象类型或接口当名字的函数类型

interface Person {
  name: string,
  age?: number, // ?可选属性
  [key: string]: any, // 一个或多个属性
  say?: () => void // 定义可选方法
}
const getPersonName = (person: Person) => {
  console.log(person.name, 'get')
}
const setPersonName = (person: Person, name: string) => {
  person.name = name
  console.log(person.name, 'set')
}
const person = {name: 'tew'}
getPersonName(person) // tew
setPersonName(person, 'bob') // bob

接口继承的使用场景

interface Point{
  x:number,
  y:number
}
// 需求发生了变化，但是是在原来 Point 接口的基础之上增加了一个新的 z:number 属性。
interface Point3d extends Point{
  z:number
}

特殊类型的接口类型

// 接口名字当名字的函数类型
interface ActionContext {
  (state: any, commit: any): void
}
let action:ActionContext = (state:any, commit: any):void => {
  console.log(state, commit) // a b
}
action('a', 'b')

使用type定义类型

type可以定义任何类型的(基础类型、联合类型、元祖等)，interface只能定义对象类型或接口当名字的函数类型

// 定义基本类型
type num = number
let count: num = 3
console.log(count) // 3

// 定义联合类型
type BaseType = string | number | symbol
let dataType: BaseType = 3
let dataType1: BaseType = '22'
let dataType2: BaseType = Symbol('tew')
console.log(dataType, dataType1, dataType2) // 3 22 Symbol(tew)

interface Car { brandNo: string }
interface Plane { No: string, brand: string }
type Vechile = Car | Plane
let vechile: Vechile = { brandNo: '阿萨' }
let vechile1: Vechile = { No: '12312', brandNo: '实施' }
console.log(vechile) // { brandNo: '阿萨' }
console.log(vechile1) // { No: '12312', brandNo: '实施' }

// 适用 交叉类型 & 可让类型中的成员合并成一个新的type类型
type Group = { groupName: string }
type GroupInfoLog = { info: string, happen: string }
type GroupMemeber = Group & GroupInfoLog// type 交叉类型合并
let data: GroupMemeber = {
  groupName: "001", memberNum: 10,
  info: "集体爬山", happen: "中途有组员差点滑落",
}
console.log(data) // {groupName:'001',info:'集体爬山',happen:'中途有人差点滑落'}

class类

类的结构及声明创建一个TypeScript类必须使用class关键字进行声明
属性和方法的定义

属性: 类的属性实质为在类体内定义的变量，用于保存或设置参数

方法: 类的方法实质为在类体内定义的函数，用于实现某项功能，其定义方法与普通函数定义方法相同，同时可以应用访问权限关键字对方法访问权限进行限制

class 类名{
  name:string; // 定义类的属性
  fun(){}  // 定义一个无返回值的方法
  say():string{ // 定义返回值类型为string的方法
    return  '返回值' // 返回函数值
  }
}

静态属性可以使用static关键字标注类的属性
注:类的静态属性在类的内部只能使用类名.静态属性方式调用(calc.count) 而不能使用this.count调用

class Calc{
  static count=10;
  add(data1:number):number{
    var sum=Calc.count+data1;
    return sum;
  }
}
var test=new Calc();
console.log(test.add(20)); // 30
// 类的静态属性在类的内部只能使用 类名.静态属性方式调用(calc.count) 而不能使用this.count调用

构造函数

是一种特殊的方法。用来在创建对象时初始化对象，即为对象成员变量赋初始值.而TypeScript的构造函数用关键字constructor来实现。
1
2
3
4
5
6
7
8
9
class Student{  //定义student类
  name:string;  //定义类的属性
  constructor(myname:string){ //定义构造函数
    this.name=myname;
  }
  study(){ //定义类的方法
    //定义该方法所要实现的功能
  }
}

类的实例化

一般情况下，创建一个类后并不能直接的对属性和方法进行引用，必须对类进行实例化，即创建一个对象。TypeScript中用new 关键字创建对象。实例化后通过“.”来访问属性和方法。

class Student{  //定义student类
  name:string;  //定义类的属性
  constructor(myname:string){ //定义带参数的构造函数
    this.name=myname;
  }
  study(){ //定义类的方法
    console.log("<h1>study "+this.name+"</h1>");
  }
  write():string{
    return this.name;
  }
}
var s1=new Student("Jim");
console.log("<h2>attr "+s1.name+"</h2>"); //获取name属性
s1.study();   // 调用study方法
console.log("<h3>write "+s1.write()+"</h3>");

类的继承

TypeScript中用关键字extends指明继承关系。例如，已经定义了类A，如果让类B继承A,我们把A叫做基类，B叫子类。

要在子类中调用基类中的属性与方法就要使用super关键字

class Animal { // 定义基类
  name: string;
  constructor(theName:string){
    this.name = theName;
  }
  move(meters:number) {
    console.log(this.name + " moved " + meters + 'm.')
  }
}
class Snake extends Animal{
  contructor(name:string){
    super(name); // 调用基类的构造函数
  }
  move(){ // 重写基类的方法
    console.log('----Snake----')
    super.move(5); // 调用基类的方法
  }
}
var s = new Snake('Tom');
s.move();
/*
在Typescript中我们采用extends关键字来标识类的继承关系,在实例中重写父类的方法,并通过super关键字来调用父类的方法
*/

类的访问控制

public 允许在类的内外被使用(默认为public)
private 允许在类的内部被使用

protected 允许在类的内部及继承的子类中被使用

/* public  private */
class Person {
  private name: string = 'tew';
  public getName() {
    console.log(this.name)
  }
}
const person = new Person()
// console.log(person.name)
//  Property 'name' is private and only accessible within class 'Person'.
person.getName() // tew

/* protected */
class Animal {
  protected name: string = 'yang'
  protected getName() {
    console.log(this.name)
  }
}
class Sheep extends Animal {
  getSheepName() {
    this.getName() // yang 等同 super.getName()
    console.log(this.name) // yang
  }
}
const sheep = new Sheep()
// sheep.getName()
// Property 'getName' is protected and only accessible within class 'Animal' and its subclasses.
sheep.getSheepName()

abstract 抽象类

readonly 类的修饰符初始值之后不可再修改

abstract 抽象类

class Person {
  // readonly 只读不可修改
  public readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}
const person = new Person('tew');
// person.name = 'hello';
console.log(person.name);
// 抽象类 不能实例化  只能被继承
abstract class Geom {
  getType() {
    return 'Gemo';
  }
  // 抽象方法只能定义  不能实现
  abstract getArea(): number;
}
// 继承抽象类 并实现抽象方法
class Circle extends Geom {
  getArea() { // 实现抽象类
    return 123;
  }
}
console.log(new Circle().getArea()) //123

泛型 generic 泛指的类型

函数泛型

function join<T>(first: T, second: T) {
  return `${first}${second}`
}
join<string>('1', '2')
join<number>(1, 2)
// function map<T>(arg: Array<T>){ return arg }
function map<T>(arg: T[]) {
  return arg
}
map<string>(['1'])
function join1<T, P>(first: T, second: P) {
  return `${first}${second}`
}
join1<string, number>('1', 2)

类中的泛型

interface接口 强约束对象的属性、属性的个数、属性值的类型

使用type定义类型

class类

类的继承

类的访问控制

abstract 抽象类

泛型 generic 泛指的类型

interface接口强约束对象的属性、属性的个数、属性值的类型