TypeScript入门
TypeScript入门手册
- 1、TypeScript简介
-
- 1.1、TypeScript概念
- 1.2、语言特性
- 1.3、JavaScript和TypeScript的区别。
- 2、TypeScript安装
- 3、TypeScript基础语法
-
- 3.1、TypeScript程序由以下几个部分组成：
- 3.2、TypeScript保留关键字
- 3.3、空白和换行
- 3.4、TypeScript区分大小写
- 3.5、分号是可选的
- 3.6、TypeScript注释
- 3.7、TypeScript与面向对象
- 4、TypeScript基础类型
-
- 4.1、 Null和Undefined
- 4.2、never类型
- 5、TypeScript变量声明
-
- 5.1、变量声明
- 5.2、类型断言（Type Assertion）
- 5.3、类型推断
- 5.4、变量作用域
- 6、TypeScript运算符
-
- 6.1、算术运算符
- 6.2、关系运算符
- 6.3、逻辑运算符
- 6.4、短路运算符（&& 与 ||）
1、TypeScript简介
1.1、TypeScript概念
- TypeScript是JavaScript的一个超集，支持ECMAScript 6 标准。
- TypeScript由微软开发的自由和开源的编程语言。
- TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上。
1.2、语言特性
TypeScript是一种给JavaScript添加特性的语言扩展。增加的功能包括：
- 类型批注和编译时类型检查。
- 类型推断。
- 类型擦除。
- 接口。
- 枚举。
- Mixin。
- 泛型编程。
- 名字空间。
- 元组。
- Await。
以下功能是从ECMA 2015反向移植而来： - 类。
- 模板。
- lambda函数的箭头语法。
- 可选参数以及默认参数。
1.3、JavaScript和TypeScript的区别。
TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作，无需任何修改，TypeScript通过类型注解提供编译时静态类型检查。
TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译。
// 第一个TypeScript实例：
const hello:string = 'Hello TypeScript! Hello World!'
console.log(hello)
2、TypeScript安装
NPM安装TypeScript
如果你的本地环境已经安装了npm工具，可以使用以下命令来安装。
- 使用国内镜像
npm config set registry https://registry.npmmirror.com
- 安装TypeScript
npm install -g typescript
- 安装完成后我们可以使用tsc命令来执行TypeScript的相关代码，以下是版本号：
tsc -v
- 然后我们新建一个app.ts的文件，代码如下：
var message:string = 'Hello World!'
console.log(message)
通常我们使用.ts作为TypeScript代码的文件名。
然后执行以下命令将TypeScript转换为JavaScript代码：
tsc app.ts
- 这时候在当前目录下（与app.ts同一目录）就会生成一个app.js文件，代码如下：
var message = 'Hello World!'
console.log(message)
- 使用node命令来执行app,js文件。
node app.js
3、TypeScript基础语法
3.1、TypeScript程序由以下几个部分组成：
- 模块。
- 函数。
- 变量。
- 语句和表达式。
- 注释。
我们可以同时编译多个ts文件
tsc file1.ts file2.ts file3.ts
- tsc 常用编译参数如下表所示：
- –help： 显示帮助信息。
- –module： 载入扩展模块。
- –target：设置ECMA版本。
- –declaration： 额外生成一个.d.ts扩展名文件。
tsc ts-hw.ts --declaration
// 以上命令会生成ts-hw.d.ts、ts-hw.js两个文件。
- –removeComment：删除文件的注释。
- –out：编译多个文件并合并到一个输出的文件。
- –sourcemap：生成一个sourcemap(.map)文件。
sourcemap是一个储存源代码与编译代码对应位置映射的信息文件。 - –module nolmplicitAny：在表达式和声明上有隐含的any类型时报错。
- –watch：在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。
3.2、TypeScript保留关键字
3.3、空白和换行
TypeScript 会忽略程序中出现的空格、制表符和换行符。
空格、制表符通常用来缩进代码，使代码易于阅读和理解。
3.4、TypeScript区分大小写
TypeScript 区分大写和小写字符。
3.5、分号是可选的
每行指令都是一段语句，你可以使用分号或者不使用，分号在TypeScript中是可选的，建议使用。
- 如果语句写在同一行则一定需要使用分号来分割，否则会报错：
console.log('aaa');console.log('bbb');
3.6、TypeScript注释
注释是一个良好的习惯，虽然很多程序员不喜欢写注释，但还是建议你在写每段代码写上文字说明。
注释可以提高程序的可读性。
注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。
编译器会忽略注释。
- TypeScript支持两种类型的注释。
- 单行注释（//）：在//后面的文字都是注释内容。
- 多行注释（/**/）：这种注释可以跨越多行。
3.7、TypeScript与面向对象
面向对象是一种对现实世界理解和抽象的方法。
TypeScript 是一种面向对象的编程语言。
面向对象主要有两个概念：对象和类。
- 对象：对象是类的一个实例，有状态和行为。例如，一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。
- 类：类是一个模板，它描述一类对象的行为和状态。
- 方法：方法是类的操作的实现步骤。
TypeScript 面向对象编程实例：
class Site {
name():void {
console.log('aaa')
}
}
var obj = new Site();
obj.name()
以上实例定义了一个类Site，该类有一个方法name()，该方法在终端上输出字符串aaa。
new 关键字创建类的对象，该对象调用方法name()。
编译后生成的JavaScript代码如下：
var Site = /** @class */ (function () {
function Site() {
}
Site.prototype.name = function () {
console.log('aaa')
}
return Site;
}());
var obj = new Site();
obj.name();
4、TypeScript基础类型
- any：任意类型。声明为any的变量可以赋予任意类型的值。
- number：数字类型。双精度64位浮点值，它可以用来表示整数和分数。
- string：字符串类型。一个字符系列，使用单引号（'）或者双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
- boolean：布尔类型。表示逻辑值：true和false。
- 无：数组类型。声明变量为数组。
// 在元素类型后面加上[]
let arr:number[] = [1, 2];
// 或者使用数组泛型
let arr:Array<number> = [1, 2];
- 无：元组。元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
let x:[string, number];
x = ['aaa', 1] // 运行正常
x = [1, 'aaa'] // 报错
console.log(x[0]) // 输出aaa
- enum：枚举。枚举类型用于定于数值集合。
enum Color {Red, Green, Blue};
let c:Color = Color.Blue;
console.log(c) // 输出2
- void：void。用于标识方法返回值的类型，表示该方法没有返回值。
- null：null。表示对象值缺失。
- undefined：undefined。用于初始化变量为一个未定义的值。
- never：never。never 是其它类型（包括null和undefined）的子类型，代表从不会出现的值。
- 注意⚠️：TypeScript和JavaScript没有整数类型。
- Any类型：
任意值是TypeScript针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。
1、变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码：
let x:any = 1; // 数字类型
x = ‘lgg’； // 字符串类型
x = false；// 布尔类型
改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查，示例代码如下：
let x:any = 4;
x.ifItExists(); // 正确，ifItExists方法在运行时可能存在，但这里并不会检查。
x.toFixed(); // 正确。
4.1、 Null和Undefined
1、null
在JavaScript中null表示“什么都没有”。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用typeof检测null返回的是object。
2、undefined
在JavaScript中，undefined是一个没有设置值的变量。
typeof一个没有值的变量会返回undefined。
Null和Undefined是其他任何类型（包括void）的子类型，可以赋值给其他类型，如数字类型，此时，赋值后的类型会变成null或undefined。而在TypeScript中启用严格的空jiao yan空校验（–strictNullChecks）特性，就可以使得null和undefined只能被赋值给void或本身对应的类型，示例代码如下：
// 启用 --strictNullChecks
let x：number；
x = 1； // 编译正确
x = undefined； // 编译错误
x = null； // 编译错误
上面的例子中变量x只能是数字类型。如果一个类型可能出现null或者undefined，可以用｜来支持多种类型，示例代码如下：
// 启用 --strictNullChecks
let x:number | null | undefined;
x = 1; // 编译正确
x = undefined; // 编译正确
x = null; // 编译正确
4.2、never类型
never是其它类型（包括null和undefined）的子类型，代表从不会出现的值。这意味着声明为never类型的变量只能被never类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：
let x : never;
let y : number;
// 编译错误，数字类型不能转为never类型
x = 123;
// 运行正确，never类型可以赋值给never类型
x = (() => { throw new Error('exception') })（）；
// 运行正确，never类型可以赋值给 数字类型
y = (() => { throw new Error('exception') })（）；
// 返回值为never的函数可以抛出异常的情况
function error(message: string): never {
throw new Error(message)
}
// 返回值为never的函数可以是无法被执行到的终止点情况
function loop():never {
while (true) {}
}
5、TypeScript变量声明
5.1、变量声明
变量是一种使用方便的占位符，用于引用计算机内存地址。
我们可以把变量看作存储数据的容器。
TypeScript变量的命名规则：
- 变量名称可以包含数字和字母。
- 除了下划线_和美元$符号外，不能包含其他特殊字符，包括空格。
- 变量名不能以数字开头。
变量使用前必须先声明，我们可以使用var来声明变量。
我们可以使用以下四种方式来声明变量：
- 声明变量的类型及初始值：
var [变量名]:[类型] = 值；
例如：
var userName:string = "lgg";
- 声明变量的类型，但没有初始值，变量值会设置为undefined:
var [变量名]:[类型]；
例如：
var userAge:number;
- 声明变量并初始值，但不设置类型，该变量可以是任意类型：
var [变量名] = 值；
例如：
var userName = 'lgg';
- 声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为undefined：
var [变量名]；
例如：
var name;
实例：
var uname:string = 'lgg';
var score1:number = 18;
var score2:number = 10.90;
var sum = score1 + score2;
console.log("名字：" + uname)
console.log("第一个科目成绩：" + score1)
console.log("第二个科目成绩：" + score2)
console.log("总成绩：" + sum)
**注意：**变量不要使用name否则会与DOM中的全局window对象下的name属性出现了重名。
使用tsc命令编译以上代码，得到如下JavaScript代码：
var uname = 'lgg';
var score1 = 18;
var score2 = 10.90;
var sum = score1 + score2;
console.log("名字: " + uname);
console.log("第一个科目成绩: " + score1);
console.log("第二个科目成绩: " + score2);
console.log("总成绩: " + sum);
执行该JavaScript代码输出结果为：
名称：lgg
第一科目成绩：18
第二科目成绩：10.90
总成绩：28.90
TypeScript遵循强类型，如果将不同的类型赋值给变量会编译错误，如下实例：
var num:number = "hello" // 这个代码会编译错误
5.2、类型断言（Type Assertion）
类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。
<类型>值
// 或
值 as 类型
// 实例
var str = '1';
var str2:number = <number> <any> str // str、str2是string类型
console.log(str2)
TyprScripts是怎么确定单个断言是否足够：
当S类型是T类型的子集，或者T类型是S类型的子集时，S能被成功断言成T。这是为了在进行类型断言时提供额外的安全性，完全毫无根据的断言是危险的，如果你想这么做，你可以使用any。
它之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。
编译后，以上代码会生成如下JavaScript代码：
var str = '1';
var str2 = str; // str、str2是string类型
comsole.log(str2)
// 执行输出结果为
1
5.3、类型推断
当类型没有给出时，TypeScript编译器利用类型推断来推断类型。
如果由于缺乏声明而不能推断出类型，那么他的类型被视作默认的动态any类型。
var num = 2; // 类型推断为number
console.log("num 变量的值为：" + num)；
num = "12"; // 编译错误
console.log(num);
- 第一行代码声明了变量num并=设置初始值为2。注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为2，num设置为number类型。
- 第三行代码，当我们再次为变量设置字符串类型的值时，这时编译会错误。因为变量已经设置为了number类型。
error ts2322: Type '"12"' is not assignable to type 'number'
5.4、变量作用域
变量作用域指定了变量定义的位置。
程序中变量的可用性由变量作用域决定。
TypeScript有以下几种作用域：
- 全局作用域 - 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
- 类作用域 - 这个变量也可以称为字段。类变量声明在一个类里头，但在类的方法外面。该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
- 局部作用域-局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。
var global_num = 12 // 全局变量
class Numbers {
num_val = 13; // 实例变量
static sval = 10; // 静态变量
storeNum():void {
var local_num = 14; // 局部变量
}
}
console.log("全局变量为："+ global_num);
console.log(Numbers.sval); // 静态变量
var obj = new Numbers();
console.log("实例变量："+ obj.num_val)
以上代码使用tsc命令编译为Javascript代码为：
var global_num = 12; // 全局变量
var Numbers = /** @class */(function(){
function Numbers() {
this.num_val = 13; // 实例变量
}
Numbers.prototype.storeNum = function() {
var local_num = 14; // 局部变量
}；
Numbers.sval = 10; // 静态变量
return Numbers；
}())
执行以上的JavaScript代码，输出结果为：
全局变量： 12
10
实例变量：13
6、TypeScript运算符
运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。
考虑一下运算：
7 + 5 = 12
以上实例中7、5和12是操作数。
运算符+用于加值。
运算符=用于赋值。
TypeScript只要包含以下几种运算：
- 算术运算符
- 逻辑运算符
- 关系运算符
- 按位运算符
- 赋值运算符
- 三元/条件运算符
- 字符串运算符
- 类型运算符
6.1、算术运算符
假定y=5，看以下结果：
- 加法 +
x=y + 2; x为7； y为5. - 减法 -
x=y - 2； x为3； y为5. - 乘法 *
x=y*2； x为10； y为5. - 除法 /
x=y/2； x为2.5；y为5. - 取模（余数） %
x=y%2； x为1，y为5. - 自增 ++
x=++y； x为6； y为6.
x=y++； x为5； y为6. - 自减 –
x=–y； x为4； y为4.
x=y–； x为5； y为4.
6.2、关系运算符
关系运算符用于计算结果是否为true或者false。
x=5，下面的表格解释了关系运算符的操作：
- 等于 ==
x8; 结果：false
x5；结果；true - 不等于 !=
x!=8; 结果：true - 大于 >
x>8; 结果：false - 小于 <
x<8; 结果： true - 大于等于 >=
x >= 8; 结果：false - 小于等于 <=
x <= 8; 结果：true。
6.3、逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
给定x=6以及y=3，下表解释了逻辑运算符：
- and &&
(x < 10 && y > 1) 为true - or ||
（x == 5 || y == 5）为false - not !
!(x == y) 为true
6.4、短路运算符（&& 与 ||）
&&与||运算符可用于组合表达式。&&运算符只有在左右两个表达式都为true时才返回true。
var a=10;
var result = (a<10&&a>5)
以上实例中a < 10与a > 5是使用了&&运算符的组合表达式，第一个表达式返回了false，由于&&运算需要两个表达式都为true，所以如果第一个为false，就不再执行后面的判断（a >5跳过计算），直接返回false。
||运算符重要其中一个表达式为true，则该组合表达式就会返回true。
考虑一下实例：
var a = 10;
var result = (a > 5 || a < 10)
以上实例中a>5与a<10是使用了||运算符的组合表达式，第一个表达式返回了true，由于 || 组合运算只需要一个表达式为 true，所以如果第一个为 true，就不再执行后面的判断(a < 10 跳过计算)，直接返回 true。