TypeScript = 微软开发+Js超集+遵循ES6

优势

(1)支持ES6规范
(2)强大的IDE支持
(3)Angular2的开发语言

搭建TS开发环境

(1)在线环境 http://www.typescriptlang.org...
(2)搭建环境

1.npm install -g typescript
2.tsc -v
字符串的新特性

1.多行字符串

var content = `aaa
bbb
ccc`

2.字符串模板

var myname = "xiaoxiannv";
var getName = function(){return "xiaoxiannv";
}
console.log(`hello ${myname}`);
console.log(`hello ${getName()}`);

3.自动拆分字符串

function test(template,name,age){console.log(template);console.log(name);console.log(age);
}
var myname = "xiaoxiannv";
var getAge = function(){return 17;
}

4.用字符串模板去调用test方法

test`hello my name is ${myname}, i am ${getAge()}`;

参数的新特性

(1)参数类型:在参数名称后面使用冒号来指定参数的类型;

var myname:string = "xiaoxiannv";
//编辑器会报错
myname = 13;
//ts类型推断机制,会在第一次赋值的时候推断变量类型
var alias = "xixi";
alias = 14;var tom:any = "xixixi";
tom = 16;
//类型
// number booleanfunction test(name:string):string{return "";
}
test("123");
//自定义类型
class Person{name:string;age:number;
}
var zhangsan:Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 17;

(2)默认参数:在参数生命后面使用等号来指定参数的默认值;

var myname:string = "zhangsan";
function test(a:string,b:string,c:string = "ccc"){console.log(a);console.log(b);console.log(c);
}
test("aaa","bbb");
//带默认值的参数一定要声明在最后面

(3)可选参数:在方法的参数声明后面用问号来表明此参数为可选参数;

function test(a:string,b?:string,c:string = "ccc"){console.log(a);console.log(b);console.log(c);
}
test("aaa","bbb");
test("aaa");
//可选参数不能放在必填参数前

函数的新特性

(1)Rest and Spread 操作符:用来声明任意数量的方法参数;

function func1(...args){
//可以传入任意数量的方法
function func1(...args){//可以传入任意数量的方法args.forEach(function (arg){console.log(arg)});
}
func1(1,2,3);
func1(1,2,3,4,5,6);

(2)generator函数:控制函数的执行过程,手工暂停和恢复代码执行;

function func2(a,b,c){console.log(a);console.log(b);console.log(c);
}function* doSomething(){console.log("start");yield;console.log("finish");
}var func1 = doSomething();
func1.next();//start
func1.next();//finish

(3)destructuring解构赋值:

function getStock(){return {code:"IBM",price:{price1:200,price2:300}}
}
var {code, price} = getStock();
var {code: codex, price: {price2}} = getStock();var arr1 = [1,2,3,4,5];
var [num1, num2] = arr1;
var [, , num1, num2] = arr1;//3 4
var [num1, num2, ...others] = arr1;//others [3,4]

表达式和循环

(1)箭头表达式:用来声明匿名函数,消除传统匿名函数的this指针问题; 箭头函数是对函数声明的一种补充!

var sum = (arg1, arg2) => arg1 + arg2;
var myArray = [1,2,3,4,5];
console.log(myArray.filter(value => value%2 == 0));function getStock(name:string){this.name = name;setInterval(function(){console.log("name is :" + this.name);}, 1000);
}function getStock2(){this.name = name;setInterval(() => {console.log("name is :" + this.name);}, 1000);
}

(2)forEach(),for in ,for of;

var myArray = [1,2,3,4];
myArray.desc = "four number";myArray.forEach(value => console.log(value));
//忽略属性,不允许打破循环,没有breakfor (var n in myArray){console.log(n);//0 1 2 3 desc//循环的数据对象里边属性的名字console.log(myArray[n]);// 1 2 3 4 four number
} for(var i of myArray){console.log(i);if( i > 2) break;//忽略属性,可以打断
}

面向对象特性

(1)类 class:类是TS的核心,使用TS开发时,大部分代码都是写在类里面的;

