js语言ES6,coffeescript,typescript的区别
一、首先我们了解一下ES6,coffeescript,typescript的基本概念：
1、ES的历史回复，1996年11月，javascript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。在日常场合，这两个词是可以互换的。
2、CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的心脏. CoffeeScript 尝试用简洁的方式展示 JavaScript 优秀的部分.CoffeeScript 的指导原则是: "她仅仅是 JavaScript". 代码一一对应地编译到 JS, 不会在编译过程中进行解释. 已有的 JavaScript 类库可以无缝地和 CoffeeScript 搭配使用, 反之亦然. 编译后的代码是可读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.
3、TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。TypeScript扩展了JavaScript的句法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件，扩展了它对于流行的库如 jQuery，MongoDB，Node.js 和 D3.js 的好处。
二、三种语言的基本用法
1、ES
- class Person{
- // 构造
- constructor(x,y){
- this.x = x;
- this.y = y;
- }
- toString(){
- return (this.x + "的年龄是" +this.y+"岁");
- }
- }
- export {Person};
- //index.js
- import {Person} from './Person';
- let person = new Person('张三',12);
- console.log(person.toString());
2、coffeescript
左边是 CoffeeScript, 右边是编译后输出的 JavaScript.
| # |
|
3、typescript
1.基本数据类型
Boolean
//Boolean
var isDone:boolean = false;Number
//Number
var width:number = 100;String
//String
var name:string = "hello";Array
//Array
var list:number[] = [1, 2, 3];
var list:Array<number>=[1, 2, 3];Enum
//Enum
enum Color {Red, Green, Blue}
var c: Color = Color.Red;
alert(c);//默认值从0开始，alert(0);
//可以手动指定值
enum Color1 {Red = 1, Green, Blue}
var c1: Color1 = Color1.Green;
alert(c1);//alert(2)
//根据值查找名称
enum Color2 {Red = 1, Green=2, Blue=4}
var c2: string = Color2[4];
alert(c2);//alert(Blue)Any
//不确定类型，退出编译检查
var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
//不确定数组元素类型
var anylist:any[] = [1, true, "free"];
anylist[1] = 100;Void
//空白
function warnUser(): void {
alert(123);
}2.类
基本语法
class Animal {
animalName:string;
constructor(name:string) {
this.animalName = name;
}
sayHello() {
alert(this.animalName + ": Hello");
}
}
var tom = new Animal("Tom");
tom.sayHello();//alert(Tom:Hello)继承
class Animal {
animalName:string;
constructor(name:string) {
this.animalName = name;
}
sayHello() {
alert(this.animalName + ": Hello");
}
}
class Cat extends Animal {
//重写sayHello方法
sayHello() {
alert(this.animalName + "(Cat)：" + "Hello");
}
}
class Mouse extends Animal {
sayHello() {
alert(this.animalName + "(Mouse)：" + "Hello");
}
}
var tom:Animal = new Cat("Tom");
tom.sayHello();//alert(Tom(Cat):Hello)
var jerry:Animal = new Mouse("Jerry");
jerry.sayHello();//alert(Jerry(Mouse):Hello)修饰符
当我们把animalName 改为private
class Animal {
private animalName:string;//默认是public
constructor(name:string) {
this.animalName = name;
}
//...
}
class Cat extends Animal {
//重写sayHello方法
sayHello() {
alert(this.animalName + "(Cat)：" + "Hello");//Error 编译不通过
}
}get，set 访问器
class Animal {
private _animalName:string;//默认是public
get animalName():string {
return this._animalName;
}
set animalName(name:string):string {
this._animalName = name;
}
//...
}静态属性
//静态属性
class Table {
static width = 100;
static height = 200;
}
var width = Table.width;
alert(width);//alert(100)3.接口
基本语法
interface ICar {
color:string;
}
class Bus implements ICar {
color:string;
constructor() {
this.color = "Blue";
}
}
var bus = new Bus();
alert(bus.color);继承接口
//继承接口
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}可选属性
interface ICar {
color:string;
safetyDevice?:any;//实现类无需实现
}
function MoveCar(car:ICar){
if(car.safetyDevice)
{
alert("The car is safe");
}
else
{
alert("The car is not safe");
}
}4.模块（Modules）
作用：1.防止命名空间冲突；2.将一个功能模块很容易的划分到不同文件中，更容易维护；
基本语法
module MyDemo {
export interface IDemo {
}
export class Demo implements IDemo {
}
}别名
module Shapes {
export module Polygons {
export class Triangle { }
export class Square { }
}
}
import polygons = Shapes.Polygons;
var sq = new polygons.Square(); // 类似于 'new Shapes.Polygons.Square()'5.函数（Function）
基本语法
function add(x:number, y:number):number {
return x + y;
}
// or
var myAdd = function (x:number, y:number):number {
return x + y;
};完整的函数类型
var myAdd:(x:number, y:number)=>number =
function (x:number, y:number):number {
return x + y;
};为了增强可读性，给参数x、y具有实际的意义，可以这样写
var myAdd:(baseValue:number, increment:number)=>number =
function (x:number, y:number):number {
return x + y;
}; 第二部分number 是一个返回类型，如果无需返回类型，请使用 'void'
第三部分的function 参数类型，根据上下文类型进行推断，可以省略
var myAdd:(baseValue:number, increment:number)=>number =
function (x, y) {
return x + y;
};可选参数
//可选参数
function buildName(firstName:string, lastName?:string) {
if (lastName)
return firstName + " " + lastName;
else return firstName;
}
var result1 = buildName("Bob");默认参数
//默认参数
function buildNameDefaultValue(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
var result1 = buildNameDefaultValue("Bob");可变参数
例如在C#中，方法参数定义使用param int[],调用方法时，就可以传递多个int类型的参数
在TypeScript中
function buildNameRest(firstName:string, ...restOfName:string[]) {
return firstName + " " + restOfName.join(" ");
}
var employeeName = buildNameRest("Joseph", "Samuel", "Lucas", "MacKinzie")Lambads 和this关键字
var people={
name:["张三","李四","王五","赵六"],
getName:function(){
return function(){
var i=Math.floor(Math.random()*4);
return {
n:this.name[i]
}
}
}
}
var pname=people.getName();
alert("名字："+pname().n); 调用发现getName中的this关键字指向的是getName,访问不到外部的name属性
所以我们修改为：
var people = {
name: ["张三", "李四", "王五", "赵六"],
getName: function () {
return ()=> {
var i = Math.floor(Math.random() * 4);
return {
n: this.name[i]
}
}
}
}
var pname = people.getName();
alert("名字：" + pname().n);重载
//重载
function student(name:string):string;
function student(age:number):number;
function student(numberorage:any):any {
if (numberorage && typeof (numberorage) == "string")
alert("姓名");
else
alert("年龄");
}
student("Tom");//alert("姓名")
student(15);//alert("年龄")6.泛型
基本语法
function identity<T>(arg: T): T {
return arg;
}
//数组泛型
function identity<T>(arg: T[]): T[] {
console.log(arg.length);
}
泛型类型（通用的函数类型）
function identity<T>(arg:T):T {
return arg;
}
var myIdentity:<T>(arg:T)=>T = identity;//T也可使用其他字母表示
//也可以这么写
//var myIdentity:{<T>(arg:T): T} = identity;接口泛型
interface GenericIdentityFn {
<T>(arg:T): T;
}
function identity<T>(arg:T):T {
return arg;
}
var myIdentity:GenericIdentityFn = identity;泛型类
class GenericNumber<T> {
zeroValue:T;
add:(x:T, y:T) => T;
}
var myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
return x + y;
}; 泛型约束
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg:T):T {
console.log(arg.length);
return arg;
}
loggingIdentity(3);//error
loggingIdentity({length: 10, value: 3}); //只要类型包含length属性即可泛型类约束
class Findable<T>
{
//...
}
function find<T>(n: T, s: Findable7.合并
合并接口
interface Box {
height: number;
width: number;
}
interface Box {
scale: number;
}
var box: Box = {height: 5, width: 6, scale: 10};合并模块
module Animals {
exportclass Zebra { }
}
module Animals {
exportinterface Legged { numberOfLegs: number; }
exportclass Dog { }
}
//相当于
module Animals {
exportinterface Legged { numberOfLegs: number; }
exportclass Zebra { }
exportclass Dog { }
}合并模块和类
class Album {
label:Album.AlbumLabel;
}
module Album {
export class AlbumLabel {
}
}合并模块和函数
function buildLabel(name:string):string {
return buildLabel.prefix + name + buildLabel.suffix;
}
module buildLabel {
export var suffix = "";
export var prefix = "Hello, ";
}
alert(buildLabel("Sam Smith"));合并模块与枚举
enum Color {
red = 1,
green = 2,
blue = 4
}
module Color {
export function mixColor(colorName:string) {
if (colorName == "yellow") {
return Color.red + Color.green;
}
else if (colorName == "white") {
return Color.red + Color.green + Color.blue;
}
else if (colorName == "magenta") {
return Color.red + Color.blue;
}
else if (colorName == "cyan") {
return Color.green + Color.blue;
}
}
}不能合并
- 类与类不能合并
- 接口与类不能合并
- 变量与类不能合并