作为Javascript亲兄弟的TypeScript的常见基础语法和用法

面包蟹
75 阅读4分钟

最近几年，TypeScript（简称 TS）在前端圈子里火得不得了。它其实就是在 JavaScript 基础上加了“类型”，但这个“小加法”带来的变化真的很大，尤其是对大项目和团队开发来说，简直就是救星。今天我结合自己写的一个 React + dayjs 的小项目，聊聊我对 TS 的理解，顺便讲讲它给我开发带来的实实在在的好处。

为啥用 TypeScript？JavaScript 不够好吗？

说实话，JavaScript 灵活、简单，快速上手没得说，但它最大的“短板”就是类型完全靠开发者自己把控，没有任何编译期的约束。你可能写着写着，一个变量本来是数字，莫名其妙被赋成了字符串，结果跑到运行时才炸崩溃。

这在小项目里还好，但一旦代码多了，特别是多人协作，问题就来了：

  • 类型错了，程序崩溃，调试起来心累
  • 代码结构不够明确，别人看着也迷糊
  • 新人进来没个规范，写啥都是“我觉得对”

TypeScript 就是专门为了解决这些“痛点”诞生的。它让你写代码的时候，编辑器就帮你抓错误，别等到运行时才发现。还有智能提示、自动补全，效率蹭蹭往上涨。

亲身示例：用 TS 怎么让代码更靠谱？

最简单的例子，就是一个加法函数。JavaScript 里写：

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

add('1', 2);  // 结果是 '12'，而不是数字 3

没错，这种“隐式转换”很容易让人迷糊。用 TypeScript，我们可以这么写：

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

console.log(add(1, 2));      // 3
// add('1', 2);  // 这句直接报错，防止你写错

解释一下：这里给函数 add 的两个参数都明确声明为 number 类型，返回值也标注为 number。所以，如果你试图传入字符串，TS 就会帮你挡住，避免运行时错误。

TS 中那些常见类型

TypeScript 的强大还体现在它丰富的类型系统。除了常见的 string、number、boolean，还有好多实用的类型：

  • any：啥都行，不检查（灵活但危险）
  • unknown：未知类型，使用前得确认类型，更安全
  • never：永远不会出现的值，比如抛错的函数返回类型
  • 元组：长度和类型都固定的数组
  • 联合类型：变量可以是几种类型中的一个，比如 'male' | 'female'
  • 字面量类型：限定某个变量只能取几个固定的值

举个例子，定义一个人：

interface Person {
  name: string;
  age?: number;              // 年龄可选
  sex: 'male' | 'female';    // 性别只能是 'male' 或 'female' 其中之一
}

const p: Person = { name: '张三', sex: 'male' };

这里讲下：接口 Person 规定了对象的形状，age 加了个问号，表示这个属性是“可选”的，不是必须传的。sex 限定了只能是两个字符串之一，这样就不会乱写别的值。

React 项目中用 TS 的感受

结合我写的 React 代码来说，TS 给组件的属性（Props）定义类型，简直省心又安全：

interface PersonProps {
  name: string;
  content?: React.ReactNode;  // 允许传入任何 JSX
}

function Person(props: PersonProps) {
  return (
    <div>
      <h3>你好，我是 {props.name}</h3>
      {props.content}
    </div>
  );
}

这里补充一点：用接口定义 Person 组件的属性，保证了 name 必须是字符串，content 可以是任意 React 节点，比如按钮、文本啥的，这样调用时就能更灵活且安全。

日历组件里，我还明确指定了传入的日期类型是 Dayjs，用起来更放心：

import { Dayjs } from 'dayjs';

interface CalendarProps {
  value: Dayjs;
}

function Calendar(props: CalendarProps) {
  // 这里能安全调用 dayjs 提供的日期方法，不用担心类型错误
}

顺带说说：指定 value 是 Dayjs 类型，可以让编辑器帮你补全 dayjs 的方法，也能保证你传的是标准的日期对象，不会随便传字符串啥的。

TS 的智能推断也很贴心

有时候我们不用刻意写类型，TS 也能帮忙猜出来：

let a = 1;  // 自动推断 a 是 number
// a = '1';  // 这里编辑器会帮你拦住，不让随便赋字符串

这让我们写起来很自然，不用太多样板代码，还能保持类型安全。

真实开发中 TS 带来的变化

总结一下我在项目里用 TS 的感受：

  • 更少的“怪bug” ，运行前就能发现绝大多数类型错误
  • 代码更“自带说明书” ，接口和类型告诉大家数据长啥样
  • IDE 体验提升，写代码时提示丰富，跳转查找快
  • 协作更顺畅，大家约定好接口，减少沟通成本

说白了，就是写得舒服，代码更牢靠，维护起来心里踏实。

TypeScript 并不完美，它确实有学习成本，配置也有点复杂。但它带来的收益在大多数项目里都是明显的，特别是团队项目和长期维护的代码库。

如果你还没开始用 TS，强烈建议试试看，哪怕先在小项目中练练手。掌握它后，开发会变得更高效，也更省心。

avatar
文章
阅读
粉丝