typescript开发桌面程序（TypeScript，面向对象，类、构造函数、继承、抽象类、接口和封装）

本文目录

• TypeScript，面向对象，类、构造函数、继承、抽象类、接口和封装
• typescript是什么意思
• typescript能代替javascript做开发吗
• 如何用TypeScript开发微信小程序
• 有哪些前端框架是使用typescript写的
• TypeScript是怎么提高JavaScript编程效果的
• Electron使用TypeScript
• 使用vue3+ typeScript 开发小程序

TypeScript，面向对象，类、构造函数、继承、抽象类、接口和封装

面向对象，Object Oriented，软件开发方法，一种编程范式。

面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后的产物。

面向对象的三大特性：封装、继承、多态。

TypeScript面向对象，类 (class)

1、static关键字，表示一个静态属性，通过类访问。

2、readonly关键字，表示一个只读属性，不能修改属性，构造函数可初始化。

构造函数和this关键字

1、constructor函数，称为构造函数，对象创建时调用。

2、在实例方法中，this就表示当前当前的实例。

继承（extends）和super关键字

1、子类写了constructor构造函数必须使用super继承父类constructor构造函数的属性

2、通过继承可以将多个类中共有的代码写在一个父类中，继承后子类将会拥有父类所有的方法和属性。

3、方法重写，子类中添加了和父类相同的方法，子类方法会覆盖掉父类的方法

抽象（abstract）

1、以abstract开头的类是抽象类，抽象类不能实例化，事专门用来被继承的类。

2、抽象类中可以添加抽象方法，非抽象类中不可以有抽象方法。

3、抽象方法使用abstract开头，没有方法体，只能定义在抽象类中，子类必须对抽象方法进行重写。

接口（interface）

1、接口的作用类似于抽象类，不同点在于接口中的所有函数和属性都是没有实值的，接口中的所有方法都是抽象方法。

2、接口主要负责定义一个类的结构，限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。

3、一个类去实现接口，实现接口时类中要包括接口中的所有属性。

封装和属性的封装

1、private修饰符，私有的属性，私有属性只能在类内部进行访问修改。

2、protected修饰符，受保护的属性，只能在当前类和当前类的子类中访问。

3、public修饰符，共有的属性，修饰的属性可以再任意位置访问修改默认值。

4、getter方法用来读取属性。

5、setter方法迎来设置属性。

6、getter和setter被统一称为属性的存储器，定义时在方法之前添加get和set，调用的时候直接通过点语法调用。

案例1：

案例2：

案例3：

案例4：

案例5：

typescript是什么意思

我们有时会看到TypeScript这个词，但是又不理解它的意思，那么这个词到底是什么呢？

TypeScript的简介

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和面向对象编程。TypeScript起源于开发应用程序规模的JavaScript应用程序的需求。

TypeScript的发展历程

2012年十月份，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript0.9，向未来的TypeScript1.0版迈进了很大一步。TypeScript的概况TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生JavaScript以确保兼容性。TypeScript支持为已存在的JavaScript库添加类型信息的头文件，扩展了它对于流行的库如jQuery，MongoDB，Node.js和D3.js的好处。

总的来说，TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，添加了可选的静态类型和面向对象编程。TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。

typescript能代替javascript做开发吗

微软新推TypeScript取代JavaScript

TypeScript是一个应用程序级的JavaScript开发语言。

TypeScript是JavaScript的超集，可以编译成纯JavaScript。

TypeScript跨浏览器、跨操作系统、跨主机，开源。

主页：htt p:/ /ww w.typescriptla ng.o rg/

Starts from JavaScript, Ends with JavaScript

TypeScript遵循JavaScript的语法和语义，方便了无数的JavaScript开发者。

TypeScript可以重用现有的JavaScript代码，调用流行的JavaScript库。

TypeScript可以编译成简洁、简单的JavaScript代码，在任意浏览器、Node.js或任何兼容ES3的环境上运行。

Strong Tools for Large Applications

TypeScript比JavaScript更具开发效率，包括：静态类型检查、基于符号的导航、语句自动完成、代码重构等。

Scalable

TypeScript提供了类、模块和接口，更易于构建组件。

Quick Start

现在可以开始用TypeScript创建简单的Web应用程序了。安装TypeScript有两种办法：

安装

1. TypeScript for Visual Studio 2012

下载地址：

ht tp:/ /download.micros oft.c om/download/2/F/F/2FFA1FBA-97CA-4FFB-8ED7-A4AE063 98948/TypeScriptSetup .0.8.0.m si

2. for Node.js

安装指令：（使用NPM安装）

》 npm install -g typescript

如何用TypeScript开发微信小程序

