typescript学习记录

敲了一遍记不住，留下来以备后续查询之用
index.ts 主要记录了ts的基本信息，后面有index.html

console.log('hello 你好啊！');
let str:string='你好';
let arr:number[]=[11,22,33];//数组里所有的元数据都是number
// let arr:number[]=[11,22,'33'];//报错
console.log(arr);
let arr1:Array<number>=[11,22,33];//数组里所有的元数据都是number
console.log(arr1);

/**
 * 元组类型（tuple) 属于数组一种，可以定义数组元数据既可以是数字，也可以是字符串。
 * */ 
let arr2:[number,string]=[123,'this is ts'];
console.log(arr2);

/*
枚举类型（enum）
    随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据。
    例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。  
    在其它程序设计语言中，一般用一个数值来代表某一状态，这种处理方法不直观，易读性差。
    如果能在程序中用自然语言中有相应含义的单词来代表某一状态，则程序就很容易阅读和理解。
    也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值，
    这种方法称为枚举方法，用这种方法定义的类型称枚举类型。
        
            enum 枚举名{ 
                标识符[=整型常数], 
                标识符[=整型常数], 
                ... 
                标识符[=整型常数], 
            } ;     
 */
enum Flag1{
  success,error //如果没有赋值，他的值就是下标
}
let s:Flag1=Flag1.success;
console.log(s);

enum Flag2{
  success=1,error=2
}
let d:Flag2=Flag2.success;
console.log(d);

enum Flag3{
  blue,red=3,'orange' //等于的是下标，后面的下标自增长
}
let e:Flag3=Flag3.orange;
console.log(e);

enum Err{
  'undefined'=-1,'null'=-2,'success'
}
let f:Err=Err.success;
console.log(f);

/**
 * 任意类型 any
 */

console.log(document);
let oBox:any=document.getElementById('box');
oBox.style.color='red';

/**
 * undefined null
 */

// let num:number;
// console.log(num);//为赋值类型不对报错

let num:number|undefined;
console.log(num);//
num=123;
console.log(num);

let num1:null;
num1=null;
console.log(num1);

// let num2:number|null|undefined;
// num=null;//错误，只能赋值数字

/**
 * viod 表示没有任何类型，一般用于定义方法的时候没有返回值。
 */
function run():void{ //方法没有返回任何类型
  console.log('run');
}
run();

// function run1():number{ //报错
//   console.log('run');
// }
// run1();

function run2():number{ //返回什么类型定义什么类型
  return 123
}
run2();

/**
 * never 其他类型（包括null和undefined）的子类型，代表不会出现的值。
 * 这意味着声明never的变量只能被never类型所赋值
 */
// let a:undefined;
// a=undefined;

// let b:null;
// b=null;

let a:never;
// a=123;//报错
// a=(()=>{
//   throw new Error('错误');
// })()

// 方法可选参数
// es5里面方法的实参和形参可不一样，但是ts中必须一样，如果不一样就需要配置可选参数。
function getInfo1(name:string,age?:number):string{
  if(age){
    return `${name}---${age}`;
  }else{
    return `${name}---年龄保密`
  }
}
console.log(getInfo1('zhangsan'));

//默认参数，可选参数
//es5里面没法设置默认参数，es6和ts中都可以设置默认参数
function getInfo2(name:string,age:number=20):string{
  if(age){
    return `${name}---${age}`;
  }else{
    return `${name}---年龄保密`
  }
}
console.log(getInfo2('张三'));

//剩余参数
function sum(a:number,b:number,c:number,d:number):number{
  return a+b+c+d;
}
console.log('剩余参数'+sum(1,2,3,4));
//es6三点运算符，接受形参缓过来的值
function sum1(...result:number[]):number{
  var sum=0;
  for(let i=0;i<result.length;i++){
    sum+=result[i];
  }
  return sum;
}
console.log('三点运算符'+sum1(2,3,4,5,6,9));

// 函数重载
//java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
//typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
//ts为了兼容es5和es6，重载的写法与java中有区别

// es5中出现同名方法，下面的会替换上面的方法
// function css(config){

// }
// function css(config,value){

// }

// ts中的重载 参数不一样
function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any{
  if(typeof str==='string'){
    return '我叫：'+str;
  }else{
    return '我的年龄是：'+str;
  }
}
console.log(getInfo('张三'));
console.log(getInfo(20));
// console.log(getInfo(true));//错误

// ts中的重载 参数一样
function getInfo3(name:string):string;
function getInfo3(namg:string,age:number):number;
function getInfo3(name:any,age?:any):any{
  if(age){
    return '我叫：'+name+'我的年龄是'+age;
  }else{
    return '我叫：'+name;
  }
}
console.log(getInfo3('张三'));
console.log(getInfo3('李四',20));
// console.log(getInfo3('李四',true));//报错


