文章目录
1 前期准备工作
1.1 TypeScript的简介
- TypeScript是JavaScript类型的超集,可以搬移成纯JavaScript
- TypeScript可以在任何浏览器、任何计算机和操作系统上运行,由微软公司开发并开源
1.2 TypeScript与JavaScript的关系
- TypeScript是JavaScript的超集,是以JavaScript为基础构建的语言
- TypeScript对JS进行了扩展,向JS中引入了类型的概念,并添加了很多的新的特性
- TS代码不能直接运行,需要通过编译器编译成JS代码,然后交由JS解析器执行
- TS完全兼容JS,换而言之,任何JS代码都可以直接当TS使用
- 相对于JS,TS拥有静态类型,更严格的语法,更强大的功能
1.3 TypeScript的优点
- TS可以在代码执行前就完成代码的检查,减少了运行时异常出现的几率
- TS可以编译成任意版本的JS代码,可以有效地解决不同JS运行环境的兼容问题
- 同样的功能,TS的代码量要大于JS,但由与TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS要远远胜与JS、
1.4 TypeScript开发环境搭建
- 下载Node.js(建议用稳定版)
- 安装完在命令行输入node -v 查看node版本
如果出现版本信息,证明node安装成功 - 使用npm全局安装typescript
在命令行输入 npm i -g typescript
然后在命令行输入tsc,出现版本信息以及操作提示证明安装成功 - 创建一个简单的ts文件,注意后缀名为.ts
- 在命令行窗口进行编译
进到所在的目录,输入命令tsc helloTS.ts
完成后可以看到以及编译成功的js文件
至此TypeScript的环境搭建完毕
2 基本类型
2.1 类型声明
-
类型声明是TS中非常重要的一个特点,也是TS对JS改造的最重要的点
-
通过类型声明可以指定TS中变量(参数、形参)的类型
-
指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合声明,符合则赋值,否则报错
-
简而言之,类型声明给变量设置了类型,使得变量之恩呢存储某种类型的值
-
语法
自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
- 所以当变量和声明自动进行时,可以省略掉类型声明
let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... }
//声明一个变量a,同时指定它的类型为number let a:number; //a 的类型设置为number,在以后的使用过程中a的值只能时数字 a=22; a=33; // a="hello" //此行代码会报错,因为变量a的类型时number,不能赋值字符串 let b: string; b = 'hello'; // b = 123; //此行代码会报错,因为变量b的类型时string,不能赋值数字 //声明完变量直接赋值 let c:boolean = false; // 如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测 let d = false; // d="abc" //此行会报错 d = true; // JS中的函数是不考虑参数的类型和个数的 // function sum(a, b){ // return a + b; // } // console.log(sum(123, 456)); // 579 // console.log(sum(123, "456")); // "123456" //参数类型时number,返回值类型也是number function sum (a:number,b:number):number{ return a+b; } let result = sum(123,456) console.log(result);
2.2 基本类型种类
类型 | 例子 | 描述 |
---|---|---|
number | 1, -33, 2.5 | 任意数字 |
string | ‘hi’, “hi”, hi |
任意字符串 |
boolean | true、false | 布尔值true或false |
字面量 | 其本身 | 限制变量的值就是该字面量的值 |
any | * | 任意类型 |
unknown | * | 类型安全的any |
void | 空值(undefined) | 没有值(或undefined) |
never | 没有值 | 不能是任何值 |
object | {name:‘孙悟空’} | 任意的JS对象 |
array | [1,2,3] | 任意JS数组 |
tuple | [4,5] | 元素,TS新增类型,固定长度数组 |
enum | enum{A, B} | 枚举,TS中新增类型 |
-
number
let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; let big: bigint = 100n;
-
boolean
let isDone: boolean = false;
-
string
let color: string = "blue"; color = 'red'; let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${ fullName}.I'll be ${ age + 1} years old next month.`;
-
字面量
也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围
let color: 'red' | 'blue' | 'black'; let num: 1 | 2 | 3 | 4 | 5;
-
any
let d: any = 4; d = 'hello'; d = true;
-
unknown
let notSure: unknown = 4; notSure = 'hello';
-
void
let unusable: void = undefined;
-
never
function error(message: string): never { throw new Error(message); }
-
object(没啥用),一般是直接在{}里面指定对象的类型
let obj: object = { };
-
array
let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];
-
tuple
let x: [string, number]; x = ["hello", 10];
-
enum
num Color { Red, Green, Blue, } let c: Color = Color.Green; enum Color { Red = 1, Green, Blue, } let c: Color = Color.Green; enum Color { Red = 1, Green = 2, Blue = 4, } let c: Color = Color.Green;
-
类型断言
有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:
-
第一种
let someValue: unknown = "this is a string"; let strLength: number = (someValue as string).length;
-
第二种
let someValue: unknown = "this is a string"; let strLength: number = (<string>someValue).length;
-
//可以直接使用字面量进行类型声明
let a:10
a = 10
//可以使用|来连接多个类型(联合类型)
let b:"male"|"female";
b = "male";
b = "female"
// b = "hello" //出错,因为hello不属于上面这两个值
let c: boolean | string;
c = true;
c = 'hello'
// any 表示的是任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时,不建议使用any类型
// let d: any;
// 声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any (隐式的any)
let d;
d = 10;
d = 'hello';
d = true;
// unknown 表示未知类型的值
let e: unknown;
e = 10;
e = "hello";
e = true;
let s:string;
// d的类型是any,它可以赋值给任意变量
// s = d;
e = 'hello';
//s = e //报错 因为s的的类型是字符串,而e的类型是unknown,两者的类型不等
// unknown 实际上就是一个类型安全的any
// unknown类型的变量,不能直接赋值给其他变量
if(typeof e === "string"){
//只有类型是string是才能赋值
s = e;
}
// 类型断言,可以用来告诉解析器变量的实际类型
/*
* 语法:两种
* 变量 as 类型
* <类型>变量
* 两种用法的效果是一样的
* */
s = e as string;
s = <string>e
// void 用来表示空,以函数为例,就表示没有返回值的函数
function fn(): void{
}
// never 表示永远不会返回结果
function fn2(): never{
throw new Error(