typesccipt基础知识指南（代码详细注释版）

// 数组申明
var arr1:number[] = [1,2,3]
var arr2:Array<string> = ['hello','world']

// 枚举：通常用来申明一些静态的常量，如一年365天，一星期有7天等
enum Color {Red, Blue, Green};
// 获取下标（默认从0开始，除非本身定义）；下标类型能够枚举类，也能够为number
var x:Color = Color.Green;    // 值为2 
var x1:number = Color.Green;  // 值为2 

// 当本身定义了一个的下标的时候其余两个会顺延到下两位
enum Color1 {Red, Blue = 12, Green };  
var a:string = Color1[0]  // 结果为Red
var a1:string = Color1[13]  // 结果为Green

enum Color2 {Red = 11, Blue = 2, Green = 32};
var b:string = Color2[32]   // Green

// 遇到不知道的数据类型，能够申明为any,能够赋值为任何类型
var is:any = 'asda'
var arr3:any[] = [1,'hello', false]

// void 用于申明函数无返回值
function tell():string {
    return 'aaa'
}
function tell0():void{

}

// 函数申明
function add(a:number, b:number):string{
    return a+b+'aaa'
}

// 可是上面的函数没法了解到参数是什么意义【代码可读性比较差】，使用下面写法能够指定参数的实际意义：即n表示nam，a表示age
var myAdd:(name:string,age:number) => number = function(n:string,a:number):number{
    return a;
}
// 函数的可变参数:即参数个数是不肯定的
function peopleName(firstName:string, ...restOfName:string[]){
    return firstName+""+restOfName.join("-");
}

// console.log(peopleName()) // 此时会报错，由于上面申明最少得有一个参数firstName
console.log(peopleName("hang"))   // hang
console.log(peopleName("iwn","ime","aa","bb"))  // iwnime-aa-bb

// 固然也能够直接不写固定参数，如上面的函数能够写成
function peopleName2(...restOfName:string[]){
    return restOfName.join("-");
}
console.log(peopleName2("x","y"))  // x-y

// lambads和this
var people = {
    name: ["iwn","ime","aa","bb"],
    getName:function(){   // 随机返回一个name
        return () => {    // 此处必须使用箭头函数，不然this指向找不到
            var i = Math.floor(Math.random()*4);
            return {
                n: this.name[i]
            }
        }
    }
}
var xx = people.getName();
console.log(xx().n)

// 函数重载
function attr(name:string):string;
function attr(name:number):number;
function attr(nameor:any):any{
    if(nameor && typeof nameor === "string"){
        console.log(nameor+" is string")
    }else{
        console.log(nameor+" is number")
    }
}
attr("hello")   // hello is string
attr(222)       // 222 is number