console.log('***********ts中的类和继承************')
//ts中的类和继承
// ts中实现继承
class Person{
  name:string; //属性 前面默认省略了public关键词
  protected age:number;
  constructor(name:string,age:number){ //构造函数 实例化类的时候触发的方法
    this.name=name;
    this.age=age;
  }
  run():string{
    return `${this.name}在运动`;
  }
  getName():string{
    return this.name;
  }
  setName(name:string):void{
    this.name=name;
  }
}
var p=new Person('张三',15);
console.log(p.getName());
console.log('父类run方法'+p.run());
p.setName('李四');
console.log(p.getName())

// ts中实现继承 extends super
class Web extends Person{
  constructor(name:string,age:number){
    super(name,age);//初始化父类的构造函数
  }
  work(){
    console.log(`${this.name}在工作`)
  }
  run(){//子类和父类有相同的方法，子调用子。
    return `${this.name}在运动-子类`
  }
}
let w=new Web('李四',15);
console.log('子类run方法'+w.run());
w.work();

// 类里面的修饰符
// ts里面定义属性的时候给我们提供了 三种修饰符
/**
 * public：公有 在类里面，子类，类外面都可以访问
 * protected：保护类型 在类里面，子类里面可以访问，在类外部没法访问
 * private；私有 在类里面可以访问，子类，类外部都没法访问
 * 
 * 属性如果不加修饰符，默认公有
 */

//子类访问父类public属性
var ww=new Web('李四',15);
ww.work();

//类外部访问公有属性

var p=new Person('哈哈哈',15);
console.log(p.name);//外部可以访问
// console.log(p.age);//ts报错，保护属性，外部不能访问

//保护类型 protected

//静态属性 静态方法 jquery用到静态方法$.get ......
/** jquery的实现方式
function $(element){
  return new Base(element)
}
$.get=function(){//$的静态方法。
  
}
function Base(element){
  this.element=获取dom节点;
  this.css=function(arr,value){
      this.element.style.arr=value;
  }
}
$('#box').css('color','red')
$.get('url',function(){//调用$的静态方法

})
 */

class Per{
  public name:string;
  public age:number=20;
  static sex='男';//静态属性
  constructor(name:any) {
    this.name=name;
  }
  run(){
    alert(`${this.name}在运动`);
  }
  work(){
    alert(`${this.name}在工作`)
  }
  static print(){ //静态方法 
    alert('pinrt方法');
    // alert('pinrt方法'+this.age)//报错 没法调用类里面的属性
    alert('性别：'+this.sex);
  }
}
Per.print();//静态方法的调用

//多态：父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现
//多态属于继承，是继承的一个表态
class Animal{
  name:string;
  constructor(name:string){
    this.name=name
  }
  eat(){//具体吃什么不知道，继承它的子类事项，每一个子类的表现不一样
    console.log('吃的方法')
  }
}

class Dog extends Animal{
  constructor(name:string){
    super(name);
  }
  eat(){
    return this.name+'吃粮食';
  }
}
let dd=new Dog('狗');
console.log(dd.eat());

class Cat extends Animal{
  constructor(name:string){
    super(name);
  }
  eat(){
    return this.name+'吃鱼';
  }
}
let cc=new Cat('猫');
console.log(cc.eat());

//typescript中的抽象类，它是提供其他类型继承的基类，不能直接被实例化。
//用abstract关键字定义抽象和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
//abstract抽象方法只能放在抽象类里面
//抽象类和抽象方法用来定义标准 Animal这个类要求它的子类必须包含eat方法
abstract class Animal2 {
  public name:string;
  constructor(name:string){
    this.name=name;
  }
  abstract eat():any;//抽象方法不包含具体实现并且必须在派生类中实现
  run(){
    console.log('其他方法可以不实现');
  }
}
// let a=new Animal2();//报错，抽象类不能直接实例化
class Dog2 extends Animal2{
  constructor(name:any){
    super(name);
  }
  //抽象类的子类必须实现抽象类里面的抽象方法
  eat(){
    console.log(this.name+'吃粮食');
  }
}
let dg=new Dog2('小花花');
dg.eat();
console.log('***********ts中的类和继承 结束************')

/**
 * 接口的作用，在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里的方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要，typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性，函数，可索引和类等
 * 
 */


console.log('******************************************************');
 //属性接口
function printLabel(labelInfo:{label:string}):void{//对传入参数进行约束
  console.log(labelInfo.label);
}
let labelInfo={
  label:'heha'
}
printLabel(labelInfo);

