ts初级入门系列

tslang

安装

使用方式1

需要node.js环境，npm install -g ts
tsc -v 查看ts的版本；tsc index.ts编译成index.js文件
*自动编译成js

根目录下tsc --init自动tsconfig.json， image.png
如此编译后的ts文件在js文件目录，更多请看tsconfig.json配置详解

使用方式2

npm install -g typescript
npm install -g ts-node
ts-node  demo.ts

数据类型

// ts中的10个数据类型
/*
    布尔（boolean）
    数字
    字符串
    数组
    元组（tuple）
    枚举（enum）
    任意（any）
    null和undefined
    void类型
    never类型

*/
var bool:boolean=true;
console.log(bool)
var nums:number=123;
console.log(nums);
var str:string="我是字符串类型";
console.log(str);
// 数组的两种定义方式
var arr:number[]=[12334,324];
console.log("第一种数组方式：",arr)
var arr1:Array<number>=[123]
console.log("第二种数组方式：",arr1)
//数组中的元组(为数组中得到每一个数，声明类型)
var arr2:[number,string]=[12,"str"];
console.log(arr2);
// 枚举
//数字枚举（有自增，有反向映射）
enum color{red=1,blue=2,success=4,error=3}
console.log(color)
//反向映射如：{1: "red", 2: "blue", 3: "error", 4: "success", red: 1, blue: 2, success: 4, error: 3}

console.log(color.blue)//都没有赋值，访问的是下标，某一个没有赋值，访问的是之前的数+1
//异构枚举
enum Person {
    name = 1,
    love = 'LOVE',
    age = 2,
    hobby = 'HOBBY'
  }
  console.log(Person)
  //字符串枚举 （无反向映射）
  enum Person1 {
    name = 'NAME',
    age = 'AGE',
    love = 'LOVE',
    hobby = 'HOBBY'
  }
  console.log(Person1)
//   任意类型
var renyi:any=[12,"234"];
console.log(renyi)
// never类型  表示从来不能能出现的类型
// var xx:never;
// xx=(()=>{
//  var aa:any= new Error("异常")
// throw aa;
// // throw  aa.name;
// })();
 

函数

// 函数的定义 2种
function run1():number{
  return 213123;
}
console.log(run1())

var run2=function():number{
return 123;
}
console.log(run2())

//函数中的参数问题
// 1、ts中形参的个数必须和实参数量一直，这里出现一个可选参数？
function run3(name:string,age?:number):void{
  if(age){
    console.log(age)
  }else{
    console.log(name)
  }
}
run3("李木子");
 
// 2、默认参数


// 3、剩余参数

// 4、函数的重载
//  两个及两个以上的同名函数，参数个数不同,类型不同，即不同的参数执行不同的方法
 // 上边是声明
function add (arg1: string, arg2?: string): string
function add (arg1: number, arg2: number): number
// 因为我们在下边有具体函数的实现，所以这里并不需要添加 declare 关键字

// 下边是实现
function add (arg1: string | number, arg2?: string | number) {
  // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 arg1 + arg2
  if (typeof arg1 === 'string' && typeof arg2 === 'string') {
    console.log(1)
    return arg1 + arg2
  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
    console.log(2)
    return arg1 + arg2
  }
}
add("1")

es5中的类和继承

//es5中的类额和继承
//原型继承和对象的冒充
//构造函数1
function Persion(name,age){
    this.name=name;
    this.age=age;
    this.runs=function(){
        console.log("es5的构造方法");
    }
}
//原型继承
Persion.prototype.names="原型的names";
Persion.prototype.fnss=function(){
    console.log("原型继承的names方法")
}
// 静态方法
Persion.fns=function(){
    console.log("我是es5中的静态方法")
}
// new Persion().fnss()
// Persion.fns()
//构造函数2
function web(value,index,age){
    this.value=value+1;
    this.index=index+1;
    //对象额冒充继承
    Persion.call(this,name,age);//继承persion 并且可以给构造函数传参，缺点是无法继承父类原型上的方法和静态方法，只能继承构造函数中
}

let w=new web("李四",1,12);
w.runs()
//原型继承可以调用构造函数也可以使用父类的原型但是，不能给父类传参，所以采用组合的方式继承；
web.prototype=Persion.prototype;
let w2=new web("李四",1,12);
 w2.fnss();
 console.log(w2.names);
 //静态方法不能被继承

es6中的类和继承

//  es6中的类和继承

class myclass{
    constructor(name,age){
        this.name=name+1;
        this.age=age;
    }
    //方法
    getInfos(){
        console.log("es6的构造函数方法")
    }
    //静态方法
    static infos(){
        console.log("es6的静态方法")
    }
}
 myclass.prototype.names="es6原型names";
 myclass.prototype.fnes6=function(){
     console.log("es6原型链上的方法")
 }
// 第二个类实现继承
class myclass2 extends myclass{
    constructor(name,age,index){
        super(name,age)/*实例化子类的时候把子类的数据传给父类*/
        // super指向的是当前对象的原型对象 指向父类
        this.index=index;
    }
}
let es6=new myclass2("name",12,"index")
console.log(es6.names)
es6.getInfos()
 console.log(es6.name)

ts中的类和继承

//typescript 类的定义和使用

class TsPersion{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    getnames():string{
         return this.name;
    }
    static sd(){
        console.log("sd")
    }
}
let p1=new TsPersion("李三");
console.log(p1.getnames());
 
// ts类的继承

class persion2 extends TsPersion{
    constructor(name:string){
        super(name);
    }
}
let p2=new persion2("李四");
console.log(p2.name,)

// ts类的修饰符
//  public   不写，默认是public,任意类都可访问
//  private    私有属性，只在当前类可以访问
//  protected   当前 类及其子类可以访问,外部不可访问（包括）

class protectPersion{
   protected  name:string;
    constructor(name:string){
        this.name=name;
    }
    getname(){
        console.log(this.name);
    }
}
 
let protects=new protectPersion("保护的名字");
console.log(protects.name);//报错 ，name只在当前的类里边使用
console.log(protects.getname());//使用当前类的name 属性

//ts 类的静态属性和静态方法、抽象类和多态
class Person{
    static sex="男";
    constructor(sex:string){
        //静态属性
        Person.sex=sex;
    }
    static   fnPerson(){
        //静态方法只能调用静态属性
        console.log(Person.sex);
    }
}
Person.fnPerson();
//