深入浅出学习 TypeScript 语言

最新推荐文章于 2023-02-08 09:12:28 发布

蔚1

最新推荐文章于 2023-02-08 09:12:28 发布

阅读量1.5k

点赞数 1

文章标签：开发语言 JavaScript TypeScript ViewUI

本文链接：https://blog.csdn.net/valada/article/details/79909244

版权

课程简介

2012年10月，微软发布了首个公开版本的 TypeScript，2013年6月19日，在经历了一个预览版之后微软发布了正式版 TypeScript 0.9。TypeScript 是 JavaScript 的超集，完全支持 JavaScript 语法，并且在 JavaScript 语法的基础上增加了静态类型变量和基于类的面向对象编程。TypeScript 支持良好的代码提示，支持重构，适合大型项目。目前，TypeScript 被越来越多的开发者喜爱并应用在项目开发中。

作为 TypeScript 的入门教程，此达人课共计11篇文章，带你从零开始学习 TypeScript 语言。本课程包含四个大部分。

第一部分（第1-2篇）带大家认识 TypeScript 语言，并搭建 TypeScript 开发环境；

第二部分（第3-5篇）主要介绍 TypeScript 中的变量、表达式、流程控制以及函数等编程语言最基本的知识；

第三部分（第6-8篇）围绕 TypeScript 中的引用类型数组、字符串、正则表达式、日期等特性展开技术讲解；

第四部分（第9-11篇）领略及实战 TypeScript 语言中的基于类的面向对象编程以及异步函数等高级内容。

作者简介

王倩倩，白鹭时代游戏高级开发工程师、白鹭引擎人才教育培训高级讲师，对 Egret 引擎中的 Egret、RES、EUI、game、WebSocket 等模块深有研究，现主要负责 H5 游戏开发、微信小游戏等项目开发及相关课程授课。5年开发、讲师经验，曾先后担任爱鲜蜂、快牙、洛克人等企业多个项目的负责人。

课程内容

第01篇：认识 TypeScript 语言

认识 TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。

TypeScript会在编译时期去掉数据类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器上运行的是 JavaScript 语言，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容问题。

安德斯·海尔斯伯格，作为 C# 首席架构师，已投入到 TypeScript 的开发工作中。如果你原来接触过 C# 语言，你会发现 TypeScript 语言中基于类的面向对象编程与 C# 中的面向对象很类似。2013年6月19日，在经历了一个预览版之后，微软发布了正式版 TypeScript 0.9，向未来的 TypeScript 1.0 版迈进了很大一步。到目前为止，TypeScript 已经更新到了 2.6 版本。大家可以到官网下载对应的版本。

TypeScript 语言发展历史

TypeScript 起源于开发应用程序规模的 JavaScript 应用程序的需求。伴随着越来越的 MicroSoft 语言开发者们不断抱怨在使用 JavaScript 语言过程中遇到的问题，最终导致原先依赖于 JavaScript 的开发者不再直接使用 JavaScript 开发程序，而是选择一种最终能够编译成 JavaScript 语言的编程语言，例如 CoffeScript、Script# 等。但这些语言的一个特点就是无法直接使用 JavaScript 原有的语法，于是微软推出了 JavaScript 的升级版本 TypeScript 语言。

TypeScript 核心开发者、C#之父 Anders Hejlsberg 认为，JavaScript 代表了一种趋势，而且现在很多人用它，以后将会变成企业级的编程语言，但同时它又有那么多的问题，他们下定决心要把这些问题解决好，让它变成一个更好的编程语言。

研发过程中，微软在 JavaScript 之上添加了很多东西，以使 TypeScript 能更好的支持大型应用的开发。TypeScript 不追求替代 JavaScript，没有计划直接运行在浏览器、系统里，它仅仅关注编译成 JavaScript 之前的事情。编译之后的事情，诸如 JavaScript 性能调优等等，并不关心。TypeScript 最大的目的是让程序员更具创造性，提高生产力，它将极大增强 JavaScript 编写应用的开发和调试环节，让 JavaScript 能够方便用于编写大型应用，进行多人协作。

TypeScript VS JavaScript

TypeScript 与 JavaScript 两者的特性对比，主要表现为以下几点。

TypeScript 是一个应用程序级的 JavaScript 开发语言。
TypeScript 是 JavaScript 的超集，可以编译成纯 JavaScript。
TypeScript 跨浏览器、跨操作系统、跨主机，且开源。
TypeScript 始于 JavaScript，终于 JavaScript。遵循 JavaScript 的语法和语义，方便了无数的 JavaScript 开发者。
TypeScript 可以重用现有的 JavaScript 代码，调用流行的 JavaScript 库。
TypeScript 可以编译成简洁、简单的 JavaScript 代码，在任意浏览器、Node.js 或任何兼容 ES3 的环境上运行。
TypeScript 比 JavaScript 更具开发效率，包括静态类型检查、基于符号的导航、语句自动完成、代码重构等。
TypeScript 提供了类、模块和接口，更易于构建组件。

