2022-11-12 22:23

TypeScript入门(1) — 简介

王姐姐

WEB前端

(605)

(0)

收藏

1. TypeScript

1.1. 什么是TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,它不是JavaScript的替代品,也不会为JavaScript代码添加任何新功能。TypeScript允许程序员在其代码中使用面向对象的构造,然后将其转换为JavaScript。它还包括类型安全和编译时类型检查等便利功能。最重要的是,它是完全免费和开源的。

虽然TypeScript是由Microsoft开发的,并且是Visual Studio(IDE软件)的标准配置,但是它可以在任何环境中使用。

1.2. TypeScript与ES5、ES2015/ES6之间的关系

TypeScript 是 JavaScript 的超集。 ES2015 是 ES5 的演进。

 图片1.png

1.2.1. ECMAScript

一个由 ECMA International 进行标准化,TC39 委员会进行监督的语言。通常用于指代标准本身,是 JavaScript(JS)的标准化脚本语言也是核心,它规定了语言的组成部分:语法、类型、语句、关键字、保留字、操作符、对象。

1.2.2. JavaScript

ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范,并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。

1.2.3. ECMAScript 5 (ES5)

ECMAScript 的第五版修订,于 2009 年完成标准化。这个规范在所有现代浏览器中都相当完全的实现了,支持函数式编程和闭包等特性。

1.2.4. ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015)

ECMAScript 的第六版修订,于 2015 年完成标准化。这个标准被部分实现于大部分现代浏览器。

下面是一些ES6中的新的特点:

ES6中的let命令,声明变量,用法和var差不多,但是let是为JavaScript新增了块级作用域,ES5中是没有块级作用域的,并且var有变量提升的概念,但是在let中,使用的变量一定要进行声明。

ES6中变量的解构赋值,比如:var [a,b,c] = [0,1,2];

ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念,听起来和Java中的面向对象编程的语法有些像,但是二者是不一样的。

ES6中的函数定义也不再使用关键字function,而是利用了=>来进行定义;

ES6中可以设置默认函数参数,如function A(x,y=9){};

1.2.5. TypeScript

Type这个词表明我们会拥有类型。这些类型是可选的。typescript相对于ES5有五大改善:类型、类、注解、模块导入、语言工具包(如结构),typescript相对于ES6,TypeScript最大的改善是增加了类型系统。

TypeScript 与 JavaScript 的区别:

微信图片_20221112222416.png

1.3. 什么时候应该将项目迁移到TypeScript?

当代码的大小、复杂性和出错率增加时,需要在编译过程中确定具体问题时,就可以使用TypeScript。

TypeScript 还具有接口和访问修饰符,允许开发人员在单个代码库上进行协作和交互。因此,最好在项目一开始就使用TypeScript。

但是你如果喜欢像Ember.js或Glimmer.js这样的框架,那你就不会喜欢TypeScript,这些框架的首选是JavaScript。

2. 安装

2.1. 安装TypeScript

npm install -g typescript

2.2. 2.编译 TypeScript 文件

安装完成后我们就可以使用 TypeScript 编译器,名称叫 tsc,可将编译结果生成 js 文件。

要编译 TypeScript 文件,可使用如下命令:tsc filename.ts

2.3. TypeScript Playground

当然,对于刚入门 TypeScript 的小伙伴,也可以不用安装 typescript,而是直接使用线上的 TypeScript Playground 来学习新的语法或新特性。

TypeScript Playground:https://www.typescriptlang.org/play/

图片2.png 

3. 代码对比

typescript 定义用户类

class Userinfo{
   name:string;
   age:number;
}
var userinfo=new Userinfo();
userinfo.name="Jack";
userinfo.age=20;
document.write("name:"+userinfo.name+" age:"+userinfo.age);

我们再来看用TypeScript编译以后的JavaScript代码:

var Userinfo = 
/** @class */ 
(function () {
    function Userinfo() {
    }
    return Userinfo;
}());
var userinfo = new Userinfo();
userinfo.name = "Jack";
userinfo.age = 20;
document.write("name:" + userinfo.name + " age:" + userinfo.age);

通过对代码的对比,TypeScript代码更简洁,更好理解,更易于维护。与C#,Java,C++类似。


0条评论

点击登录参与评论