方法步骤如下：

1、工具需求

（1）TypeScript

2、利用TypeScript开发微信小程序需要4个核心文件如下

（1）App：代码整个应用程序的抽象对象，可以设置全局的方法和变量

（2）Page：    页面抽象对象，承载页面业务逻辑

（3）WXML：  页面的结构，相当于html 

（4）JSON：   配置文件

（5）WXSS：  页面的样式，相当于css

3、然后由于目前腾讯没有小程序的TypeScript版本的API，所以OneCode team针对目前腾讯放出的所有的小程序JavaScript API开发了一个TypeScript版本的API类型定义文件 wxAPI.d.ts，如图。

（1）最后只需要在程序中引用该文件，如果是使用Visual Studio来开发的话，就能有代码提示了

有哪些前端框架是使用typescript写的

蛮多的，下面举几个常见的前端框架。
Angular
简单介绍下Angular, AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

从Angular2版本开始，使用TypeScript开发，完全重写框架，性能提升巨大。目前最新版本为8.1.0.
Ionic
Ionic Framework是一个开源的UI工具包，用Web技术（HTML，CSS和JavaScript）构建高性能的高质量移动和桌面应用程序。Ionic Framework专注于前端用户体验，或应用程序的UI交互（控件，交互，手势，动画）。它易于学习，并与其他库或框架（如Angular）很好地集成，或者可以独立使用而无需使用简单脚本包含的前端框架。目前，Ionic Framework已与Angular正式集成，对Vue和React的支持也正在开发中。
Ant Design of Angular
Ant Design 说是前端框架不太严谨，更像是一个UI组件库，这点和Ionic类似。

Ant Design 由阿里开发，目标是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。
还提供了一系列的工具方便设计和开发人员更快的实现需求，缩短项目周期；国内使用人数较多。PS: 大家还记得去年的圣诞节彩蛋吗？
最后提一下 Vue ,很火的一个前端框架，它不是采用TypeScript语言开发，但可以使用TypeScript配合开发。
Angular，Ionic这些耳熟能详啦。

但Visual Studio Code也是用Typescript写的就强悍了，而且还能移植成Web版本的VS Code.

vue.js 3.0版本

TypeScript是怎么提高JavaScript编程效果的