//接口，行为和动作的规范，对批量方法进行约束
interface FullName{
  firtName:string;
  secondName:string;
}

function printName(name:FullName){
  // 必须传入对象，firstName secondName
  console.log(name.firtName+'---'+name.secondName);

}
// printName({firtName:'张',secondName:'三',age:20});//报错 多定义一个age参数，可以把对象写在外部
let obj={
  firtName:'张',
  secondName:'三',
  age:20
}
printName(obj);//不报错；

// 可选属性接口
interface Params1{
  firstName:string;
  secondName?:string;//接口的可选属性
}
function getName(name:Params1){
  console.log(name);
}
getName({
  // secondName:'secondName',
  firstName:'firtName'
})

// 例子 jquery
/**
 * $.ajax({
 *  type:"GET",
 *  url:"test.json",
 *  data:{username:$("#username").val(),content:$("#content").val()},
 *  dataType:"json"
 * })
 */
interface Config{
  type:string;
  url:string;
  data?:string;
  dataType:string;
}
function ajax(config:Config){
  let xhr=new XMLHttpRequest();
  xhr.open(config.type,config.url,true);
  xhr.send(config.data);
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
      console.log('chenggong')
      if(config.dataType=='json'){
        console.log(JSON.parse(xhr.responseText));
      }else{
        console.log(xhr.responseText)
      }
    }
  }
}
ajax({
  type:'GET',
  url:'http://a.itying.com/api/productlist',
  dataType:'json',
  data:'name=张三'
})

// 函数类型接口：对方法传入的参数 以及返回值进行约束
//加密的函数类型接口
interface encrypt{
  (key:string,value:string):string
}
let md5:encrypt=function(key:string,value:string):string{
  // 模拟操作 md5算法
  return key+':'+value;
}
console.log(md5('name','zhangsan'));

let sha1:encrypt=function(key:string,value:string):string{
  return key+'-----'+value;//模拟操作 md5算法

}
console.log(sha1('abc','123'));

//可索引接口：数组，对象的约束
var array:number[]=[1232,456];
var array1:Array<string>=['1111','2222'];

//可索引接口，对数组的约束
interface UserArr{
  [index:number]:string;
}

let array2:UserArr=['111','2222'];
console.log(array2[0]);

//可索引接口对对象的约束。
interface UserObj{
  [index:string]:string
}
let obj1:UserObj={name:'张三'}
console.log(obj1.name);

//类类型接口：对类的约束 和 抽象类有点相似
interface Animal3{
  name:string;
  eat(str:string):void;
}
class Dog3 implements Animal3{
  name:string;
  constructor(name:string){
    this.name=name;
  }
  eat(){
    console.log(this.name+'类类型接口');
  }
}
let d3=new Dog3('小黑');
d3.eat();

class Cat2 implements Animal3{
  name:string;
  constructor(name:string){
    this.name=name;
  }
  eat(food:string){
    console.log(this.name+'吃'+food);
  }
}
let c=new Cat2('小花');
c.eat('老鼠');

//接口扩展：接口可以继承接口
interface Animal4{
  eat():void;
}
interface Person2 extends Animal4{
  work():void;
}
class Programmer{
  public name:string;
  constructor(name:string){
    this.name=name;
  }
  coding(code:string){
    console.log(this.name+code);
  }
}
class Web1 extends Programmer implements Person2{
  constructor(name:string){
    // this.name=name;
    super(name);
  }
  eat(){
    console.log(this.name+'接口扩展');
  }
  work(){
    console.log(this.name+'的工作是写代码');
  }
}
let www=new Web1('小李');
www.eat();
www.coding('写ts代码');

//泛型，软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组建不仅能够支持当前的额数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
// 在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户可以以自己的数据类型来使用组件。
//通俗理解，泛型就是解决 类 接口 方法的复用性，以及对不特定数据类型的支持。

//只能返回string类型的数据
function getData1(value:string):string{
  return value;
}

//同时返回string类型和number类型 (代码冗余)
function getData2(value:string):string{
  return value;
}
function getData3(value:string):string{
  return value;
}

//同时返回string类型和number类型 (any放弃了类型检查)
function getData4(value:any):any{
  return 'hahaha'
}
getData4(123);
getData4('string');

//传入什么，返回什么；如：传入number类型必须返回number类型；传入string类型必须返回string类型。
//泛型：可以支持不特定的数据类型 要求：传入的参数和返回的参数一致。

//T(或人员大写字母)表示泛型，具体什么类型是调用这个方法的时候决定的
function getData5<T>(value:T):T{
  return value;
}
getData5<number>(123);
getData5<string>('123');

function getData6<T>(value:T):any{
  return 'value';
}
getData6<number>(123);
getData6<string>('123');

