TypeScript

一.TypeScript介绍

问题
旧JS是弱类型语言，一个变量先后可以保存不同类型的数据——不可靠
旧JS是解释执行语言，一边解释，一边执行。一些低级错误无法提前检查和预警。
旧JS对对象要求不够严格，开发人员想怎么写就怎么写，不便于大项目协作。
TypeScript介绍
TypeScript 是 JavaScript 的一个超集
支持 ECMAScript 6 标准。
TypeScript 由微软开发。
设计目的是开发大型应用。

编译
TypeScript 不能被浏览器直接执行
但是TypeScript可以编译成纯 JavaScript
编译出来的 JavaScript 可以运行在任何浏览器或nodejs
新特性
• 类型检查
• 编译时错误检查
• 接口
• 访问修饰符
• 模块

二.安装和配置

安装
• 全局安装TypeScript语言的编译器:
npm i -g typescript
• 用vscode打开项目文件夹，右键选择在终端中打开，在终端中输入:
tsc -init
说明: tsc是ts语言的编译器, c是compile的意思，编译。
• 结果: 在当前项目文件夹中生成了tsconfig.json文件，其中保存的是将ts编译为js时所需的配置，比如:
– target: “ES5” , 在将ts文件编译为js文件时，编译为ES5的
版本，兼容更多浏览器
– module: "commenJS“, 将来ts文件中模块化开发所采用的标准。
– strict: true , 将ts文件编译js文件时，自动启用严格模式

我的第一个ts程序

• 新建1_first.ts文件

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

• 再编译ts文件为js文件:
– 打开命令行窗口，输入tsc 1_first.ts
• 结果: tsc编译器将.ts文件的内容翻译为等效的js文件，
保存在ts文件旁边的同名1_first.js文件中。

"use strict";
var a = 10;
console.log(a);

• 再用node运行1_first.js文件:
node 1_first.js
• 结果:

• 问题: 为什么在ts文件中写的很多ts语法，在js中都去掉了！
– 因为ts语言的检查，是发生在编译阶段！不是发生在运行阶段。
– 所以，ts中写的专用的语法是在编译阶段使用的，编译后，将来运行时，不用再重新检查。所以不需要特殊语法。

配置自动编译
• 在vscode中选择”终端”->“运行生成任务”->“tsc: 监视xxx“
• 结果: 只要一修改ts文件，一保存，就自动编译，自动创建js文件
• 不输入命令，运行js文件:
– 1). 先打开要运行的js文件
– 2). 点左边小虫+三角图标
– 3). 点运行和调试
– 4). 选择nodejs
– 5). 看到执行结果。

三.变量声明

变量
• 问题: 旧JS是弱类型语言，一个变量先后可以保存不同类型的数据——不可靠
• 解决: 今后，只要在ts中声明变量，都必须用”:数据类型”来规定。
• 标准语法：var或const或let 变量名:数据类型=初始值
• 结果: 将来这个变量只能保存规定的数据类型
• 比如:
– var a=10 要换成 let a:number=10; //正确
– a=“hello” 报错：不能将类型“string”分配给类型“number”

数据类型
• a. 基本类型: boolean, number, string
• b. 数组: 2种写法，结果一样
– 1). let 数组名: 数据类型[]=[值1, 值2, …]
– 2). let 数组名: Array<数据类型>=[值1, 值2,…]
• c. any: 可以匹配任何数据类型

函数
• 既没有参数，又没有返回值的函数，与普通js写法一样

• 如果函数有返回值:
– function 函数名():返回值的类型{
…
return 返回值 实际返回值的类型与声明函数时:后的返回值类型要一致。
}

• 如果函数有参数:
– function 函数名(形参1 :数据类型, 形参2 :数据类型, … ){
…
}
强调: ts中严格规定，一个函数定义了几个形参，就必须传几个实参！也数据类型也要对应！

• 如果既有形参，又有返回值？
– function 函数名(形参1 :数据类型, 形参2 :数据类型, … ):返回值类型
{
…
return 返回值
}

• 可选参数:
– ?表示参数可以没有。将来如果没有传入这个参数值，则参数值默认为undefined
– function 函数名(形参1:数据类型, 形参2 ?:数据类型) {
… …
}

