ts学习笔记

2020 - 9 - 16
// 变量
// 布尔类型 Boolean
let flag: boolean = true;
// 数字类型
let num: number = 44;
let arr: number[] = [1, 2, 3];
let arrs: any[] = ["1", 1]
// 元组,数组的一种，可以指定我们数组的类型
let tuple: [string, number] = ["4", 132]
// 枚举类型，主要定义我们的标识符
enum pay {
  success = 0,
  error = 1,
}
// 如果不给枚举类型里面的键赋值的话那么，默认的值就是它的索引值
enum pays {
  successs,
  errors,
}
//当其中某个键有值的时候，后面的键是取最近的有值键的值作为基准值开始计算的
enum payss {
  successss,
  errorss = 5,
  test, //这里的test他的值是重他上一个的基准值开始计算的，所以是6
}
let statu: pays = pays.successs;
console.log(statu)
//任意类型：any
//当变量的类型为任意类型的时候，那么就跟原来var定义变量一样的，可以定义任何类型的值
let anys: any = {}
let anyss: any = ""
// eg:
let box: any = document.querySelector(".box"); //当我们获取元素的时候，因为没有object类型，所以只能给他any任意类型的
box.style.color = "red";
console.log(box)
//一个变量定义多个数据类型
// 定义没有赋值可能就是undifined和null
var nums: number | undefined | null;
// 定义方法
function fn(): void {
  //viod表示这个方法没有任何返回类型，相当于没有返回值的时候定义
}

function fns(): number {
  //viod表示这个方法没有任何返回类型
  return 456;
}
//never类型代表不会出现的值
let nevers: never;

// 函数的定义
// 函数声明法
function run(): string {
  return "string"
}
// 函数表达式
let runs = function (): string {
  return "string"
}
// 方法调用
// runs();
// eg：
// alert(runs())
// 函数声明传参
function runss(name: String, age: number): any {
  return `${name}今年${age}岁了`;
}
alert(runss("张三飞1", 20))
// 函数表达式传参
let runsss = function (name: String, age: number): any {
  return `${name}今年${age}岁了`;
}
alert(runsss("张三飞", 21))
// 方法没有返回值
function noResult(): void {
  //没有返回值使用void
}
//ts中方法的实参和形参必须一样，不然就需要配置,在变量后面加一个？号，表示可选参数
// eg
let runssss = function (name: String, age?: number): any {
  if (age) {
    return `${name}今年${age}岁了`;
  } else {
    return `我叫${name}`;
  }
}
alert(runssss("张三龙"))
//注意：可选参数必须配置到，必须参数的后面
// eg：错误写法
// let fnss = function (name?: string, age: number): any {
//   return 123
// }
//默认参数
let testFn = function (name: String = "ganyunfei"): any {
  return name;
}
//剩余参数
//三点运算符  接受形参传过来的值
function sum(...result: number[]): any {
  console.log(result)
}
function sums(a: any, b: number, ...result: number[]): any {
  console.log(result)
}
sums(1, 2, 3)
// ts重载
// es5中出现同名方法下面的方法会替换上面的方法
function chongzhai(name: string): any
function chongzhai(name: string, age?: number): any {
  if (age) {
    return age
  } else {
    return name
  }
}
function fnTest(age: number = 123, num?: any): number {
  return age;
}
//ts中定义类
class Person {
  name: string;//属性 前面省略了public
  constructor(n: string) { //构造函数，实例化类的时候触发的方法
    this.name = n;
  }
  run(): void {
    console.log(this.name);
  }
  setName(name: string) {
    this.name = name;
  }
  getName(): string {
    return this.name;
  }
}
var p = new Person("张三");
p.setName("ganyunfei");
console.log(p.getName())
// ts中实现继承
// 关键字extends 、super
// 当父类和子类同时都有一个方法的时候，会采取一个就近原则
class Persons {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }
  run(): string {
    return this.name
  }
}
// 继承Persons
class Web extends Persons {
  constructor(name: string) {
    super(name); //初始化父类的构造函数
  }
  work() {
    alert("我是继承类新扩展的方法")
  }
}
// 类里面的修饰符
// public：公有，在类里面，字类，类外面都可以访问
// protected：保护类型，只能在类里面或者，子类里面可以访问，在类外面是无法访问的
// private：在类里面可以访问，子类和外面都无法访问
// 属性如何不加修饰符默认就是public


class testPerson {
  protected name: string;
  constructor(name: string) {
    this.name = name;
  }
  work(): void {
    console.log(this.name)
  }
}
class extendsTest extends testPerson {
  constructor(name: string) {
    super(name);
  }
  work() {
    console.log(this.name)
  }
}
let per = new extendsTest("张三丰");
per.work();
// 注意：super的作用
// 调用super = 父类.prototype.method.call(this)，当我们调用super的时候就等于实例化了父类的构造函数，然后改变了this指向
// super：super的第二个作用是还可以调用我们父类的方法