HelloTypeScript

TypeScript:
    微软推出,JavaScript超集

TypeScript：
    Vue  React  NG

Type：类型
    function add(a:number,b:number){
        return a+b;
    }

    add(10,20);
    add(10,"20"); // 报错
面向对象
    class interface extends
    ES5 -> prototype function object
规避一些bug问题
    类型错误：
        js：执行的时候发生错误
        ts：编译的时候就已经发生了错误

打开控制台，输入

npm install -g typescript

再输入tsc发现不报错，表示安装成功

如何避免这样的重复输入？  只需在命令行输入tsc -w hello.ts

 比如在hello.ts 里把30 改成300，hello.js中相应的部分也会动态的跟着改变

这样就可以实时监听到所有代码的修改

或者通过命令行输入cnpm install -g ts-node

此时通过ts-node ts文件名  就可以运行程序不需要.js文件了

或者若不想重复通过ts-node ts文件名来运行  想让 修改之后自动编译 则通过 

安装 cnpm install -g nodemon

然后程序控制台输入  nodemon --exec ts-node ts文件名 此时只要保存就会编译

/ *  * var   * let *     1.作用域变化  var作用域是函数级别  let作用域是花括号 *     2.let不允许重复定义 * const *     1.constant:常量，定义之后不允许修改的值      *  */var num:number = 10;let age:number = 30;// if(true){//     let demo:string = 'demo'//     console.log(demo);// } // for(let i = 0;i<5;i++){//     setTimeout(function(){//  console.log(i);//     })// }var num:number = 40;const url:string = "http://iwenwiki.com";// url = "http://iwens.org";console.log(url);

/ * 数组： *  数组的声明两种方式 *      let names:string[] = ["iwen","ime"]; *      let list:Array = [10,20,30]; *  *  一组数据 *  一组相同类型的数据 *  */let names:string[] = ["iwen","ime"];let list:Array = [10,20,30];// console.log(names[0]);// console.log(list[2]);names.push("frank");// names.push(100);console.log(names);names.map(function(ele,index){    console.log(ele);})

/ * 元组 *  元组类型允许表示一个已知元素数量和类型的数组 */let info:[string,number,boolean] = ['iwen',20,true];console.log(info[1]);info.filter(function(ele){    console.log(ele);})

/ * 函数 *  1.函数的声明，函数中的参数类型限定 *  2.箭头函数 () => {} 箭头函数解决this问题 *  3.函数的返回值问题:void *  4.可选参数和Rest Parameters */// function add(a:number,b:number = 10){//     return a+b// }// const add = (a:number,b:number) => {//     return a+b// }// console.log(add(10,20));// setTimeout(() => {//     console.log(100);// },3000)// let obj = {//     username:"iwen",//     getName:function(){//  setTimeout(() => {//      console.log(this.username);//  })//     }// }// obj.getName()// function add(a:number,b:number):string{//     return a.toString()+b.toString();// }// var sum = add(10,20);// // console.log(sum.toFixed(2));// console.log(sum.substr(0,3));// function add(a:number,b:number):void{//     console.log(a+b);// }// add(10,20);// function add(a:number,...num:number[]):number{//     return num.reduce(function(sum,n){//  return sum + n;//     },a)// }// console.log(add(10,20,30,40,50));function add(a:number,b?:number):number{    if(b){ return a+b    }else{ return a;    }}console.log(add(10));

let a: any;a = 10;a = "Hello iwen";a = [10,20];console.log(a);// 我们的使用Any类型的时候一定要注意，需要自己去处理类型判断的问题const log  = (value : any) => {    console.log(typeof value);    if(typeof value === 'number'){ return `数字类型：${value}`    }      if(typeof value === "string"){ return  `字符串类型:${ value }`    }    throw new Error("类型错误");}let b:any[];b  = [10,'123',true];console.log(b);

function isNumber(value:any):value is number{    return typeof value === "number";}function isString (value:any):value is string{    return typeof value === 'string';}// 数字   字符串const log  = (value : string | number ) => {    console.log(typeof value);    if(isNumber(value)){ return `数字类型：${value}`    }      if(isString(value)){ return  `字符串类型:${ value }`    }    // throw new Error("类型错误");}console.log(log(undefined));

// es6 http://es6.ruanyifeng.com/#docs/classclass Person{    age:number;    name:string;}// 类的概念：let p = new Person();p.name = 'iwen';p.age = 30;console.log(p.name,p.age);

