typescript学习之基础知识篇

1.用ts的好处:编写阶段就可以报出一些低级错误
2.变量声明:

// var 不建议使用,因为变量提升   let变量   const常量
let fo:string = 'bar';
fo = 'ba';
const count=0;
// count=10;常量不允许重新赋值

3.基本数据类型:

//布尔值
let isDone:boolean=true;

//数字
let num:number=10;

//字符串 也支持模板字符串 支持换行  支持内嵌表达式
let fu:string='jack';
let users:{
    name:string,
    age:number
 }={
    name:"jack",
    age:12
}
let a:string=`大家好,我叫:$(users.name),我今年$(users.age)岁了`

//数组有两种书写方式:
// 第一种:Array<类型名>
let arr:Array<number>=[1,2,3];
arr.push(4);
console.log(arr);
// 第二种:类型名[]
let arr1:number[]=[1,2,3];
let arr2:string[]=['a','b'];

// 元组允许表示一个已知元素数量和类型的数组,各元素的类型不必相同,可认为混合;左边写了什么样右边要严格一致,(顺序+数量)
let arr3:[string,number]=["hello",1]

// object 允许赋任意值,但是不能调用任意方法,即使她真的有.少用,没有提示
let b:object={
    name:"rose",
    age:12
}
// 写对象的时候可以这样写
// 使用一次对象这样写
let c:{
    name:string,
    age:number
}={
    name:"ja",
    age:34
}
// 多次使用就可以这样
interface Person{
    name:string,
    age:number,
    // fs:string[]使用的时候:顺序可以不同,但是里面的属性必须严格一致(不能多不能少)
}
let zys:Person={
   
    age:45,
    name:'le'

}

// any 任何类型 用在改类型的情况 不确定的情况下可以是使用,尽量少用
let num1:any=10;
num1="jd";
// let re :string=(num1 as string).+字符串的方法,只写等号右边的是得不到你想要的字符串方法的
let re :string=(num1 as string).substr(1);

// 类型除了可以用于变量声明后,还可以用在函数的形参 花括号前的number是返回值的类型
function add(x:number,y:number):number{
    return x+y;
}
var ret:number=add(10,20);
//Void 表示没有任何类型。通常用在没有返回值的函数中,也没啥用,因为你只能给它赋值为undefined null
function fn():void{
    console.log("111")
}

//null undefined 和void相似,用处不大;默认他们是所有类型的子类型,也就是说可以把null undefined赋值给number类型的变量
let u:undefined=undefined;
let n:null=null;

4.解构赋值:

//数组解构 按照顺序解构
let  arr4:number[]=[0,1]
let [num0,num2]=arr4;

//对象解构 按照属性名解构
let us={
    name:"jack",
    age:45
}
//在浏览器环境中,window对象本身就有一个成员name
// let {name,age}=us


//属性解构赋值
let {name:nickname,age}=us;
//参数的解构赋值
function add1([x,y]){
    return x+y
}
add1([10,2])

5.剩余参数:

// 剩余参数  args随意起名字  剩余参数解构到args数组中,
function sub(...args:number[]):number{
  let res=0;
  args.forEach(function(item){
      res+=item
  })
  return res;
}
sub(1,2,3)

// 数组展开操作符
let arr01=[1,2,3]
let arr02=[4,5,6,...arr01]// 等同于[4,5,6].concat(arr01)
let arr03=[...arr01,...arr02]
// 对象展开操作符
let obj01={
    fos:'bf'
}
let obj02={
    ...obj01,//一般用于对象拷贝,混入
    name:"ff"
}

6.类:

// 类就是构造函数的另一种书写方式

function Person(name:string,age:number){
    this.name=name;
    this.age=age 
}
Person.prototype.sayHello=function():void{
    console.log(this.name,this.age)
}
let p1=new Person('jack',12)
p1.sayHello()


class Person1{
    //定义且确定类型
    name:string;
    age:number;
    constructor(name:string,age:number){
        //constructor就是类的构造函数,当你new Person的时候,就会自动调用constructor
        // 我们这里实际上是在动态的为实例添加成员,ts要求类的成员应该先定义且确定类型
        this.name=name;
        this.age=age 
    }
    //实例方法
    sayHello():void{
console.log(this.age,this.name)
    }
}
let p2=new Person1('jack',12)
p2.sayHello()


// 类的继承
class Person2{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name=name;
        this.age=age 
    }
    eat(){
        console.log('eat')
    }
    
}
class Student extends Person2{
    constructor(name:string,age:number){
        super(name,age);//父类的
   }
}
new Student('rose',34).eat()



// 实例成员访问修饰符 public  private protected
// 类成员默认对外是公开的public
// Private 用来声明私有成员  私有成员无法被继承   我们可以把不希望被外部修改的成员定义为私有的
// readonly只读的,作用和const定义的常量类似 写在其他修饰符后面
class Person3{
    name:string;
    age:number;
    private readonly type:string='人类';//声明类成员的同时为其赋值   私有
    protected fot:string='ddd';//和private类似,但是可以被继承,只能在子类内部被访问
    changeType(){
    // this.type='hh'
    }
getType(){
    // 在类的内部访问私有成员 但是在外部无法直接访问,可以通过访问函数的形式来访问私有成员
    return this.type;
}

}
new Person3().getType()
class Student3 extends Person3{
   getFot(){
       console.log(this.fot)
   }
}
//类的私有成员无法被继承
new Student3().getFot()

// 简写
class Person4{
    // public age:number;
    // public name:string;
    // constructor(name:string,age:number){
    //     this.name=name;
    //     this.age=age;
    // }

    constructor(public age:number,public name:string){

    }
}
new Person4(23,'jack')

7.属性存取器:

//属性的存(get)取(set)器:对属性做校验
class Person5{
 private _age:number;
   get age(){
       return this._age
   }
   set age(val){
       if(val<10){
           throw new Error('xxx')
       }
       this._age=val;
   }
   constructor(){

   }
}
//  new Person5().age=-10;
let p0=new Person5();
p0.age=-10;//编写期间不会报错,但是运行的时候会

8.静态成员:

//静态成员(另一种叫实例成员,只能通过new出来的实例访问)
// 1. 不需要实例化访问的成员就是静态成员,就是只能被类访问的成员
// 2. static 关键字
class Person6{
  static type:string='人类';
   name:string='jack';
   age:number=12;
//默认是实例成员,加上static就是静态成员
   static say(){
       console.log('ddd')
   }
}
// Person6.age
// 类就是构造函数,构造函数本身就有一个name属性,所以可以点出Name
// Person6.name;
 new Person6().name
Person6.say()

9.函数:

//函数参数
// 参数可以指定类型,可选参数就是在在参数后加?
function ass(x:number,y?:number):number{
    return x+10
}
// 默认参数,如果你不传y,他就是10,如果你传了就是传的数
function as(x:number,y:number=10):number{
    return x+y
}
// 剩余参数
function sub(...arg:number[]):number{
    let re:number=0;
    arg.forEach((item:number):void=>{
        re+=item
    })
    return re;
}
sub(1,2,3)

// 箭头函数
let ad=(x:number,y:number):number=>x+y

// for-of循环
// for in   会把数组当作对象来遍历
// for  of 支持break  类似于for in遍历对象的形式
let arr0:number[]=[1,2,3]
for(let val of arr0){
    if(val==2){
        break;
    }
    console.log(val)
}