TypeScript讲解-第一弹

174 阅读2分钟

介绍TypeScript

官方给予TypeScript的介绍是这样的:TypeScript是JavaScript的类型超集。

JavaScript是一门弱类型所以较为灵活的脚本语言(动态类型),但是弱类型语言在开发当中也会有一些不足,在开发当中我们会疏忽掉对于类型的约束,在运行时才会进行类型检查,这种语言的类型错误往往会导致运行时错误。JavaScript是一门解释性语言,其没有编译阶段,所以它是动态类型。

所以TypeScript添加了类型系统(静态类型),是指在编译阶段就能确定每个变量的类型,这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript,而在编译阶段就会进行类型检查。

为什么使用TypeScript

近几年来使用TypeScript的开发者越来越多,在公司项目当中使用也越来越频繁。对于小项目来说使用TypeScript带来的开发收益并不是很高,但是对于规模较大的项目来说使用TypeScript是对项目的一个保障。

并且Vue3使用TypeScript重写,也预告着之后我们会经常与它打交道,再加上前端的生态圈正在发展中,对于代码规范这块也是个保障。

TypeScript入门体验

安装TypeScript

安装: npm install -g typescript

检查版本号:tsc -v

image.png

运行 tsc xx.ts 文件自动生成 对应的JS文件,自动编译成 JS 代码。

使用ts-node

使用 ts-node 插件更加方便,有了这个插件。就可以少了上面一步编译到 js 文件。直接输出 ts 文件结果了。

安装:npm install -g ts-node

使用: ts-node xx.ts

原始数据类型

数据类型分为原始数据类型对象类型

常见的原始数据类型有:布尔值(boolean) 、数字(number)、字符串(string)、数组、null、undefined

// 定义boolean类型的变量
const isAnimal: boolean = true;

// 定义number类型的变量
const sum: number = 5;

// 定义字符串类型的变量
const str: string = "Hello TypeScript";

// 定义一个数组
const listArr1: number[] = [1, 2, 3]; // 第一种方式

const listArr2: Array<number> = [1, 2, 3]; // 第二种方式:使用数组泛型,Array<元素类型>

// 在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型
let u: undefined = undefined;
let n: null = null;

任意类型-Any

用来表示允许赋值为任意类型

当一个变量被声明为 any 类型,那么它就与在JavaScript的变量一样不会有类型的约束。那么其实给变量赋值为any类型其实就已经失去了TypeScript对类型的约束的意义了。由此不太建议经常去使用它。

const anyThing: any = "I am any type";