我爱编程

TypeScript

2017-12-06  本文已影响0人  洱月

简介

微软开发
js的超集
遵循ES6语法

优势

1. 支持es6规范
2. 强大的IDE支持

搭建TypeScript环境

* 用在线compiler编译器开发
* 用本地compiler开发
* npm install -g typescript
* tsc -v

#######测试编译
* 新建文件hero.ts
* 命令行进入文件
* tsc hero.ts
* 会生成一个同名js文件

字符串新特性

1. 多行字符串
2. 字符串模板 `hello ${name}`
3. 自动拆分字符串 方法的调用  add`hello ${name}${age()}`

参数的新特性

1. 参数类型: 在参数名称后面用冒号来指定参数的类型
    * string number any boolean void
    1. var myname: string = "张三";
    2. 如果没有指定类型  会默认使用第一次赋值的类型
    3. 如果想同时满足多种基本类型 比如number string 
    4. var aa: any = "张三"; 然后再次赋值aa = 15;的时候就不会报错
    5. function test() :void(){} 表示不能有返回值;如果return 就会报错
    6. function test() :string(){ return "zhang";} 
    7. function test(name:number) :string(){ }参数也可以指定类型
    8. 自定义类型
    9. export class Hero {
          id: number;
          name: string;
        }
        

2. 默认参数:在参数后面用等号来指定参数的默认值
    1. 带默认值的参数应该是最后一个参数 aa(a:string,b:number,c:string = "zhang")
3. 可选参数:在方法的参数后面用问好来表明此参数为可选参数
    1. (a:string,b?:number,c:string = "zhang")

函数的新特性

1.  Rest and Spread 操作符:
    1.  用来声明任意数量方法参数
2. generator函数:
    *function* fn(){
        console.log('start');
        yield;
        console.log('start');
    }
    *   function buyPrice(){
            while(true){
                yield Math.random()*100
            }
    *   }
    *   
    1. 控制函数的执行过程,手工暂停和恢复代码执行
    2. ES6的 yield; 相当于断点,会暂停函数,fn.next()的时候会开始继续流程;
3. destructuring解构赋值
    1. 通过表达式将对象或数组拆解成任意数量的变量

表达式和循环

1. 箭头表达式:Lambda 函数
    用来声明匿名函数,消除传统匿名函数的this指针问题
    1. var sum = (a,b) => {return a+b;}
    2. 
    3. var arr = [1,2,3,4,5]; 
    4. console.log(newArr.filter(value => value%2 == 0))
    5. //输出 [2,4]

面向对象特性

* 类
* 类是TypeScript的核心,使用ts开发时,大部分代码都是写在类里的
* class Person{
    * name;
    * eat(){
        * console.log('ddd')
    * }
* }
* 访问控制符  控制类的属性是否可以在类的外部被访问
* public  默认 公共
* private 私有的  不能再外部访问
* protected 受保护的 在类的内部和子类可以被访问
*  class Person{
     eat(public name:string){
        //public相当于在Person类里面添加了一个name;如果不加public,this.name就会报错
         console.log(this.name)
     }
 }
 var p1=new Person('zhang');
 p1.eat();
*  class Employee extends Person{
    //创建一个新的employee子类继承Person类
 }
 var e1=new Employee('zhang');
 p1.eat();  
*  class Employee extends Person{
    constructor(name:string){
        super(name)//用来调用父类的构造函数
    }
    super.eat()//用来调用父类的方法
 }
 var e1=new Employee('zhang');
 p1.eat();  
上一篇下一篇

猜你喜欢

热点阅读