这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
既然我已经踏上这条道路,那么,任何东西都不应妨碍我沿着这条路走下去。——康德
定义
介绍
- 程序更容易理解——如变量的类型只有在程序运行时才确定,如函数的参数、返回值等
- 效率更高
- 更少的错误,可以杜绝一些常见错误
- 非常好的包容性。TS 是JS超级,完全兼容 javascript
- 但增加了一定的学习成本
二、TypeScript 的特点 1.始于JavaScript,归于JavaScript TypeScript 可以编译出纯净、 简洁的 JavaScript 代码,并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3(或更高版本)的JavaScript 引擎中。
2.强大的类型系统 类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。
3.先进的 JavaScript TypeScript 提供最新的和不断发展的 JavaScript 特性,包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性,比如异步功能和 Decorators,以帮助建立健壮的组件。
三、安装 TypeScript
命令行运行如下命令,全局安装 TypeScript:
npm install -g typescript
安装完成后,在控制台运行如下命令,检查安装是否成功(3.x):
tsc -V
四、编译代码的方式
1.手动编译代码 我们使用了 .ts 扩展名,但是这段代码仅仅是 JavaScript 而已。
在命令行上,运行 TypeScript 编译器:
tsc 文件名.ts
输出结果为一个 文件名.js 文件,它包含了和输入文件中相同的 JavsScript 代码。
在命令行上,通过 Node.js 运行这段代码:
node 文件名.js
控制台输出:
js 的执行内容
2.vscode自动编译 1). 生成配置文件tsconfig.json
tsc --init
2). 修改tsconfig.json配置
"outDir": "./js",
"strict": false,
3). 启动监视任务:
终端 -> 运行任务 -> 监视tsconfig.json
五、类型注解
TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式
六、基本语法
一、基本类型
1、对于TypeScript,首先要了解的是,TypeScript 可以在 JavaScript 的基础上,对变量的数据类型加以限制。TypeScript 中最基本的数据类型包括布尔、数字、字符串、null、undefined,这些都很好理解。在下面的代码中,我们分别定义了这几个数据类型的变量。当修改数据类型时就会报错。
let myName:string = 'Lisa';
let myAge:number=18;
// myAge='20' 类型报错
let isDone:boolean = true
let myAddress: undefined
let timer:null = null;
let me:[string,number] = ['lisa', 18]
// me[0] = 1 类型报错
2、不知道什么类型时,可以使用any作为这个变量的类型。可以用any 标记任何属性,可以修改任何数据,访问任何方法也不会报错。也就是说 在TS中,当你把变量的类型标记为any后,这个变量的使用就和JS没啥区别,错误只会在浏览器里运行的时候才会提示。
二、enum枚举
3、我们可以使用enum去定义[枚举类型],这样可以把类型限制在指定的场景之内(enum类型是对JavaScript标准数据类型的一个补充)。下面的代码中我们可以把颜色限制在green、blue和yellow三个值之内。
三、基础类型组合新的类型
4、然后我们可以通过学到的这些基础类型,通过组合的方式组合出新的类型,最常见的组合方式 就是使用|来实现类型联合。 course1变量类型为字符串或数字,赋值为这两个类型都不会报错,和可以用来限制变量只能赋值为几个字符串的一个,score的取值只能是代码中三个值之一。
四、interface接口
5、通过interface接口(此接口跟其他语法不一样)可以定义对象的类型限制。下面代码中定义了http请求的入参类型,姓名时字符串,存款使用number[]语法定义类型为数字组成的数组;头像是string或boolean,通过?设置为可选属性;地址使用readonly设置为只读属性,修改就会报错。
五、函数类型限制
6、然后学一下函数的类型限制。其实函数的定义,参数和返回值本质上也是变量的概念,都可以进行类型的定义。下定义好参数和返回值类型,函数的类型自然也就确定了。
总结
TS数字类型有字符串、布尔值、数字等,通过这些基础类型可以组合出复杂的类型组合,并且可通过type和interface关键字定义复杂对象类型和函数的类型。
既然我已经踏上这条道路,那么,任何东西都不应妨碍我沿着这条路走下去。——康德