typescript学习笔记

因angluar学习需要，今天学习了Typescript

类型

string number boolean

let foo : string = "hello";
console.log(foo)

let num : number = 123456;
console.log(num)

let bool : boolean = true;
console.log(bool)

let foo1 :any =12456;

console.log(foo1="string")

let foo2 :void =null;
console.log(foo2==undefined)

数组

let arr :(number|string)[] =[123,"hello"];
console.log(arr)

let arr1 : (any)[] =[12456,"hello",true];
console.log(arr1)

//数组的泛型写法
let arr2 : Array<number> =[123456,545];
console.log(arr2)

//元组：将数组的每一项给定值和类型
let arr3 : [number,string]=[123,"你好"];
console.log(arr3)

函数

//实参与形参相对应，不能多也不能少
function foo3(n1:number,n2:string){
    console.log(n1,n2)
}
foo3(13,"nihao");

//函数形参后面写问号，表示参数是可选的

function foo4(n1:number,n2?:string) {
    console.log(n1)
}
foo4(2);

//给return 设置类型

function foo5(n1:number) :string{
    if(n1==2) {
        return "ok";
    }
}
console.log(foo5(2));

面向对象

class Foo{
    x;
    y;
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    sum(){
        return this.x+this.y;
    }
}

var foo6=new Foo(4,6);
console.log(foo6.sum());

//静态属性
class Foo1{
    x;
    y;
    static z="uoi";
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    sum(){
        return this.x+this.y;
    }
}

var foo7=new Foo1(4,6);
console.log(Foo1.z)

//静态方法
class Foo2{
    x;
    y;
    static show(x){
        console.log(x)
    }
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    sum(){
        return this.x+this.y;
    }
}
Foo2.show("en");

// 继承

    //父类

        class Father{
            x;
            y;
            constructor(x,y){
                this.x=x;
                this.y=y;
            }
            sum(num:string){
                return this.x+this.y;
            }
        }

    //子类

        class Son extends Father{
            constructor(x,y) {
                super(x, y);
            }
            sum(num){
                console.log(this.x+this.y+num);
            }
        }
       let s= new Son(1,2);
       console.log(s)
        s.sum(8);

//抽象类:只能够被继承，不能够被使用
    //父类
        abstract class Foo5{
            x;
            y;
            constructor(x,y){
                this.x=x;
                this.y=y;
            }
            sum(){
                return this.x+this.y;
            }
        }
        class Bar extends  Foo5{
            z;
            constructor(x,y,z){
                super(x,y);
                console.log(z)
            }
        }
        var b=new Bar(1,8,3);
        console.log(b.sum())
        // var f5=new Foo5(1,2);

//修饰符
    //public 公共成员   默认都是
    //private 私有成员  内部可以使用，继承不可以，外部不可以
    //protected 受保护成员   内部可以使用，继承可以，外部不可以
    //readonly 只读成员 只能读取，不能修改
    //父类

        class Father2{
            public x;
            private y;
            protected z;
            readonly h;
            constructor(x,y,z,h){
                this.x=x;
                this.y=y;
                this.z=z;
                this.h=h;

            }
            sum(num:string){
                return this.x+this.y;
            }
        }

    //子类

        class Son2 extends Father2{
            constructor(x,y,z,h) {
                super(x, y,z,h);
            }
            sum(num){
                console.log(this.z);
            }
        }
    // var p=new Father2(1,2); //public
    // console.log(p.x)
    // var p=new Father2(1,2); //private
    // console.log(p.y) ×
    // var p=new Son2(1,2,5); //protected
    // p.sum(0)
    var p=new Son2(1,2,5,6); //readonly
    console.log(p.h)

接口

//提供接口，接口名大写
//？：指示当前项可选
interface Iperson{
        username:string,
        age?:number
}

// 创建方法，使用接口
function foo9(Iperson) {
    console.log(Iperson)
}

//内容要与接口相对应
foo9({username:"xiaohua",age:1977})
foo9({username:"44"})


//创建接口

interface Icon{
        x,
        y,
        sum()
}

//创建类，并添加接口
class IconC implements Icon{
        x;
        y;
        z;
        constructor(){};
        sum(){}
}
//注，在类中可以写多个接口和方法，但是不能比接口少。

泛型

给一个变量通过函数方式指定类型

function foo10<T>(num:T) :T{
        return num;
}
console.log(foo10<string>("fssdf"));

命名空间

就是给变量或方法限制在一个作用域之中,需要导出来

namespace QF{
   export  var left="nihao";
   export  function foo() {
        console.log(111)
    }
}

console.log(QF.left);
QF.foo();

装饰器

//创建一个装饰器
function toUnit( target ){
    console.log( target );
}

@toUnit
class Ao {
    x;
    y;
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    sum(){
        return this.x + this.y;
    }
}