TypeScript 语言设计目标

我们可以从以下几点中，完整地看到 TypeScript 语言的设计目标。

1.TypeScript 在编译阶段就可以排查一些类型错误。

JavaScript 语言是弱类型语言，很多 Bug 无法再编译阶段发现，微软的工程师们认为防止并排查一些运行时错误的最佳方式是，创造一种在编译时期进行静态类型分析的强类型语言。

2.与现存的 JavaScript 代码有非常高的兼容性。

TypeScript 是 JavaScript 的超集，这意味着任何合法的 JavaScript 程序都是合法的 TypeScript 程序（很少有例外）。

3.给大型项目提供一个构建机制。

TypeScript 中加入了基于类（Class）的对象、接口和模块。这些特性可以帮助我们以更好的方式构建代码，也会减少团队内代码集成的时候带来的问题，并且结合最佳的面向对象原则和实践，可以让代码更具可维护性与扩展性。

4.对于发行版本的代码，没有运行时开销。

在使用 TypeScript 时，我们通常将程序设计阶段和运行阶段区分开来。术语“设计时代码（Design Time Code）”指的是我们设计程序时编写的 TypeScript 代码，“执行时代码（Execution Time Code）”或者“运行时代码（Runtime Code）”指的是 TypeScript 代码编译后执行的 JavaScript 代码。TypeScript 给 JavaScript 新增了一些特性，但这些特性只在程序设计阶段可以用到。比如，可以在 TypeScript 里声明接口，但既然 JavaScript 不支持接口，那么 TypeScript 编译器在编译出的 JavaScript 代码中就不会声明也不会模拟这个特性。

微软的工程师们提供了一些类似于代码转换（将 TypeScript 特性转变成纯 JavaScript 实现）和类型擦除（移除静态类型标记）的组件给 TypeScript 的编译器。来让它产生真正纯净 JavaScript 代码。类型擦除组件不仅仅移除了类型的标注，还移除了所有的 TypeScript 高级语言特性，比如接口。并且，默认以 ECMAScript 3 规范为目标的时候生成的代码在浏览器中有非常高的兼容性，当然也支持以 ECMAScript 5和 ECMAScript 6 为编译目标。一般来说，使用任意受支持的编译目标，我们都可以使用 TypeScript 的特性，但部分特性需要依赖 ECMAScript 5 或更高版本作为编译目标这一先决条件。

5.遵循当前以及未来出现的 ECMAScript 规范。

TypeScript 不仅能兼容现有的 JavaScript 代码，它也拥有兼容 JavaScript 未来版本的能力。大多数 TypeScript 的新增特性都是基于未来的 JavaScript 提案，这意味着许多 TypeScript 代码在将来甚至会变成合法的 JavaScript 代码。

6.成为跨平台的开发工具。

微软使用 Apache 协议开源了 TypeScript，并且它可以在所有主流的操作系统上安装和执行。

TypeScript 语言特性

TypeScript 语言是 JavaScript 的超集，这意味着它支持所有的 JavaScript 语法，并在 JavaScript 语言的基础上增加了一些扩展，如类型批注和编译时类型检查、类、接口、模块。

类型批注

通过 var 关键字来定义一个变量，JavaScript 中定义的变量是没有类型限制的。我定义一个变量 a，我可以给它赋值数字100，也可以赋值字符串"abc"。但是这点被很多开发者吐槽，这样的赋值潜在很多问题。所以在 TypeScript 中添加了类型说明来保障变量 a 中只能存储一种类型的数据。

在 JavaScript 中，我们这样写：

//JavaScript语言中是这样定义变量的，a 中既可以存储数字 还可以存储字符串。var a = 100;a = "abc";

在 TypeScript中，我们需这样写：

//TypeScript 语言在定义变量时，在变量名后面添加了变量类型的说明。//这就表明 a 中必须存储 number 类型的数据var a:number = 100;//定义函数  function关键字// a b 是形参 在TS中会给形参也带上类型说明// :number 是函数返回值的类型function add(a:number,b:number):number{        return a+b;    }

类

TypeScript 相对于 JavaScript 来说，一个最大的修改就是增加了基于类的面向对象编程，类的编写格式请参照下面示例代码。这种面向对象编程在传统的面向对象编程语言中应用广范。原来的 JavaScript 语言的面向对象是基于函数对象的，封装、可读性、可扩展性等都被许多开发者吐槽。

 //class 定义类的关键字，Dog 是类名class Dog{      //constructor构造函数  可以写 也可以不写    public constructor(){    }      // 属性    public name:string;    private age:number;    protected sex:string;    //方法    public sayHi(){        console.log("旺旺");    }}

