typescript入门

解决问题

• 百度or谷歌
• github看issue
• 去提问（国内：segmentFault,国外stackOverflow）

---

字符串新特性

• 多行字符串
• 字符串模板
• 自动拆分字符串

一，TypeScript多行字符串

传统JavaScript字符串换行需要+进行拼接，而TypeScript不需要+拼接。看下面实例：

　javaScript：

　　var content = "aaa"+

　　　　　　　　"bbbb";

　　TypeScript：

　　var content = `aaa

　　　　　　　　bbb`;

（注意这里的``不是单引号，是双撇号，键盘左上角的那个按键）；

二，TypeScript字符串模板

字符串模板就是在多行字符串里用一个表达式插入变量，标签，方法；

　　var myName = "zhang san"；

　　var getName = function () {

　　　　return "zhang san"；

　　}

　　//调用变量

　　console.log(`hello ${myName}`);

　　//插入标签(这样看起来比JavaScript好多了)

　　console.log(

　　　　`<div>
　　　　　　<span>${myName}</span>
　　　　　　<span>${getName}</span>
　　　　</div>`

　　)

　　//调用方法

　　console.log(`hello ${getName}`);

三，TypeScript自动拆分字符串

　function test (template,name,age) {

　　　　console.log(template);

　　　　console.log(name);

　　　　console.log(age);

　　}

　　var myName = "zhang san";

　　var getAge = function () {

　　　　return 18;

　　}

　　test `hello my name is ${myName},i 'm ${getAge()}`;

　　(这里name 就是 ${myName}, age 就是${getAge()})

参数新特性

参数类型

var name:<type>

参数默认值

可选参数

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

可选参数必须放到必选参数后面，当声明可选参数时，要在函数中处理当没有此参数传入的情况

　function test (name: string, age?: number, sex: string = “男”){
　　}
　　test("zhang san");

函数新特性

Rest and Spread操作符

用来声明任意数量的方法参数也就是“…”操作符

function fun(...args){
args.foreach(arg){
console.log(arg);
    }
}

es6支持反向传参，ts不支持
反向：

function test (a, b, c) {
　　　　console.log(a);
　　　　console.log(b);
　　　　console.log(c);
　　}
　　var agrs = [1, 2];
　　test(...agrs);

generator函数（es6语法）

控制函数的执行过程，手工暂停和恢复代码执行
　　　在TypeScript的编辑器中不支持这个语法，需要在babeljs的编辑器中联系（http://babeljs.cn）

• yeild:暂停点，需要函数调用next方法才继续执行，通知 yeild 变量有return 作用。
• 调用generator函数，必须赋值给一个变量
• function* name()(函数格式)

//other
function* doSomething () {
　　　　console.log("start")；
　　　　
　　　　yield;
　　　　console.log("end");
　　}
　　var func1 = doSomething();

##estructuring析构表达式=？数组反向定义
通过表达式将对象或者数组拆解成任意数量的变量。

function getStock() {
　　　　return{
　　　　code: "IBM",
　　　　price:100
　　　　}
　　}
　　var { code, price } = getStock();　//但是变量的命名和字段必须一样

　　var {code: codeX,  price} = getStock;//当你定义的变量与对象的变量不一样时

　　console.log(code);
　　console.log(price);

当对象中的字段是一个对象

　　function getStock() {
　　　　return{
　　　　code: "IBM",
　　　　price:{

　　　　　　　price1: 100,

　　　　　　　price2:  120

　　　　　　}

　　　　}
　　}

　　var { code,price:{price2}} = getStock();

数组用析构表达式

　　var array1 = [1, 2, 3];
　　var [ , num1, num2] = array1;
　　console.log(num1);
　　console.log(num2);

表达式和循环

箭头表达式

用来声明匿名函数，消除传统匿名函数的this指针问题

//单行（匿名表达）
var sum =(arg1,arg2)=>arg1+arg2;    
//多行
var sum=(arg1,arg2)=>{
    return arg1+arg2;
}
//无参数
var sum =()=>
//单参数,参数不需要括号
var sum =arg1=>{
    console.log(arg1);
}

示例

//ts
var myArray =[1,2,3,4,5];
console.log(myArray.filter(value=>value%2==0));
//js
var myArray =[1,2,3,4,5];
console.log(myArray.filter(function (value){return calue%2==0}))

另外

javascript Array filter方法
创建一个新的数组，新数组中的元素时通过检查指定数组中符合条件的所有元素
注意：filter（）不会对空数组进行检测
注意：filter（）不会改变原始数组

