诱人的TypeScript

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<number> = [10,20,30];
 * 
 *  一组数据
 *  一组相同类型的数据
 * 
 */

let names:string[] = ["iwen","ime"];
let list:Array<number> = [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/class
class 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 = (<string>x).substring(0,2);


function getLength(something:string|number):number{
    if((<string>something).length){
        return (<string>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 = <Person> {
    name:"iwen",
    age:20
}

// 声明person2 是Person的类型
let person2:Person ={
    name:"heloo",
    age:20
}