• 默认值:
– function 函数名(形参1:数据类型, 形参2:数据类型 =默认值) {
… …
}
坑: 虽然可选参数的实参值将来也可能不提供，但是，因为有默认值保证，一定有值可用！所以，不能加?

• 实参值个数不确定:
– function 函数名(固定形参:数据类型, … 数组名 :数据类型[ ]){
}

四.重载

• 旧js中: 重载只定义一个函数，在函数内根据传入的参数不同，执行不
同的逻辑

– function pay( ){
if(arguments.length==0){
手机支付
}else if(arguments.length==1){
现金支付
}else{
刷卡支付
}
}
 pay();
 pay(100);
 pay("6553 1234", "123456")

• TS中: 2步
• 1). TS中要先定义多个同名函数的声明，只要形参列表不同即可！但是不要实现函数体。
– function 函数名():void;
– function 函数名(形参:数据类型):void;
– 强调: 这里只是不同重载版本的声明，不包含函数定义。
– void代表这个函数没有返回值。
– 如果函数有返回值，则必须将void改为返回值的具体类型

• 2). 定义一个可实际执行多种任务的函数来支持上方多种重
载的情况:

function 函数名(形参?:数据类型){
if(形参===undefined){ //说明用户调用的是第一个重载版本
//没有传入任何实参
//就执行一项操作
}else{
//说明用户调用的是第二个重载版本，传了一个实参
//就执行另一项操作
}
}

五.class

• 定义class:

class 类型名{
属性名1:数据类型=初始值;
属性名2:数据类型=初始值;
constructor(形参1:数据类型, 形参2:数据类型){
this.属性名1=形参1;
this.属性名2=形参2;
}
方法名():数据类型{ ... }
}

强调: TS中class的属性，必须在构造函数外部上方提前定义，并指定数据类型，才能在构造函数中this.属性名=赋值

六.两种类型间继承

• 子类型class:

class 子类型名 extends 父类型名{
子类型属性: 数据类型=初始值;
constructor(形参1:数据类型, 形参2:数据类型, 形参3:数据类型) {
super(形参1, 形参2);
this.子类型属性=形参3;
}
方法名: 数据类型()
}

七.访问修饰符

• 问题: class中的所有成员无论在class内，还是在子类型内，还是在全局，都可用”this.属性名”或”父对象.属性名”方式访问，没有限制！但是有些数据，不想让所有人轻易都知道！
• 解决: 访问控制修饰符
– 访问修饰符，是专门修饰一个属性或一个方法的可用范围的关键字
• 如何:
– 访问控制修饰符 属性名:数据类型=初始值
• 包括: 3种:
– 1). public 公有 (默认), 表示子类型和类外部都可访问到的类成员
– 比如:


– 2). protected 受保护，表示只有父子类型范围内才能使用，外部不能用。
– 比如:

– 3). private 私有，表示仅class内可用，子类型和外部都不能用！
– 比如:

八.接口

• 问题: 在团队中，上级分配了开发任务给下级，如何保证下级一定按上级要求实现功能？
• 解决: 今后，只要希望开发人员一定要按照架构师的要求实现程序结构时，都用接口来规范！
• 今后，只要希望别人一定要按照你的要求实现程序时，都用接口来规范！
• 如何: 2步:
– 1). 定义接口:
– interface I接口名{ —— 合同
规定的属性名: 类型;
规定的方法名(参数:数据类型):返回值;
}
– 2). 具体实现的人要"实现接口“,定义一个符合接口要求的class
– class 类型名 implements I接口名{
必须包含接口中规定的属性和方法
}

九.模块化开发

问题
• 旧js中，所有js文件，都要集中引入到.html文件中，才能运
行• 不符合实际需求！极其不直观！
• 解决: 模块化开发
• 优点：哪个文件想使用另一个文件的内容，直接引入即可！
不用经过任何第三方

如何
• 只导出一个类型/接口:默认导出
– 先创建类型/接口
– 再: export default 类型名/接口名
– 引入: import 类型名 from “相对路径”

• 导出多个类型/接口:
– 先创建多个类型/接口
– 再: export { 类型名, … } – 引入: import { 类型名, … } from “相对路径”