js语言ES6,coffeescript,typescript的区别

作者：tony2502877947 | 来源：互联网 | 2023-05-19 03:54

一、首先我们了解一下ES6,coffeescript,typescript的基本概念：1、ES的历史回复，1996年11月，javascript的创造者Netscape公司，决定将Java

一、首先我们了解一下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.

# 赋值:
number   = 42
opposite = true

# 条件:
number = -42 if opposite

# 函数:
square = (x) -> x * x

# 数组:
list = [1, 2, 3, 4, 5]

# 对象:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# 存在性:
alert "I knew it!" if elvis?

# 数组 推导(comprehensions):
cubes = (math.cube num for num in list)var cubes, list, math, num, number, opposite, race, square,
  __slice = [].slice;

number = 42;

opposite = true;

if (opposite) {
  number = -42;
}

square = function(x) {
  return x * x;
};

list = [1, 2, 3, 4, 5];

math = {
  root: Math.sqrt,
  square: square,
  cube: function(x) {
    return x * square(x);
  }
};

race = function() {
  var runners, winner;
  winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  return print(winner, runners);
};

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

cubes = (function() {
  var _i, _len, _results;
  _results = [];
  for (_i = 0, _len = list.length; _i <_len; _i++) {
    num = list[_i];
    _results.push(math.cube(num));
  }
  return _results;
})();

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: Findable) {
    // ...
}

7.合并

合并接口

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;
        }
    }
}

不能合并

类与类不能合并
接口与类不能合并
变量与类不能合并

推荐阅读

function
【TypeScript】零基础入门，轻松玩转TypeScript编程

前言小伙伴们大家好。从今天开始我们将从 ... [详细]

蜡笔小新 2023-10-13 16:04:18
typescript
TypeScript 2.7有什么改进

小编给大家分享一下TypeScript2.7有什么改进，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收 ... [详细]

蜡笔小新 2023-10-14 10:21:22
object
如何使用 Node.js 在 JSON 文件中添加数据？

如何使用Node.js在JSON文件中添加数据？原文:h ... [详细]

蜡笔小新 2023-10-13 13:26:14
function
深入理解TypeScript认识TypeScript&配置详解

为什么使用TypeScript？最初使用TypeScript开发项目的时候，觉得很繁琐，定义每一个变量还要加上类型，尤其是对象形式的，几乎每一个用到的都要定一个接口，还要为每一 ... [详细]

蜡笔小新 2023-10-12 19:44:04
jsp
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
default
关于cuowu类的错误提示和使用AdjustmentListener的问题

本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

蜡笔小新 2023-12-13 22:09:56
function
手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量？

本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频，只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量，只有使用JAVA编写Android客户端才能实现压缩。此外，作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因，并提供了解决方法。最后，作者还介绍了一个用于处理图片的类，可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]

蜡笔小新 2023-12-12 15:58:44
function
Express App如何提供不需要的静态文件？

本文介绍了如何使用Express App提供静态文件，同时提到了一些不需要使用的文件，如package.json和/.ssh/known_hosts，并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]

蜡笔小新 2023-12-12 14:38:07
object
node . js urlsearchparams API

node.jsurlsearchparamsAPI哎哎哎 ... [详细]

蜡笔小新 2023-12-09 18:08:10
cmd
Node.js详细安装及环境配置

1、下载安装根据自己电脑系统及位数选择，我这里选择windows64位.msi格式安装包（官网：https:odejs.orgzh-cndownload）.msi和.zip格式区别 ... [详细]

蜡笔小新 2023-10-16 17:26:09
cmd
Vue配置开发环境 npm+webpack

①安装node.js②按照下面命令行执行node安装参照网址：https:www.cnblogs.compearl07p6247389.htmlwebpack讲解安 ... [详细]

蜡笔小新 2023-10-14 12:17:09
typescript
ts引入公共方法_Ts入门笔记

TS-入门学习笔记TypeScript是JavaScript的一个超集，主要提供了类型系统和对ES6的支持。与js相比，最大的有点是类型系统的引入，由于js本身是弱类型语言，所以天 ... [详细]

蜡笔小新 2023-10-13 13:59:23
cmd
【node.js】关于node.js，如何解决npm should be run outside of the Node.js REPL, in your normal shell报错？

问题描述前言，安装node方式采用的是安装包解压的报如下错误:npmshouldberunoutsideoftheNode.jsREPL,inyournormals ... [详细]

蜡笔小新 2023-10-13 11:47:54
function
javascript – 在Angular2应用程序中使用elementresizedetector库

我试图在Angular2应用程序中使用元素调整大小检测器库(https:github.comwnrelement-resize-detector).根据我有限的JS模块知识,该库似 ... [详细]

蜡笔小新 2023-10-13 01:23:51
typescript
刘连响：为什么看好小程序音视频在教育行业的应用？

作者简介：刘连响，一起玩耍科技创始人。2013年起开始研究WebRTC，对音视频处理、直播、实时音视频相关技术非常感兴趣，具 ... [详细]

蜡笔小新 2023-10-12 20:24:10

tony2502877947

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章

js语言ES6,coffeescript,typescript的区别

一、首先我们了解一下ES6,coffeescript,typescript的基本概念：

二、三种语言的基本用法

1、ES

2、coffeescript

3、typescript

1.基本数据类型

Boolean

Number

String

Array

Enum

Any

Void

2.类

基本语法

继承

修饰符

get，set 访问器

静态属性

3.接口

基本语法

继承接口

可选属性

4.模块（Modules） 作用：1.防止命名空间冲突；2.将一个功能模块很容易的划分到不同文件中，更容易维护；

基本语法

别名

5.函数（Function）

基本语法

完整的函数类型

可选参数

默认参数

可变参数

Lambads 和this关键字

重载

6.泛型

基本语法

泛型类型（通用的函数类型）

接口泛型

泛型类

泛型约束

泛型类约束

7.合并

合并接口

合并模块

合并模块和类

合并模块和函数

合并模块与枚举

不能合并

4.模块（Modules）

作用：1.防止命名空间冲突；2.将一个功能模块很容易的划分到不同文件中，更容易维护；