class Person{name;//private name;//私有的不能在类的外部访问;//protected name;//可以在类的内部以及类的子类中被访问,类的外部不能被访问;eat(){console.log("i am eating");}
}var p1 = new Person();
p1.name = "batman";
p1.eat();var p2 = new Person();
p2.name = "superman";
p2.eat();class Person{// name;// //实例化的时候被调用,只会被调用一次,不能在外部访问;// constructor(name:string){//     this.name = name; // }constructor(public name: string){}eat(){}
}
var p1 = new Person("zhangsan");extends 用来声明类的继承关系;
super 用来调用父类的构造函数或者方法;class Employee extends Person {code: string;constructor(name: string, code: string){//子类的构造函数必须要调用父类的构造函数--硬性规定?super(name);this.code = code;}work(){super.eat();this.doWork();}private doWork(){console.log("i am working");}
}
var e1 = new Employee("name","1");

(2)泛型(generic):参数化的类型,一般用来限制集合的内容;

var worker:Array<Person> = [];
worker[0] = new Person("zhangsan");

(3)接口(Interface):用来建立某种代码约定,使得其他开发者在调用某个方法或者创建新的类时必须遵循接口所定义的代码约定;

interface IPerson {name:string;age:number;
}class Person{constructor(public config: IPerson){//作为一个方法的参数的类型声明;}
}
var p1 = new Person({name:"zhangsan",age:1
})interface Animal {eat();//用接口来声明方法
}class Sheep implements Animal{
//绵羊这个类实现动物这个接口,必须要实现接口里声明的方法;eat() {console.log("i eat grass");}
}class Tiger implements Animal{eat() {console.log("i eat meat");}
}

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

export

import

(5)注解(annotation):注解为程序的元素(类、方法、变量)加上更直观更明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的工具或框架使用的。

(6)类型定于文件(*.d.ts):类型定义文件用来帮助开发者在TS中使用已有的Js工具包,如:JQuery

TypeScript + ES6相关推荐

  1. 使用Webpack打包Typescript ES6项目(转ES5)

    前言 目前,ES6标准逐渐成为主流,然而一些旧的浏览器,对于ES6的支持并不十分完善,这时候就需要将ES6转为ES5,以兼容旧的浏览器. Webpack是一个现代 JavaScript 应用程序的静态 ...

  2. 什么是TypeScript?为什么我要用它代替JavaScript? [关闭]

    本文翻译自:What is TypeScript and why would I use it in place of JavaScript? [closed] Closed . 已关闭 . This ...

  3. 从零配置webpack(react+less+typescript+mobx)

    本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...

  4. html5小游戏 typescript,使用TypeScript和Canvas编写移动端贪吃蛇大作战游戏

    基本介绍 一款移动端贪吃蛇大作战游戏.(只支持移动端) 这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项目结构.如果你有好 ...

  5. 深入浅出 TypeScript

    什么是 TypeScript TypeScript 是 JavaScript 类型的超集,它可以编译为纯 JavaScript. TypeScript 可以在任何浏览器.任何计算机和操作系统上运行,并 ...

  6. 如何自己写一个公用的NPM包

    以 markdown-clear ,创建过程为例,讲解整个NPM包创建和发布流程 1 如何创建一个包 1.1 创建并使用一个工程 在GitHub上新建一个仓库,其名markdown-clear clo ...

  7. All About Angular 2.0

    2019独角兽企业重金招聘Python工程师标准>>> angular All About Angular 2.0 Posted by Rob Eisenberg on  Novem ...

  8. Eight Machine Learning JavaScript Frameworks to Explore

    Eight Machine Learning JavaScript Frameworks to Explore [译]:8个值得探索的JavaScript机器学习框架 In this post, yo ...

  9. 在ASP.NET Core中使用Angular2,以及与Angular2的Token base身份认证

    Angular2是对Angular1的一次彻底的,破坏性的更新. 相对于Angular1.x,借用某果的广告语,唯一的不同,就是处处都不同. 首先,推荐的语言已经不再是Javascript,取而代之的 ...

最新文章

  1. 真刑啊!蔚来员工用公司服务器挖矿,已供认不讳
  2. 编译vo-aacenc遇到的问题
  3. 复习--linux目录及文件操作
  4. 字符串的模式匹配--BF算法KMP算法
  5. 简单的datalist分页代码
  6. 部编版是什么版本_教材部编版和人教版的区别
  7. celery 、rabbitmq的exchange三种方式的实现
  8. 大型运输行业实战_day07_2_数据字典实现
  9. html 图片查看 ie8,本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
  10. delphi android 音乐播放器,Mcool音乐播放器
  11. vc控制excel格式(转载备忘)
  12. 微信小程序开发手记之七:一个小程序上线后的总结(上)
  13. 订单和订单详情的一对一 ,一对多映射
  14. StringBuffer之间的比较、String和StringBuffer的比较
  15. MUR160RLG说明
  16. MyBaties-Plus 批量入库
  17. Day01-Day50
  18. php:Notice: Use of undefined constant id - assumed 'xxxx' 解决办法
  19. 透过《数字孪生白皮书2020》,看平行世界的当下与未来
  20. 推荐几个Excel的实用小技巧给你

热门文章

  1. [Luogu P2893][USACO08FEB]修路Making the Grade
  2. Leetcode796.Rotate String旋转字符串
  3. bzoj 2560: 串珠子【状压dp】
  4. docker 命令2
  5. dwr运行时出现Servlet.init() for servlet dwr-invoker threw exception的解决方法
  6. python---之hasattr()
  7. C++标准库:bitset 用法整理 (来自网易 happyboy200032的博客)
  8. python 人工智能课程对孩子的好处_少儿编程有什么好处?儿童编程课程学习Python的4大原因...
  9. 思科模拟器叫什么_宇宙无敌上帝视角无所不能之星球生成模拟器。
  10. python客户端服务器_Python客户端和服务器ch