// 类
class Person{
    name:string;
    age: number;
    private sex: string;
    constructor(name:string, age:number, sex:string){  // 构造函数，也强制了类新建的时候必须传入参数
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    print(){
        return this.name+":"+this.age+":"+this.sex;
    }
}

var p = new Person("Fane",23,"man")
console.log(p.print())  // Fane:23
// console.warn(p.name,p.sex) // 报错：属性“sex”为私有属性，只能在类“Person”中访问

// 类的继承
class Student extends Person{
    school: string;
    constructor(school:string){
        super("Lilei", 24,"man");     // 调用父类的构造函数
        this.school = school;
    }
    print(){
        return this.name+":"+this.age+":"+this.school
    }
}
var s = new Student("Jialidun School")
console.error(s,s.print())

// 访问修饰符public private【不申明的话默认是public】

// 因为私有属性不能被当前对象外部访问，可是咱们能够封装类的get/set方法来实现
class Hello{
    private _age: number
    tell(){
        return this._age
    }
    get age():number{
        return this._age
    }
    set age(newage: number){  // 此处能够作其余逻辑操做
        if(newage > 200 || newage < 0){
            alert("Error Age")
        }else{
            this._age = newage
        }
    }
}
var h = new Hello();
h.age = 100
// h.age = 211 // 此时会弹出上面的alert内容
console.log(h.age, h.tell())


// static:声明为static的属性是不能够使用this访问的，必须使用类自己访问；下面咱们来对比一下：
// （不是static，实际上是public）
class Person2{
    name:string;
    tell(){  // 构造函数，也强制了类新建的时候必须传入参数
        console.log(this.name)
    }
}
var p2 = new Person2();
p2.name = "zhaoqiang"
p2.tell()  // zhaoqiang
// (static 申明)
class Person3{
    static myname:string;
    tell(){  // 构造函数，也强制了类新建的时候必须传入参数
        console.log(Person3.myname)
    }
}
var p3 = new Person3();
Person3.myname = "zhaoqiang--3"
p3.tell()  // zhaoqiang--3

// 类的引用数据类型，如上面的Person2
var myP2: Person2;  // 此处就是把类做为数据类型来申明
myP2 = new Person2();


// 接口interface:能够定义js的任何类型
// @接口做用：1.规范参数的使用

// (没有接口的时候)
function printLabel(obj:{label:string}){
    console.log(obj.label)
}
var myObj = {label: "Hello!"}
printLabel(myObj)    // Hello
// 使用接口替代上面的方法
interface LabelValue{
    label: string;
    age?: number;   // 接口可选属性
}
function printLabel2(labelObj: LabelValue){
    console.log(labelObj)
}
var myObj2 = {label: "Hello-2!"}
printLabel(myObj2)    // {label: "Hello-2!"}

// 接口定义函数类型
interface SearchFunc{   // 定义一个输入两个string参数，返回boolean的函数接口类型
    (source: string,subString:string): boolean
}

var mySearch:SearchFunc;
mySearch = function(src:string,sub:string){  // ts只对参数作类型检查，不会
    var res = src.search(sub);
    if(res != 1){
        return true;
    }else{
        return false;
    }
}

// 接口定义数组类型
interface StringArray{
    [index:number]:string;
}

// implements 接口实现为类
interface ClockInterface{
    currentTime: Date;
    setTime(d:Date);
}

class Clock implements ClockInterface{
    currentTime: Date;
    setTime(d:Date){
        this.currentTime = d;
    }
    constructor(h:number, m:number){

    }
}

// 接口继承
// 单继承
interface Shape{
    color: string
}
interface Square extends Shape{
    sideLength: number;
}
var ss = <Square>{};
ss.color = "blue";
ss.sideLength = 10;

// 接口多继承
interface Shape{
    color: string
}
interface Stoke{
   width: number; 
}
interface Square extends Shape,Stoke{
    sideLength: number;
}


// 接口的混合类型
interface Counter{
    interval: number;
    reset():void;
    (start:number):string;
}

var c:Counter;
c(10);
c.reset();
复制代码

// 泛型<T>:不肯定参数类型时候，定义泛型【此处不必定必须为T,这只是个习惯】
function THello<T>(arg: T):T{
    return arg;
}
// 在使用的时候再肯定类型
var toutput = THello<string>("Hello world");
console.warn(toutput)

// 泛型应用再举例
function THello1<T>(str: T[]):T[]{
    console.log(str.length)
    return str;
}
var list:Array<string> = THello1<string>(["1","2","3"]);

// 泛型与lambads表达式
// 指定一个泛型函数。其   参数为K类型，返回也为K类型的THello泛型
var myHello:<K>(arg:K) => K = THello;
console.log(myHello("hello!!!"))
// 与上面同样，换种写法
var myHello2:{<T>(arg: T):T} = THello;

// 泛型类
class HelloNumber<T>{
    Ten:T;
    add:(x:T,y:T) =>T;
}
var myHelloNumber = new HelloNumber<number>();
myHelloNumber.Ten = 10;
myHelloNumber.add = function(x,y){
    return x+y;
}
console.log(myHelloNumber.Ten)   // 10
console.log(myHelloNumber.add(10,12))   // 22

复制代码