typescript学习笔记

特点：微软开发  JavaScript的超集  遵循es6

typescript的优势：

1、支持es6规范；

2、强大的IDE支持（类型检查：typescript里允许为变量指定类型；语法提示；重构，方便的修改变量、方法、文件的名字。）

3、angular2框架的开发语言。

安装typescript环境

compiler就是编译器，把typescript代码转换成JavaScript代码

使用在线compiler开发：官网中有->playground

使用本地compiler开发：npm  install -g typescript    查询版本：tsc --version   运行：tsc hello.ts  会编译生成hello.ts

typescript概念、语法和特性介绍

字符串新特性

多行字符串：

var content ="a"+
             "bbb"+
             "cccc";
新typescript：
            
var content =`a
             "bbb
             "cccc`;

字符串模板：

var name="mengxiaojia"
var getName=function(){
      return "mengxiaojia"
}
 console.log(`hell ${name}`);
 console;log(`hell ${getName()}`);
 console;log(`<div>
              <span>${myname}</span>
              <span>${getname}</span>
             </div>`);
对比
var name="mengxiaojia"
var getName=function(){
      return "mengxiaojia"
}
 console.log("hell"+myname);
 console;log("hell" + getName;
 console;log("<div><span>"+myname+"</span>\n<span>"+getname+"</span></div>");

自动拆分字符串

字符串模板调用方法时，字符串模板中表达式的值自动赋给所调用方法中的参数。

function test(template, name, age){
    console.log(template);
    console.log(name);
    console.log(age);
}
 var myname="mengxiaojia";

 var getAge = function(){
     return 18;
 }
 test`hello my name is ${myname},i am ${getAge()}`

运行输出结果为 :

template->arry数组['hello my name is ','i am',' '(第二个表达式之后的字符串)]

name->mengxiaojia

age->18

参数新特性

参数的类型：参数名称后面使用冒号来指定参数的类型

var myname:string ="zhai liang";

var alias:any="xixi";

var age:number=13;

var man:boolean=true;
// 方法声明类型，方法的参数声明类型
function test(name:string)：string {
}
test(13) // 拿数字调会报错

class Person{
    name:string;
    age:number;
}
var zhangsan:Person = new Person();
zhangsan.name="zhailiang"
zhangsan.age=18;

默认参数：在参数声明后面用等号来指定参数的默认值

var myname:string="zhangliang";
// 注意吧默认值的参数定义到后面
function test(a:string,b:string,c:string="jojo"){
    console.log(a);
    console.log(b);
    console.log(c);
}
test("xxx","yyy","zzz"); // 如果没有默认参数，必须传三个参数
test("xxx","yyy")  // 如果有了默认参数，就可以直接不传入参数

可选参数：在方法的参数声明后面用问号来标明，此参数为可选参数。

// 注意需要处理可选参数没传时候的情况
// 可选参数不能声明在必选参数的后面
function test(a:string,b?:string,c:string="jojo"){
    console.log(a);
    console.log(b.length);  //如果不传的话会报错
    console.log(c);
}
test("xxx")   // 打印出结果：b:undefined

Typescript-Rest and Spread 操作符

声明任意数量的方法参数