深入浅出 TypeScript | 青训营笔记

小宇爱吃榴莲
103 阅读4分钟

什么是TypeScript？

简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。

为什么要学TypeScript

  1. 增强代码的可维护性和可读性：TypeScript通过强类型、接口和类等特性，使得代码更加容易被理解和维护，减少了代码中的错误和意外行为。
  2. 提高开发效率：TypeScript中支持类型推导、代码智能提示、自动完成等功能，可以提高开发人员的编码效率，减少错误和调试时间。
  3. 增强代码的可重用性：TypeScript中的模块化和命名空间等特性，可以使得代码更加可重用和易于扩展。
  4. 支持ES6和后续版本的特性：TypeScript支持ES6和后续版本的特性，开发人员可以在TypeScript中使用最新的JavaScript语言特性，而无需等待浏览器的支持。
  5. 方便与现有JavaScript代码库集成：TypeScript中的声明文件可以描述已有JavaScript代码库的类型信息，以便在TypeScript中使用这些代码库时，能够获得类型检查和代码提示等功能，提高代码的可维护性和可读性。

那么，向JavaScript添加静态类型的原因是什么？

我想原因至少有三个：

  • 您可以避免经典的错误 'undefined' is not a function.
  • 在不严重破坏代码的情况下，重构代码更容易。
  • 使大型、复杂的应用程序源码更易阅读。

实际上，一项研究表明，TypeScript可以检测到所有JavaScript错误的15％。

动态类型的自由特性经常会导致错误，这些错误不仅会降低程序员的工作效率，而且还会由于增加新代码行的成本增加而使开发陷入停顿。

因此，JavaScript无法合并类型以及编译时缺乏错误检查，使它不适合作为企业和大型代码库中服务器端代码。

TypeScript vs JavaScript

图片.png

TS基础-基础类型

TypeScript 的基础类型包括以下五种：

  1. boolean（布尔类型）：表示 true 或 false。

  2. number（数字类型）：表示数值，可以是整数或浮点数。

  3. string（字符串类型）：表示文本数据。

  4. null 和 undefined（空类型）：表示空值，null 表示一个空对象引用，undefined 表示一个未定义的变量或属性。

  5. any（任意类型）：表示任何类型的值。如果某个变量或参数定义为 any 类型，则它允许存储任何类型的值。

还有一些 TypeScript 提供的扩展类型可以辅助进行类型约束：

  1. void（无返回值类型）：表示函数没有返回值。

  2. never（永远不存在的类型）：表示函数不会正常返回（如抛出异常、死循环等）。

  3. Array（数组类型）：表示具有相同类型 T 的元素的数组。

  4. Tuple（元组类型）：表示元素数量和类型已知的数组，与数组不同的是，元组中的每个位置可以指定不同的类型。

TS基础-函数类型

图片.png

  • 定义：TS定义函数类型时要定义输入参数类型和输出类型

  • 输入参数：参数支持可选参数和默认参数

  • 输出参数：输出可以自动推断，没有返回值时，默认为void类型

  • 函数重载：名称相同但参数不同，可以通过重载支持多种类型

TS基础-interface

在 TypeScript 中，interface 是一种用来描述对象类型的语法。可以使用 interface 定义一个对象、函数等的形状，从而定义一些规范和规则。

js
复制代码
interface Person {
  name: string;
  age: number;
}

上述 interface 描述了一个名为 Person 的对象，该对象中包含有名字属性（name）和年龄属性（age），两个属性分别对应 string 和 number 类型。

接下来我们定义一个基于上述 interface 创建 Person 对象的函数：

js
复制代码
function createPerson(name: string, age: number): Person {
  return { name, age };
}

上述函数 createPerson 接受一个字符串类型的参数 name 和一个数字类型的参数 age，并返回一个具有相关属性的对象。这里，函数返回的对象符合 Person 接口所定义的规范，即包含 name 和 age 两个属性。

此外，也可以在 interface 中定义可选属性和只读属性，以及接口之间的继承关系。示例代码如下：

js
复制代码
// 可选属性：使用问号标记
interface Person {
  name: string;
  age?: number;
}

// 只读属性：使用 readonly 标记
interface Point {
  readonly x: number;
  readonly y: number;
}

// 继承：使用 extends 关键字
interface Student extends Person {
  grade: number;
}

结论

总体而言，TypeScript是一个很好的工具，即使您没有使用过它，也可以将其纳入你的学习计划中。从点滴开始学起，慢慢的你就会很快上手的，因为TypeScript的学习曲线对初学者非常友好，所以你无需担心。最后，希望本文对你的TypeScript学习带来一些帮助。

avatar
文章
阅读
粉丝