//泛类型:比如有个最小推算法，需要同时支持返回数字和字符串两种类型。通过类的泛型来实现

class MinClass{//只支持数字类型
  public list:number[]=[];
  add(num:number){
    this.list.push(num);
  }
  min(){
    let minNum=this.list[0];
    for(let i=0;i<this.list.length;i++){
      if(minNum>this.list[i]){
        minNum=this.list[i];
      }
    }
    return minNum;
  }
}
let m=new MinClass();
m.add(22);
m.add(13);
m.add(44);
m.add(23);
console.log(m.min());

//类的泛型
class MinClass1<T>{
  public list:T[]=[];
  add(value:T):void{
    this.list.push(value);
  }
  min():T{
    let minNum=this.list[0];
    for(let i=0;i<this.list.length;i++){
      if(minNum>this.list[i]){
        minNum=this.list[i];
      }
    }
    return minNum;
  }
}

let m1=new MinClass1<number>();
m1.add(65);
m1.add(23);
m1.add(65);
m1.add(89);
console.log(m1.min());

let m2=new MinClass1<string>();
m2.add('s');
m2.add('g');
m2.add('ka');
m2.add('e');
console.log(m2.min());

//泛型接口

//普通
interface ConfigFn{
  (value1:string,value2:string):string;
}
let setData:ConfigFn=function(value1:string,value2:string):string{
  return value1+value2;
}
console.log(setData('name','张三'));

//泛型 一种写法
interface ConfigFn1{
  <T>(value:T):T;
}
let setData1:ConfigFn1=function<T>(value:T):T{
  return value;
}
// setData1<string>(123);//报错
console.log(setData1<string>('123'));

//泛型 另一种写法
interface ConfigFn55<T>{
  (value:T):T;
}
function getData55<T>(value:T):T{
  return value;
}
let myGetData:ConfigFn55<string>=getData55;
// myGetData(20);//报错
myGetData('20');
let myGetData1:ConfigFn55<number>=getData55;
// myGetData1('20');//报错
myGetData1(20);
console.log('******************************************************');

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="box">box</div>
</body>
<script src="js/index.js"></script>
<script>
  // es5里面的类
  function Person(){
    this.name='张三';
    this.age=20;
    this.run=function(){ //实例方法，要通过new调用
      console.log(this.name+'在运动');
    }
  }
  // 原型链上面的属性会被多个实例共享，构造函数不会
  Person.prototype.sex='男';
  Person.prototype.work=function(){ //实例方法，要通过new调用
    console.log(this.name+'在工作');
  }
  var p=new Person();
  console.log(p.name);
  p.run();
  p.work();
  //静态方法
  Person.getInfo=function(){
    console.log('我是静态方法');
  }
  // 调用静态方法
  Person.getInfo();

  //es5里面的继承 Web1类 继承Person类 实现方式：对象冒充的组合继承模式
  function Web1(){
    Person.call(this);//对象冒充实现继承；
  }
  var w=new Web1();
  console.log('************对象冒充继承');
  w.run();//对象冒充，可以继承构造函数里面的属性和方法；
  // w.work();//报错 对象冒充没法继承原型链上的属性和方法

  //es5里面的继承 Web2类 继承Person类 实现方式：原型链继承模式
  //既可以继承构造函数里面的属性和方法，也可以继承源性链上的属性和方法
  function Web2(){

  }
  Web2.prototype=new Person(); //原型链实现继承
  var w2=new Web2();
  console.log('**********原型链继承')
  w2.run();
  w2.work();
  console.log('*************原型链继承的问题：')
  function Person2(name,age){
    this.name=name;
    this.age=age;
    this.run=function(){
      console.log(this.name+'在运动');
    }
  }
  Person2.prototype.sex='男';
  Person2.prototype.work=function(){
    console.log(this.name+'在工作');
  }
  var p=new Person2('李四',20);
  p.run();//李四在运动

  function Web3(name,age){

  }
  Web3.prototype=new Person2();
  var w3=new Web3('赵四',20);//实例化子类的时候没法给父类传参
  w3.run();//undefined在运动

  //原型链+构造函数（对象冒充）的组合继承模式
  function Web4(name,age){
    Person2.call(this,name,age);//对象冒充继承 实例化子类可以给父类传参
  }
  Web4.prototype=new Person2();
  var w4=new Web4('王五',60);
  w4.run();
  w4.work();
  //原型链+构造函数（对象冒充）的组合继承模式 另一种方式
  function Web5(name,age){
    Person2.call(this,name,age);//对象冒充继承 实例化子类可以给父类传参
  }
  Web5.prototype=Person2.prototype;
  var w5=new Web5('张六',70);
  w5.run();
  w5.work();
</script>
</html>