JavaScript与TypeScript

JavaScript与TypeScript 6 中都有类和对象的概念，最终会编译成JavaScript 5的形式，算是一种语法糖吧。
class Car {
// 字段
engine:string;

// 构造函数 
constructor(engine:string) { 
    this.engine = engine 
}  

// 方法 
disp():void { 
    console.log("发动机为 :   "+this.engine) 
} 

}

编译以上代码，得到以下 JavaScript 代码：

var Car = /** @class */ (function () {
// 构造函数
function Car(engine) {
this.engine = engine;
}
// 方法
Car.prototype.disp = function () {
console.log("发动机为 : " + this.engine);
};
return Car;
}());

翻译出来的代码就是以前前端大神用JavaScript 5 写的奇技淫巧。

如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：

///
以下实例演示了命名空间的使用，定义在不同文件中：

IShape.ts 文件代码：
namespace Drawing {
export interface IShape {
draw();
}
}
Circle.ts 文件代码：
///
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log(“Circle is drawn”);
}
}
}
Triangle.ts 文件代码：
///
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log(“Triangle is drawn”);
}
}
}
TestShape.ts 文件代码：
///
///
///
function drawAllShapes(shape:Drawing.IShape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());

不能再把TypeScript和JavaScript看作是同一门语言，毕竟TypeScript已经封装了很多，可以通过翻译器，看看JavaScript是怎样实现这些封装的。

假如我们想使用第三方库，比如 jQuery，我们通常这样获取一个 id 是 foo 的元素：

KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲foo'); // 或 jQu…是jQuery的意思但是在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西：
jQuery(’#foo’);
// index.ts(1,1): error TS2304: Cannot find name ‘jQuery’.

这时，我们需要使用 declare 关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对：
declare var jQuery: (selector: string) => any;
jQuery(’#foo’);
declare 定义的类型只会用于编译时的检查，编译结果中会被删除。

上例的编译结果是：
jQuery(’#foo’);

所以lib.dom.d.ts中有很多的declare声明，帮助识别。声明文件以 .d.ts 为后缀，例如：
runoob.d.ts //这里d是declare的意思，表明这是一个声明文件

当然，很多流行的第三方库的声明文件不需要我们定义了，比如 jQuery 已经有人帮我们定义好了
// Type definitions for jquery 3.5
// Project: https://jquery.com
// Definitions by: Leonard Thieu https://github.com/leonard-thieu
// Boris Yankov https://github.com/borisyankov
// Christian Hoffmeister https://github.com/choffmeister
// Steve Fenton https://github.com/Steve-Fenton
// Diullei Gomes https://github.com/Diullei
// Tass Iliopoulos https://github.com/tasoili
// Jason Swearingen https://github.com/jasons-novaleaf
// Sean Hill https://github.com/seanski
// Guus Goossens https://github.com/Guuz
// Kelly Summerlin https://github.com/ksummerlin
// Basarat Ali Syed https://github.com/basarat
// Nicholas Wolverson https://github.com/nwolverson
// Derek Cicerone https://github.com/derekcicerone
// Andrew Gaspar https://github.com/AndrewGaspar
// Seikichi Kondo https://github.com/seikichi
// Benjamin Jackman https://github.com/benjaminjackman
// Poul Sorensen https://github.com/s093294
// Josh Strobl https://github.com/JoshStrobl
// John Reilly https://github.com/johnnyreilly
// Dick van den Brink https://github.com/DickvdBrink
// Thomas Schulz https://github.com/King2500
// Terry Mun https://github.com/terrymun
// Martin Badin https://github.com/martin-badin
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.7

///
///
///
///
///

export = jQuery;