/ * 玩游戏的时间管理 *   */class Game{    name:string;    play_time:number;    /     * 构造函数：     *   随着类的实例化而自动执行的函数     */    constructor(name,play_time){ // this 指向生成的Object本身 this.name = name; this.play_time = play_time;    }    getPlayTime(){ return `时间：${this.play_time}分钟`;    }    // 额外申请游戏时间    incremntPlayTime(){ this.play_time += 10;    }}let xiaoming = new Game("小明",20);console.log(`姓名：${xiaoming.name}`);xiaoming.incremntPlayTime(); // 增加10分钟console.log(xiaoming.getPlayTime());let xiaohua = new Game("小花",60);console.log(`姓名：${xiaohua.name}`);xiaohua.incremntPlayTime();xiaohua.incremntPlayTime();xiaohua.incremntPlayTime();console.log(xiaohua.getPlayTime());

/ * 把类看成一个模板 *     worker *     student */class Person{    name:string;    age:number;    say(){ console.log("我是说话");    }    hello(){ console.log("hello World");    }}class Student extends Person{    // 就近原则    say(){ console.log("我是student的say方法");    }    hello(){ console.log("student Hello");    }    studentHello(){ super.hello(); // 强行调用父类的方法    }}// 多态let s:Person = new Student();s.say();//我是student的say方法

/ * Public: *     在任意地方都可以访问 * private: *     只能在类的内部读取，不可以在外部读取，如果想读取，就在类的内部提供public的函数进行访问 * protected: *     可以在类的内部访问，也可以在子类中进行访问 *  *  * 三者关系：Public > protected > private *  */class Person{    protected name:string;    protected age:number;    // set和get方法    protected setName(name){ this.name = name;    }    protected getName():string{ return this.name;    }    protected say(){ console.log(`hello:${this.getName()}`);    }}class Student extends Person{    setStudentName(name){ this.name = name;    }    getStudentName(){ console.log(this.name);    }}let s = new Student();s.setStudentName("iwen");s.getStudentName();

/ * static *  脱离了类的实例化而被调用的 *      类名.属性或者方法名 */class Person{    name:string;    age:number;    private static all:string = "这是一个全新的属性";    public static say(){ console.log(Person.all);    } constructor(name,age){ this.name = name; this.age = age;    }    getName():string{ return this.name;    }}class Student extends Person{    constructor(name,age){ super(name,age)    }}// console.log(Person.all);Person.say();

class Person{    name:string;    age:number;    // 不可以被修改的    readonly hello:string = 'Hello ReadOnly';}let p = new Person();// p.hello = 'hello';p.name = 'iwen';console.log(p.hello);console.log(p.name);

/ * 一周7天 * 使用：三种状态 */enum DaysOfTheWeek{    SUM,MON,TUE,WED,THU,FRI,SAT}/ *  * { *  0:SUM, *  1:MON, *  ... * } */console.log(DaysOfTheWeek.MON);let day:DaysOfTheWeek;day = DaysOfTheWeek.SAT// 可读性if(day === DaysOfTheWeek.SAT){    // todo}

class Hello{    name:string;    constructor(name:string){ this.name = name;    }    say(){ console.log(this.name);    }}let h = new Hello("iwen");h.say();/ * ts-node:ts-node filename.ts * nodemon:nodemon --exec ts-node filename.ts *  增加nodemon的配置文件：配置快捷执行方案：npm run dev */

/ * 鸭子类型： * 接口：通过的规范 *      USB接口：U盘  打印机 ... *  * ts:编译时候直接报错，而非在运行过程中因为某些不确定的因素而报错 */interface Named{    // 属性    name:string;}const sayName = (obj:Named) => {    console.log(obj.name);}const Person = {    name:'iwen',    age:20}const student = {    learn:"web",    name:"张三"}const demo = {    name:"hello"}class Teacher{    name:string;    age:number;}let t = new Teacher();t.name = '张老师';sayName(Person);sayName(student);sayName(t);sayName(demo); // undefined

interface INamed{    // 属性    name:string;    // 方法 在接口中，定义方法是没有方法体的  但是返回值和类型一定要添加    print(name:string):void;}const sayName = (obj:INamed) => {    obj.print(obj.name);}const person = {    name:"iwen",    age:20,    print(name){ console.log(name);    }}class Student{    name:string;    age:20;    print(name){ console.log(name);    }}let s = new Student();s.name = 'iwen';sayName(person);sayName(s);

// type Name = string;// let myName:Name = 100;// console.log(myName);type User = {    name:string;    age:number}// type User = {//     emial:string;// }const adminUser:User = {    name:'iwen',    age:20}interface IUser {    name:string;    age:number}interface IUser{    email:string;}const interUser:IUser = {    name:"iwen",    age:20,    email:"iwen@iwenwiki.com"}console.log(interUser);

interface IPerson{    name:string;    say():void;}const sayWath = (content:IPerson) => {    content.say();}class Student implements IPerson{    name:string;    say(){ console.log("我要讨论学习");    }}class Tearch implements IPerson{    name:string;    say(){ console.log("如何教好学生");    }}let s = new Student();s.say();sayWath(s);let t = new Tearch();t.say();sayWath(t);

/ * 支付 *  微信 *  支付宝 *  银行卡 */interface IPay{    post():void;}// 操作方案：http请求 额外的业务操作const do_Pay = (pay:IPay) => {    pay.post();}// 微信支付class WeChatPay implements IPay{    post(){ console.log("微信支付");    }}// 支付宝支付class AliPay implements IPay{    post(){ console.log("支付宝支付");    }}// 银行卡支付...let wechat_pay:IPay = new WeChatPay();do_Pay(wechat_pay);let ali_pay:IPay = new AliPay();do_Pay(ali_pay);

interface Person{    // 只读属性    readonly learn:string;    name:string;    // 可选属性    age?:number;    say():void;    hello?():string;}class Student implements Person{    name:string;    learn:string;    say(){ console.log("say");    }}let s:Person = new Student();s.name = "iwen";// s.learn = "web";console.log(s.name);s.say();

/ * 断言和类型转换有点相似，但是并非真正的类型转换 *  */let x:any = "hi iwen"; // 编译的时候，是不知道什么类型的！！！let s = (x).substring(0,2);function getLength(something:string|number):number{    if((something).length){ return (something).length;    }else{ return something.toString().length;    }    }// console.log(getLength(200));// 接口interface Person{    name:string;    age:number;}let person = {} as Person;person.name = "iwen";person.age = 20;// 第二种写法let person1 =  {    name:"iwen",    age:20}// 声明person2 是Person的类型let person2:Person ={    name:"heloo",    age:20}

闲鱼礼物网