TypeScript——JavaScript的超集

1.JavaScript的超集

        关于es5,es6,ts的关系
        es5[标准] < es6[标准] < ts[不是标准,社区]
        ts相当于es6+强类型
2.数据类型
        es6是弱类型语言(一个变量的数据类型取决于值，数据类型可以改变)
            let a = 2； a = false      
        ts中添加了强类型的特性(一个变量的数据类型在声明的时候确定，变量的数据类型一旦确定无法修改)
            比如java中int a = 3;
1）基本数据类型

            number
            string
            boolean
            symbol
            null
            undefined
2）引用数据类型
            Object
                通过自定义类来校验对象

let a:Object;
a = 2;
console.log(a);
let b:Object=3;
console.log(b);
export default{}

            Array
                let arr:Array<string>;
                let set:Set<number>;
                let map:Map<string,number>;

let arr:Array<string>;
arr=['a','b','c'];
console.log(arr);

let set:Set<number>;
set = new Set();
set.add(7)
set.add(3)
console.log(set)
let map:Map<string,number>
map = new Map();
map.set('一',1);

let arr1: number[] = [1, 2, 3];
console.log(arr1);

            Function
                函数通常存放在对象中，我们通过接口来约束对象，进而约束函数
                interface Foo{
                    login(username:string,password:string):User;
                }

class User{
    id:number;
    username:string;
    realname:string;
    gender:number;
}
interface Foo{
    login(username:string,password:string):User;
}
let obj:Foo;
obj={
    login(username:string,password:string){
        //登录逻辑
        return new User()

    }
}

            enum枚举类型
                不赋值默认为0，1，2...
                enum Gender{
                    MALE='男',
                    FEMALE='女',
                }

// enum Gender{
//     MALE='男',
//     FEMALE='女'
// }
// console.log(Gender.FEMALE) 可以这样用

enum Gender{
    // MALE,
    MALE=1,//不赋值 默认为0  赋值后为1 第二个就是2
    FEMALE,
}
// console.log(Gender.FEMALE,Gender.MALE)
// console.log(Gender.FEMALE,Gender.MALE)
console.log(Gender[1],Gender.MALE)//1是MALE 也可以这样用

3.ts的编写以及运行

        ts文件不能被nodejs和浏览器所识别，所以要经过编译变成js文件，ts可以设置其编译级别（ES5 OR ES6），相关方法可以自行百度。

使用ts的方法
        1)安装typescript
            $cnpm install -g typescript
        2）编写ts代码
        3) 编译
            $tsc hello.ts
        4)执行
            $tsc hello.ts /  $tsc hello --target es6  ——(es6语法进行编译)
            $node hello.js

4.面向对象
        1)类          

class Animal{
name:string;
age:number;

constructor (name:string,age:number){
this.name=name;
this.age=age;

}
sayName():void{
    console.log('my name is',this.name);
}
sayAge():void{
    console.log('my age is',this.age);
}
}

        2）泛型:
            父类类型的引用指向子类对象，通过父类类型的引用只能访问父类中声明的特性  
            如果子类重写了父类的方法，通过父类类型引用调用该方法，体现子类的特性。

class Dog extends Animal{
    color:string;
constructor(name:string,age:number,color:string){
    super(name,age);
    this.color=color;
}
sayColor(){
    console.log('my color is',this.color);
}
sayName():void{
    console.log('wang wang--',this.name)
}
}
//泛型 
let a:Animal=new Dog('yiname',12,'pu');
a.sayName();//wang wang-- yiname

        3)方法重写，方法覆盖
            子类中提供了一个与父类前名（函数名，参数类型，返回值）完全一致的方法
        4）抽象类
            如果一个类中出现了抽象方法，那么这个类，就是抽象类；抽象类无法实例化
            抽象类是为了让其他子类继承

//抽象类
abstract class Parent{
    abstract study():string;
    eat(){
        console.log('wa zhenxianga~');
    }
    work(){
        console.log('work...');
    }
}
class Child extends Parent{
study():string{
    super.eat()//用在普通函数内，super表示父类的实例
    super.work();
return '好好学习，找到工作'
}
}
let child:Parent = new Child();
child.study();
child.eat();
child.work();

        5)接口
            抽象到极致的抽象类，接口中的方法全部都是抽象方法，这些方法无需再使用abstract修饰
            接口是一种特殊的类，接口不再通过extends，而是通过implements来实现

class User{
    id:number;
    name:string;
    gender:string;
    constructor(id:number,name:string,gender:string){
        this.id=id;
        this.name=name;
        this.gender=gender;
    }
}
interface IBaseService{
    foo():void;
}
interface UserService{
    login(username:string,password:number):User;
    register(user:User):void;
}
//接口要使用implements 实现接口
//抽象类要继承
class UserServiceImpl implements UserService,IBaseService{
    foo():void{

    }
    login(username:string,password:number):User{
        return new User(1,'name','male');
    };
    register(user:User):void{}

}
export default{}

        6) 访问修饰符
            private 当前类能访问
            protected 当前类和子类能访问
            public 所有都能访问

//访问修饰符 用在类中，用来修饰属性或者方法
export default{}
class Animal{
    private id:number;
    private name:string;//只能在当前类访问
constructor(id:number,name:string){
this.id=id;
this.name=name;
}
public getId(){
    return this.id
}
//方法默认就是public
protected sayName(){
    //protected 受保护的 保护给子类的
    console.log(a.name);
}

}
let a = new Animal(1,'terry');
// console.log(a.name);//a.name 是私有属性 只能在Animal中访问
console.log(a)//转换成es5 可以访问；
console.log(a.getId());//如果要访问id 要提供一个公共的访问方法 getId

class Dog extends Animal{
    constructor(id:number,name:string){
        super(id,name);
    }
    foo(){
super.sayName()
    }
}
let dog:Dog=new Dog(1,'lor');
dog.foo();