10分钟快速入门TypeScript

欢迎关注 『开发必备』 专栏，专注于解决你在开发过程中遇到的各种问题，帮你快速找到解决方案，节省大量调试时间。内容持续更新中，保证每篇都值得收藏！

在这里插入图片描述

10分钟教会你如何使用TypeScript

最近接了个项目，后端发来的接口文档字段乱七八糟，有些字段有时是数字，有时是字符串，搞得我调试得怀疑人生，后来想想，怎么不直接用 TypeScript 把数据类型管起来？结果用了不到10分钟，整个代码质量蹭蹭上涨，瞬间舒服了。

今天就来教你，用10分钟搞定 TypeScript，绝对不让你多花时间。

什么是 TypeScript？

用大白话说，TypeScript 就是 JavaScript 的超集，多了个“类型系统”。它能帮你在写代码时就发现潜在问题，而不是等到运行时崩溃了才后悔莫及。

用一句话总结：TypeScript = JavaScript + 类型。

安装 TypeScript

第一步，先装环境，1分钟搞定。 在项目根目录打开终端，输入以下命令：

npm install typescript --save-dev

装完后，生成一个配置文件：

npx tsc --init

好，TypeScript 的环境就搭好了！是不是很简单？

快速上手 TypeScript

咱们直接看代码，最容易理解。

1. 定义变量的类型

平时这样写：

let username = "前端小白";

用 TypeScript 写：

let username: string = "前端小白";

注意 : string，这就是 TypeScript 的类型注解，告诉代码 username 只能是字符串。如果你想赋值一个数字，直接报错，帮你在写代码时发现问题。

2. 定义函数的参数和返回值类型

平时这样写：

function add(a, b) {
  return a + b;
}

用 TypeScript：

function add(a: number, b: number): number {
  return a + b;
}

a: number 和 b: number 指定了参数类型，: number 指定了返回值类型，类型明确，看着就安心。

3. 用接口定义对象结构

后端给的接口字段杂乱？TypeScript 轻松搞定！

平时这样写：

const user = { name: "张三", age: 25 };

用 TypeScript：

interface User {
  name: string;
  age: number;
}

const user: User = { name: "张三", age: 25 };

定义了 User 接口后，所有 user 对象都必须遵循这个结构，缺字段或类型不对都会报错。

4. 可选属性和联合类型

有些字段不是必填的，比如 phone？

interface User {
  name: string;
  age: number;
  phone?: string; // ? 表示可选
}

const user: User = { name: "李四", age: 30 };

有些字段类型不固定，比如可以是字符串或数字？

let id: string | number;
id = "123"; // OK
id = 123;   // OK
id = true;  // 报错

5. 泛型

泛型有点抽象，理解了绝对不白学。比如你写一个工具函数，接受一个数组，返回数组的第一个元素，不想限制数组的类型：

function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

const num = getFirstElement([1, 2, 3]); // 推断出 T 是 number
const str = getFirstElement(["a", "b", "c"]); // 推断出 T 是 string

<T> 就是泛型，能帮你写出更灵活的代码。

总结

10分钟，掌握了 TypeScript 的安装、变量类型注解、接口、可选属性、联合类型和泛型，是不是觉得很实用？ 其实这只是冰山一角，学会了这些，你的代码质量已经有了质的飞跃。

如果你还没用 TypeScript，真的建议试试，代码清爽的感觉会让你爱上它！有什么问题欢迎留言交流！