ts基础(1)

// let num:number = 12;
// let boo:boolean = true;
// let str:string = "adfd";
// str = 'asdf';
// str = `
//     <h1>${num*3+3}</h1>
// `;
// alert(str);

// console.info(str.indexOf("h"));
// console.info(parseFloat("123.4343abc"))
// let num2 = 20;
// console.info(num2);
let arr:(number|string)[] = [1,2,3,"dfsdf"];
arr.push(2);

let arr2 :Array<number> = [1,2,4];
arr2.push(222);
console.log(arr2);


enum  StudentType{
    班长=101,学委=201,组长,学员
}

let stuType:StudentType = 201;

if(stuType == StudentType.班长){
    console.info("班长来了")
}else if(stuType == StudentType.学委){
    console.info("学委来了")
}

let fun:Function =  ()=>{

}
let obj:Date = new Date();

class Student {
    public id:number;
    public name:string;
    /**
     * 初始化学生对象
     * @param id 学生编号
     * @param name 学生名称
     */
    constructor(id:number,name:string){
        this.id = id;
        this.name = name;
    }

    public show(otherName:string):void{
        console.info(`你好${otherName}，我叫${this.name}`);
    }
}
let stu:Student = new Student(1,"王五");
 
stu.show("李四")

class Teacher {
    constructor(protected id:number,protected name:string) { 
    }
    public show(otherName: string): void {
        console.info(`你好${otherName}，我叫${this.name}`);
    }
}

let teacher:Teacher = new Teacher(12,"hehe");
teacher.show("bb");

class ManTeacher extends Teacher{
    constructor(){
        super(12,"ddsds");
        console.info(123);
        this.id=12;
    }
}
let man:ManTeacher = new ManTeacher();

interface IBoy{
    play():void;
    eat():void;
    sayHi(otherName:string):string;
}


class GoodBoy extends ManTeacher implements IBoy  {
    play(): void {
         console.info("玩游戏")
    }
    eat(): void {
        console.log("吃饭")
    }
    sayHi(otherName: string): string {
        return `你好${otherName} 我叫${this.name}`
    }
}

try { 
    new GoodBoy().play();
} catch (error) {
    console.info(error);
}


//接口的第二种写法  dataInterface
interface IGoods{
    id:number;
    name:string;
    price:number;
}

let goods1:IGoods = {id:1, name:"aaa",price:433 };

class Goods   {
    id: number;
    name: string;
    price: number;
    hello:number;
    constructor( ) {
        this.id = 1;
        this.name="wangwu";
        this.price=222;
        this.hello=333;
    }
}
let g2:IGoods = new Goods();

　　ToDolist示例

//let template:string=``;

class ListItem{
    constructor(public title:string,private state:boolean=false){
        this.rander();
    } 
    public domHtml:JQuery=$();
    public rander(){ 
        let dom = $(`<li><span >${this.title}</span><span class="btnDone">完成</span></li>`);
        dom.find(".btnDone").click(()=>{ 
            this.state = true;
            this.domHtml.find("span:first").addClass("deleteLine");
        }); 
        this.domHtml = dom;
    } 
}

class ItemManager{
    private static list: ListItem[] = []; 
    constructor(){ 
    }
    public add(){
        var stu = new ListItem($("#txt1").val() as string); 
        ItemManager.list.push(stu)  
        $("#todoList").append(stu.domHtml); 
    }
}

let manager:ItemManager = new ItemManager();
$(function(){ 
    $("button").click(manager.add);
})

　　安装typescript　　cnpm  install  -g typescript  --save

　　安装jQuery　　cnpm   install  jquery  --save

　　监视文件　　tsc -w  文件名