接口

TypeScript 中同样也加入接口这个特点，接口就相当于是定义了一种规范一样。经常用作类型说明，说明某个函数的类型或者某个对象的类型。示例代码如下。

//定义了一个接口interface LoggerInterface{    log(arg:any):void;}// 实现了LoggerInterface接口的类Loggerclass Logger implements LoggerInterface{    //要实现接口必须实现接口中定义的方法签名    log(arg:any):void{        //typeof测试数据类型  如果是函数就调用函数 否则打印参数        if(typeof arg === "function"){            arg();        }else{            console.log(arg);        }    }}

在上面的例子里，我们定义了一个名为 LoggerInterface 的接口，和一个实现它的 Logger 类。TypeScript 也允许使用接口来约束对象，这使我们可以避免很多潜在的小错误，尤其是在写对象字面量时，参见下面代码。

interface UserInterface{    name:string;    password:string;}var user:UserInterface = {    name:"tom",    password:"345678"}//正确！ 是一个正确的User信息var user2:UserInterface = {    name:"David",    pasword:"123321"//报错！！！}

关于接口和面向对象编程，我们会在后面章节详细讲解。

模块

模块是用来组织一些具有某种内在联系的特性和对象。模块能够使代码的结构更加清晰，可以使用 namespace 和 export 关键字在 TypeScript 中声明模块。示例代码如下。

namespace mygame{    interface Test1Interface{        /*...*/    }    export interface Test2Interface{        /*...*/    }    export interface Test3Interface{        /*...*/    }    export class Rect{        /*...*/    }    export class Circle implements Test2Interface{        /*...*/    }}

在上面的例子中，我们声明了一个 mygame 模块，该模块包含了一个 Rect、Circle 类和 Test1Interface、Test2Interface、Test3Interface 三个接口。

注意：模块中的 Test1Interface 接口没有被导出，所以在模块外是访问不到的！

怎样学习 TypeScript 语言

最后，为大家推荐一些学习 TypeScript 时可能会用的到网站。

第02课：搭建开发环境

“工欲善其事必先利其器”，在学习TypeScript语言之前，我们先来学习如何搭建TypeScript的开发环境。

VSCode搭建TypeScript开发环境

搭建开发环境

第一步，安装 Node.js。点击下载地址进行下载，并采用默认安装。

第二步，安装完成之后，检测是否安装成功。打开命令行窗口（cmd）输入下面的指令：

// 检测安装的 Node.js 版本号，如果 Node.js 安装成功，会在下面打印来版本号。node -v//npm 是 Node.js 中自带的，它是安装 Node.js 包的工具。同样如果 Node.js 安装成功之后会在下面打印出版本号。npm -v

第三步，安装 TypeScript 包。在刚才的命令行窗口继续输入如下指令：

//安装 TypeScript 包，如果是 Mac 电脑，使用 sudo npm install typescript -g 指令！npm install typescript -g//安装完成之后，检测是否安装成功，输出版本号则说明安装成功。tsc -- version

第四步，安装 VS Code。点击下载地址进行下载，并采用默认安装；

到目前为止，开发环境搭建好，

创建项目

接下来，我们来学习如何通过安装好的工具开发 TypeScript 项目。

第一步，创建一个文件夹 tsdemo，并且 cd 到 tsdemo 目录中，生成 package.json 目录。

//创建一个 ts_demo目录。mkdir ts_demo//进入到 ts_demo目录。cd ts_demo//初始化项目，会创建一个 package.json 文件。npm init -y

第二步，创建 tsconfig.json 文件。

//创建tsconfig.json文件tsc --init

tsconfig.json文件是什么？它是一个 TypeScript 项目的配置文件，可以通过读取它来设置 TypeScript 编译器的编译参数。

