Skip to content

TypeScript 入门省流版

TypeScript 是什么

JavaScript 的超集,主要提供了类型检测和对 ES6 的支持

简单来说,就是 TypeScript = ES6 +类型。因为写类型,能在写代码时检测出错误,以至于减少bug。现在前端项目越来越大、各种前端工程化、全栈化、各种前端框架等等, TypeScript 随之流行也很正常

为什么学 Typescipt

它提供静态类型系统,增加代码的可读性以及可维护性,已经成为大型项目的标配

用了之后就不想用 Javascript 了,有代码提示,不用担心会写错误代码了

typescript
const button = document.getElementById('XXX')


button?.addEventListener('click', function() {
    // 自动加 ? 等于 if (button) {}
    this.style.border = '1px solid red' // ok
    this.addClass() // 报错提示
})

起手式

安装 typescript

bash
npm i typescript -g

编写 ts 文件

tsx
const hello: string = 'hello';

编译 ts 文件

tsc hello.ts

编译之后就生成了 hello.js

javascript
var hello = "hello";

如此,你的第一个 ts 文件就写好了

这里我们用 typescript 来实现类型擦除,还可以用esbuild、swc 来实现,性能比 typescript 快很多,但是后两者不检查语法,所以快

数据类型

TS 的数据

类型断言 as

typescript
let result: unknown = 10;
let data: number = result; // 报错,不能将类型“unknown”分配给类型“number”。
let data1: number = result as number; // 使用 类型断言as 将 unknown 类型转换为 number 类型

参考资料