一、TypeScript概述
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 (ES6)标准。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
语言特性
TypeScript 是一种给 JavaScript 添加特性的语言扩展,其增加的功能包括:
-
类型批注和编译时类型检查
-
类型推断
-
类型擦除
-
接口
-
枚举
-
Mixin
-
泛型编程
-
名字空间
-
元组
-
Await
JavaScript 与 TypeScript 的区别
TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。
二、TypeScript安装及环境验证
接下来介绍TypeScript 环境的安装,我们需要使用到 npm 工具安装,npm是node的包管理器,在安装NodeJS时,会同时安装npm工具,关于NodeJS安装参考:
Windows下NodeJS的安装和验证
打开Windows下的命令提示符,输入命令
npm install -g typescript
进行typescript工具的安装
安装完成以后,接着输入命令
tsc -v
查看typescript编译器的版本信息
三、TypeScript初步入门使用
开发工具选用: Visual Studio Code,已安装汉化插件
开发工具版本: VSCodeSetup-x64-1.51.1.exe
开发环境版本: node-v14.15.0-x64.msi
开发工具使用:
按住快捷键 CTRL + SHIFT + ~ 调出当前项目的终端,我们需要在终端中输入命令,来执行 js目录 中的已经编译好的代码。
第五章 TypeScript4数据类型
变量格式一:
let 变量名: 变量类型 = 初始化值;
变量格式二:
let 变量名: 变量类型 | undefined;
变量名 = 变量值;
5.1、布尔类型
let flag: boolean = true;
console.log(flag);
5.2、数字类型
整数型:
let num: number = 123;
console.log(num);
浮点型:
let num: number = 3.1415926;
console.log(num);
5.3、字符串类型
let str: string = "Hello,TypeScript";
console.log(str);
5.4、数组类型
第一种定义数组的方式:以数字类型数组为例
let arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);
第二种定义数组的方式:以数字类型数组为例
let arr: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);
5.5、元组类型
元组属于数组的一种,元组中的元素可以不必全部保持类型一致!
let user: [number, string];
let userId = 10086;
let userName = "Nick";
let randomBoolean = true;
user = [userId, userName]; // 正确
user = [userId, randomBoolean]; // 错误
5.6、枚举类型
枚举类型的介绍:
随着计算机的不断普及,程序不仅只用于数值计算,还更广泛地用于处理非数值的数据。
例如:性别、月份、星期几、颜色、单位名、学历、职业等,都不是数值数据。
在其它程序设计语言中,一般用一个数值来代表某一状态,这种处理方法不直观,易读性差。
如果能在程序中用自然语言中有相应含义的单词来代表某一状态,则程序就很容易阅读和理解。
也就是说,事先考虑到某一变量可能取的值,尽量用自然语言中含义清楚的单词来表示它的每一个值,这种方法称为枚举方法,用这种方法定义的类型称枚举类型。
枚举类型的定义:
enum 枚举名 {
标识符[= 整型常数/字符串],
标识符[= 整型常数/字符串],
...
标识符[= 整型常数/字符串],
};
枚举类型的示例:
enum Flag {
success,
error,
overtime
};
let s: Flag = Flag.overtime;
console.log(s);//2
代码解读:如果标识符没有赋值,它的值就是下标。
enum Flag {
success = 200,
error = 404,
overtime = 500
};
let s: Flag = Flag.overtime;
console.log(s);//500
代码解读:如果标识符已经赋值,它的值就是被赋的值。
enum Flag {
success,
error = 100,
overtime
};
let s: Flag = Flag.overtime;
console.log(s);//101
代码解读:如果标识符没有赋值,它的值就是下标,如果从中间突然指定了一个值,那么它之后的值都会从当前值开始重新计算。
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
let d: Direction = Direction.Up;
console.log(d);//UP
5.7、null类型
let n: null = null;
5.8、undefined类型
let u: undefined = undefined;
5.9、any类型
TypeScript 中的 any 类型表示任意数据类型。
enum Flag {
success,
error,
overtime
};
let flag: any = true;//布尔型
let num: any = 123;//数字型
let str: any = 'Hello,TypeScript';//字符型
let arr: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];//数组型
let tuple: any = [10086, 'Nick'];//元组型
let e: any = Flag.success;//枚举型
let n: any = null;//null型
let u: any = undefined;//undefined型
5.10、void类型
TypeScript 中的 void 类型表示没有任何类型,一般用于定义方法的时候方法没有返回值。
function success(): void {
console.log('执行成功了,我不需要返回值');
}
5.11、never类型
TypeScript 中的 never 类型是任何类型的子类型,也可以赋值给任何类型,但是没有类型是 never 的子类型或可以赋值给 never 类型, 即使 any 类型也不可以赋值给never。这意味着声明 never 类型的变量只能被 never 类型所赋值。
function error(): never {
throw new Error('抛出错误了');
}
5.12、组合类型
TypeScript 中支持一个变量可以赋予多种不同的变量类型,多个变量类型使用 | 分隔。
let num: number | null | undefined;
num = 3;
console.log(num);
num = null;
console.log(num);
num = undefined;
console.log(num);