箭头表达式能够消除es5 this指针不按照自己预期的想法进行的错误

//js
function getStock(name: string) {

　　　　this.name = name;

　　　　setInterval(function () {

　　　　　　console.log("name is "+this.name);

　　　　},2000);

　　}

　　var stock =new getStock("IBM");
　　//结果 name is
//ts
function getStock(name: string) {

　　　　this.name = name;

　　　　setInterval(()=>{

　　　　　　console.log("name is " +this.name);

　　　　},1000);

　　}

　　var stock =new getStock("IBM");
    //结果name is IBM

另外
setInterval(code,millisec[,“lang”])

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
code是必须的，要执行的代码参数
millisec是必须的，执行代码的循环时间差值参数。

forEach,for in和 for of

——	break	循环内容
forEach	不可	循环值
for in	–	循环键值对
for of	可	循环值

for in 取的是下标（键）把属性也循环出来
for of 可以break，
forEach循环数组元素，把属性忽略，不可打破循环

1.forEach()，只会打印集合中的值，不会打印数组的属性值。不能用break，跳出这个循环。

　　　　var myArray = [1, 2, 3];
　　　　myArray.dsc = "hahahhahha";//TypeScript不支持这种写法
　　　　myArray.forEach(value => console.log(value));

　　　　输出结果：

　　　　1

　　　　2

　　　　3

　　2.for in ,原理是循环键值对。

　　　
　　　
　　　　ar myArray = [1, 2, 3];
　　　　myArray.dsc = "hahahhahha";//TypeScript不支持这种写法
　　　　for (var n in myArray) { 
　　　　　　console.log(n);
　　　　}

　　输出结果：

　　0

　　1

　　2

　　dsc

　　如果你想打印对应的值，可以这样写

　　　　var myArray = [1, 2, 3];
　　　　myArray.dsc = "数组描述";//TypeScript不支持这种写法
　　　　for (var n in myArray) { 
　　　　　　console.log(myArray[n]);
　　　　}

　　输出结果：

　　　　1

　　　　2

　　　　3

　　　　数组描述

　　3.for of跟forEach（）区别在于可以break，跳出这个循环。循环的是值而不是键。

　　　　var myArray = [1, 2, 3];
　　　　for (var n of myArray) { 
　　　　　　console.log(n);
　　　　}
　　　　

　　　　输出结果：

　　　　1

　　　　2

　　　　3

面向对象特性

类（class）

声明

class Person{
    name;
    eat(){
    console.log(name);
    }
}

构造函数

class Person{
 constructor(name:string){
    this.name=name;
 }
 //constructor(public name:string){}  限定符public起到了声明name的作用
    name;
    eat(){
    console.log(im eating);
    }
}

类的继承

class Employee extend Person{
    constructor(name:string,code:string){
    super(name);
    this.code=code;
    }
    code:string;
    work(){
        super.eat();
        this.dowork();
    }
    private dowork(){//只能在外部调用work，也就是只能让员工先吃饭再干活，直接干活不行，private限定了
        console.log("im working");
    }
}

var e1=new Employee("name","1");
e1.work();

泛型（generic）

参数化的类型，一般用来限制集合的内容

var workers:Array<Person>=[];
workers[0]=new Person("zhangsan")
workers[1]=new Employee("lisi","2")

接口（interface）

用来建立某种代码约定，是的其他开发者咱调用某个方法或创建新的类时必须遵循接口所定义的代码约定

作为参数类型声明

interface IPerson{
    name:string;
    age:number;
}

class Person{
    constructor(public config:Iperson)
}
var p1=new Person({
//多传少传都会报错
    name:"zhangsan",
    age:18
})

用接口声明方法,类实现接口必须实现接口的方法

interface Anemal{
    ear();
}

class Sheep implements Animal{
    eat(){
        console.log("i eat grass");
    }
}
class Tiger implements Animal{
    eat(){
        console.log("i eat meat");
    }
}

模块（Module）

模块可以帮助开发者键代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源（类、方法、变量）暴露出去供外部使用，哪些资源只在模块内使用

//a.ts
export var prop1;//暴露属性
var prop2;//不暴露的属性
export function func1(){
}
function func2(){
}
export class Clazz1{}
calss Claz2{}

//b.ts
import {prop1,func1,Clazz1}from "./a";

console.log(prop1);
func1();
new Clazz1