　　TypeScript是由微软开发的一种可快速入门的开源的编程语言，是JavaScript的一个超集，且向这个语言添加了可选的静态类型和基于类的面向对象编程。能够帮助web前端开发人员编出更出色的JavaScript代码、搞定规模可观的JavaScript项目并为ECMAScript6的来临做好准备。
　　JavaScript是一款通用脚本语言，植根于开发工具的核心深处，同时在Node.js等服务器端实现方案中也有所体现。除此之外，JavaScript还是微软开发技术方案的关键组成部分，若想对office进行扩展，不使用JavaScript是不行的。
　　虽然JavaScript已发展得非常强悍了，但其离完美还有一大段距离，特别是在构建包含大量客户端代码的web应用时，JavaScript的不足之处就非常明显。这个时候，配合TypeScript使用，JavaScript的缺陷就可完美解决。只需在TypeScript当中编写代码，而后将其交付至编译器，即可将所开发代码转换为能够运行在服务器端，又可以由客户端中的HTML进行调用的JavaScript形式方案。
　　TypeScript还将大量ECMAScript6功能加入到了JavaScript当中，具体包括类与模块，并尝试将这两种本是同根生的语言加以进一步融合，从而满足ECMAScript6的标准化方法要求。通过这种方式，大家可以利用TypeScript开发出能够为ECMAScript6所接纳的代码，同时充分发挥TypeScript的静态类型优势以提升代码安全性水平。
　　TypeScript允许我们面向变量进行类型声明，从而确保A始终属于整数而C始终属于字符串。虽然TyperScript的类型安全性并不像Fortran那么全面，但其仍然能够定义数字与字符串，并利用Boolean类型显著改善代码调试机制。除此之外，TyperScript还提供选项以实现类型推断，从而降低发生错误的可能性如果大家的代码为两个数字相加，那么TyperScript会认定其结果始终为数字。
　　通过使用TypeScript，开发者也可以将类型应用至数组中，或利用enums为特定变量名称设置值。如果不确定自己可能使用哪种类型，则可以将变量设定为any，在这种情况下TypeScript不会推断其具体类型、大家也不会因此遇到错误或者警告。TypeScript类型可以自行选择，因此也无需在编译或者运行之前，首先向现有代码添加各种类型，这将有效简化现有代码的相关迁移工作。
　　需要注意的是，现有JavaScript代码将成为TypeScript应用程序的一部分加以运行。而如果将代码迁移到ECMAScript6或者TypeScript语法形式下，大家即可享受到TypeScript的各种功能优势。而如果我们使用具备TypeScript识别能力的工具，则可以拥有面向VisualStudioIntelliSense的支持能力——其能够帮助我们对函数调用中的类型进行管理。除此之外，也可利用TypeScript声明文件向各类常用库及服务中快速添加类型支持，例如jQuery库。
　　拥有这样一款类型化且近似于JavaScript的语言能够给类使用与模块构建带来显著简化（与AngularJS当中的处理方式非常相近）。类型的存在能够确保某个警告类中的所有实例都通过字符串进行调用，这将帮助我们轻松构建起更理想的构造函数。大家可以将这种类型化构造函数调用视为一种契约，负责定义两段代码之间的相互作用——并帮助我们更轻松地在不同应用程序之间重复使用同一函数。
　　在函数调用当中定义类型正是创建接口结构的关键所在，能够使我们的代码更具面向对象特性。大家可以将函数元素明确定义为接口，并选择在函数当中使用更具描述性的名称，同时又不会影响到进行调用检查时向IntelliSense等函数所必需的工具发出通知。
　　以这种方式定义类型与接口，能够让多位开发人员轻松对大型JavaScript项目加以管理。而在函数与类设计中秉持“接口至上”的契约化方法，则能够帮助大家在对应用程序中特定部分进行优化时不至于影响到其余部分，或者从其他开发者手中借用某种接口定义并直接运用到其它实现方案当中。这种方式允许我们以更为高效的方式使用诸如Git以及GitHub等工具，从而在一套持续开发模型当中轻松管理多个代码分支。
　　如果使用的是Java语言或者C#语言，那么对TypeScript（以及ECMAScript6）的类实现机制一定不会感到陌生。大家可以在构造函数之内创建类，从而对方法中所使用的类型进行定义，最终利用类似的来处理各种内部对象。大家也可以利用继承、添加功能与重写方法等方式对类进行扩展。而更值得注意的是，TypeScript还支持常见于函数与接口当中的泛型——其能够帮助大家交付可重复使用的函数。
　　一旦掌握了TypeScript处理类与函数的方式，就可以着手将其组织在模块当中，在这里类与函数能够被拆分至多个文件当中。这显然是一种非常便捷的代码组织方案——举例来说，我们可以利用几个文件来处理购物车当中的不同函数。在此之后，大家可以对各个子模块进行分别更新，从而在特定函数中利用调整归零机制改善其性能水平，同时又不至于对其它函数造成影响。具备声明文件的JavaScript库也可以作为模块使用，因此大家能够在TypeScript应用程序当中充分发挥由此带来的诸多优势。
　　在大型web应用程序的开发中，对JavaScript的使用，以TypeScript作为切入点，将大大提高我们开发的效率。TypeScript不仅能够帮助我们在具备充分掌控能力且遵循可重复使用方针的前提下完成编码工作，同时也能够拥有一条通往ECMAScript6的理想路径。相信今后web前端开发，甚至整个web端所有网站的开发，都将逐步使用到TypeScript，以提高JavaScript的编程效果。

Electron使用TypeScript

需要先自行安装npm
手动创建一个如下结构文件目录(nodejs工程)用来运行electron,如下图:

命令行模式下,切换到工程根目录(这里就是test目录)

安装typescript:

安装electron:

自行建立上图中的各个文件 ,部分文件内容如下:
tsconfig.json

tsconfig更多具体配置参考官方文档:
***隐藏网址***

package.json

"main": "./build/app.js" : 表示程序主入口是build目录下的app.js, app.js文件由是由tsc编译src/app.ts得到
"prestart":"tsc" : 表示在执行npm start之前先执行tsc进行当前工程目录的ts文件编译工作.

更多具体配置参考官方文档:
***隐藏网址***

views/css目录和views/js目录 是具体业务逻辑:
index.html:

app.ts:

ClassA.ts:

在命令行模式中执行

显示结果:

使用vue3+ typeScript 开发小程序

要求是使用 vue3 + typescript 进行开发小程序和H5的跨端应用

在 uniapp 和 taro 这两个之中进行选择 在参了官方和社区示例后最终选择了 taro 。原因在于 uniapp 目前对于 vue3 的支持尚不完全比如说暂不支持 setup 语法糖对于h5的支持比较差 没有支持 vue3 的 ui 框架等等。

node.js

注意tarojs的版本 建议使用 taro 3.0.24 以上的版本
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules ，在 taro 项目的 config/index.js 中新增如下配置项：

如果出现类似 Could not find module View in @tarojs/components 的问题，请在进行如下设置：

***隐藏网址***