TypeScript学习

介绍

• 通过本篇文章

• 你可以通过了解TS和JS

• 不同之处和相同之处来学习TS

TS和JS的不同点

1. 类型注解

这是TS和JS的区别之处

类型注解:是一种为变量添加类型约束的方式

• JS声明变量

  let age = 19;
  

• TS声明变量

• 程序员和TS有个约定.

//程序员 和 TS 约定: 变量的 类型 为 Number(数值类型)
let age:number = 19;

• 重要 : 约定了什么类型,就只能给变量赋什么类型的值

// × 错误演示
age = "Hello TS"

我们可以使用以下四种方式来声明变量：

• 声明变量的类型及初始值：

var [变量名] : [类型] = 值;

• 例如：

var uname:string = "Runoob";

• 声明变量的类型，但没有初始值，变量值会设置为 undefined：

var [变量名] : [类型];

• 例如：

var uname:string;

• 声明变量并初始值，但不设置类型，该变量可以是任意类型：

var [变量名] = 值;

• 例如：

var uname = "Runoob";

• 声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var [变量名];

• 例如：

var uname;

2. 变量在终端打印

代码首先通过 tsc 命令编译：

指令1:

tsc 文件名.ts

在终端使用此指令后我们可以得到 ts 被tsc转换的 js 文件

最后我们使用 node 命令来执行该 js 代码。

指令2:

node 文件名.js

就可以在终端得到打印结果.

ts-node 文件名

3. TS中的数据类型

• TypeScript中的数据类型主要分为两大类:

  ​ 1. 原始类型(基本数据类型) number / string / boolean / undefined / null

  ​ 2. 对象类型(复杂数据类型)

TypeScript 包含的数据类型如下表:

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。 let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob
枚举	enum	枚举类型用于定义数值集合。 enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2
void	void	用于标识方法返回值的类型，表示该方法没有返回值。function hello(): void { alert("Hello Runoob"); }
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

4. Any 类型详情

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。

1、变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查，示例代码如下：

let x: any = 4;
x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确

定义存储各种类型数据的数组时，示例代码如下：

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

5. 位运算符

位操作是程序设计中对位模式按位或二进制数的一元和二元操作。

6. 带参数函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以向函数发送多个参数，每个参数使用逗号 , 分隔：

语法格式如下所示：

function func_name( param1 [:datatype], param2 [:datatype]) {
}

• param1、param2 为参数名。
• datatype 为参数类型。

TypeScript

function add(x: number, y: number): number { return x + y; } console.log(add(1,2))

• 实例中定义了函数 add()，返回值的类型为 number。
• add() 函数中定义了两个 number 类型的参数，函数内将两个参数相加并返回。

编译以上代码，得到以下 JavaScript 代码：

JavaScript

function add(x, y) { return x + y; } console.log(add(1, 2));

输出结果为：

3

7. 可选参数和默认参数

可选参数

在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。

实例

TypeScript

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // 错误，缺少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");         // 正确

注意:其实在js使用了es6的 结构赋值 ,

可以实现参数中设置默认值的操作

TS和JS的相同点

1. 变量的命名规则和规范

规则:

• 变量名称只能出现: 数字 字母 下划线(_) 美元符号($) 并且不能以数字开头

• 变量的名称区分大小写

规范:

• 变量名要有意义,顾名思义
• 推荐使用驼峰命名法(首字母小写,后面每个单词首字母大写).

2. 空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。

空格、制表符通常用来缩进代码，使代码易于阅读和理解。

3. TypeScript 保留关键字

TypeScript 保留关键字如下表所示：

break	as	catch	switch
case	if	throw	else
var	number	string	get
module	type	instanceof	typeof
public	private	enum	export
finally	for	while	void
null	super	this	new
in	return	true	false
any	extends	static	let
package	implements	interface	function
new	try	yield	const
continue	do

4. 算术运算符

假定 y=5，下面的表格解释了这些算术运算符的操作：

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
x=y++	5	6
–	自减	x=–y	4	4
x=y–	5	4

5. 关系运算符

关系运算符用于计算结果是否为 true 或者 false。

x=5，下面的表格解释了关系运算符的操作：

运算符	描述	比较	返回值
==	等于	x==8	false
x==5	true
!=	不等于	x!=8	true
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

6. 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x5 || y5) 为 false
!	not	!(x==y) 为 true

7. 条件语句和循环

• TS和JS的条件语句和循环是一模一样的

• 几乎没有太大的差别

总结:

本篇博客通过区分TS和JS的区别
让我们了解TS的知识