//tsconfig.json 指定了用来编译这个项目的根文件和编译选项。{    "compilerOptions": {     //compilerOptions:编译选项,可以被忽略，这时编译器会使用默认值    "allowSyntheticDefaultImports": true,//允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示，仅为了类型检查。    "baseUrl": "./src",//解析非相对模块名的基准目录    "emitDecoratorMetadata": true, //给源码里的装饰器声明加上设计类型元数据    "experimentalDecorators": true,//启用实验性的ES装饰器    "module": "commonjs",        //指定生成哪个模块系统代码    "moduleResolution": "node",  //决定如何处理模块。或者是"Node"对于Node.js/io.js，或者是"Classic"（默认）    "noEmitHelpers": true,//不再输出文件中生成用户自定义的帮助函数代码，如__extends。    "noImplicitAny": false,     //在表达式和声明上有隐含的any类型时报错     "sourceMap": true,          //用于debug ,生成相应的.map文件     "strictNullChecks": false,//在严格的null检查模式下，null和undefined值不包含在任何类型里，只允许用它们自己和any来赋值（有个例外，undefined可以赋值到void）。     "target": "es5",             //目标代码类型    "paths": {  //模块名到基于baseUrl的路径映射的列表    },    "lib": [  //编译过程中需要引入的库文件的列表        "dom",        "es6"       ],    "types": [  //要包含的类型声明文件名列表；如果指定了types，只有被列出来的包才会被包含进来    "hammerjs",    "node",    "source-map",    "uglify-js",    "webpack"    ]},    "exclude": [  //如果"files"和"include"都没有被指定，编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx），排除在"exclude"里指定的文件。      "node_modules",      "dist"      ],  "awesomeTypescriptLoaderOptions": {  //Typescript加载选项  "forkChecker": true,  "useWebpackText": true  },  "compileOnSave": false,            "buildOnSave": false}

第三步，安装 .d.ts 文件。

npm install @types/node --dev-save

第四步，使用 VS Code 打开 ts_demo 目录。

至此，我们的项目创建完毕。我们通过前面的学习知道 TypeScript 文件需要先编译成 JavaScript 文件，然后才可以运行执行。

编译 TypeScript

接下来我们学习如何编译 TypeScript 文件。

第一步，配置 TypeScript 的 task 编译文件。使用快捷键 Command+Shfit+b。

第二步，点击上图中的“配置任务运行程序”。

点击 “TypeScript-tsconfig.json 创建 TypeScript 项目”，生成文件 task.json 文件。

第三步，创建并编辑自己的 TypeScript 文件 test.ts。

var a:number = 10;console.log(a);

使用快捷键 Command+Shfit+b 编译 TypeScript 文件，最后得到 test.js 文件。

第四步，执行程序。运行编译生成的 test.js 文件。

运行上面的程序，我们发现在控制台上打印出了10。

Egret Wing 搭建 Typescript 开发环境

搭建开发环境

第一步，点击下载地址下载 Egret Launcher。

EgretLauncher 是白鹭科技公司开发的产品。EgretLauncher 相当于是 Egret 产品的入口。我们想要下载 Egret Wing 需先下载管理工具 Egret Lanucher。下载完成之后，默认安装或者自定义安装都可以。

第二步，打开 Egret Lanucher。下载 Egret Wing，然后进行安装。

先找到 Egret Wing 3，然后下载，下载完成之后安装。

到目前，Egret Wing环境搭建好了。接下来，我们创建一个 TypeScript 项目。

创建项目

第一步，打开 Egret Wing。并按该流程操作：文件 —> 新建项目 —> Web项目（TypeScript）。

创建好的项目目录如图所示。

注意：我们在这里编写 TypeScript 文件，然后把 TypeScript 文件编译成 JavaScript 文件，最后把 JavaScript 文件添加到 index.html 文件中，在浏览器上运行的！

第二步，打开 src/main.ts 文件，删除原来的内容，编写自己的代码。示例代码如下。

// 输出语句 console.log() 在控制台上输出大括号内的内容console.log("Hello world!");console.log("Egret wing");

第三步，编译 TypeScript 文件。

第六步，运行项目。

注意：我们创建的是 Web 项目（TypeScript），也就是我们将 TypeScript 文件编译成 JavaScript 文件，然后在浏览器上运行。在 Egret 中运行，有两个地方，（1）Egret中自带一个运行界面；（2）在谷歌浏览器上运行（首先在自己的电脑上安装谷歌浏览器或者其他浏览器都可以）。

Egret中自带的运行界面如下图所示。

运行结果如下图所示。

运行结果输出在控制台上，如下图所示。

在浏览器上运行的操作过程，可参考以下三张图片。

上面这两种运行形式，使用那种都可以！

TypeScript 的开发环境有很多，在这里我只介绍了最常用的两种，更多开发环境，大家可以参考 TypeScript 中文官网。后面的课程中，我会使用 Egret Wing 作为开发环境讲解后续章节的内容。

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
深入浅出学习 TypeScript 语言

课程简介2012年10月，微软发布了首个公开版本的 TypeScript，2013年6月19日，在经历了一个预览版之后微软发布了正式版 TypeScript 0.9。TypeScript 是 JavaScript 的超集，完全支持 JavaScript 语法，并且在 JavaScript 语法的基础上增加了静态类型变量和基于类的面向对象编程。TypeScript 支持良好的代码提示，支持重构，适...
复制链接

扫一扫