跳转到主要内容
模块 1 · 第 1 课(共 2)课程中的1/14~10 min
模块课程(1/2)

原始类型和注释

TypeScript 是 JavaScript 的类型超集,这意味着它在现有 JavaScript 之上添加了静态类型语法。在运行时,所有 TypeScript 代码都会编译为纯 JavaScript,并且类型在构建过程中完全消失。

借助 TypeScript,您可以在代码在浏览器中运行之前捕获错误,从而使您的开发过程更加健壮、安全和可扩展。


原始类型

TypeScript 支持标准 JavaScript 基元类型:

  • string:表示字符序列(例如 'Alice'、"Hello")。
  • number:表示数值,包括整数和小数(例如 42、3.14)。
  • boolean:表示真值(true 或 false)。
  • null 和 undefined:表示有意或无意缺少值。
TS
const username: string = 'Alice';
const score: number = 100;
const isActive: boolean = true;

变量注释和推理

在 TypeScript 中,我们可以通过使用冒号 (:) 后跟类型来添加 类型注释。

如果您尝试分配不同类型的值(例如,将字符串分配给定义为 number 的 age),TypeScript 编译器将在代码运行之前立即引发错误。


any 类型的危险

any 类型是一个特殊的逃生口,它告诉 TypeScript 完全关闭该变量的类型检查。

TS
let data: any = 42;
data = 'Hello'; // No error!
data.nonExistentMethod(); // No error at compile time, but it crashes at runtime!

使用 any 会抵消使用 TypeScript 的所有安全优势。这被认为是一种不好的做法,在生产代码中几乎应该避免。


函数注释和 void 类型

我们可以注释函数的参数和返回值:

TS
function calculateTax(price: number, taxRate: number): number {
  return price * taxRate;
}

如果函数不返回任何值(例如,它只返回 console.log),则其返回类型为 void:

TS
function logMessage(message: string): void {
  console.log(message);
}

自己尝试一下

练习 1:类型变量

锻炼#ts.m1.l1.e1
尝试:0加载中...

声明三个显式类型化变量:用户名为字符串,值为“Alice”;分数为数字,值为 100;isActive 为布尔值,值为 true。不要使用any 类型。

正在加载编辑器...
显示提示

在每个变量名称后面使用语法:字符串、:数字和:布尔值。

3 次尝试后可用的解决方案

练习 2:问候功能

锻炼#ts.m1.l1.e2
尝试:0加载中...

创建一个名为greet 的函数,它接受字符串类型的参数名称,并返回格式为“Hello,”的字符串,后跟名称。显式指定参数类型和返回类型。

正在加载编辑器...
显示提示

将函数声明为 functiongreet(name: string): string { ... } 并返回消息。

3 次尝试后可用的解决方案

练习 3:温度转换器

锻炼#ts.m1.l1.e3
尝试:0加载中...

声明一个名为 celsiusToFahrenheit 的函数,该函数接受数字类型的参数 celsius 并返回以华氏度(数字)为单位的等效温度。公式为 celsius * 9 / 5 + 32。显式指定参数类型和返回类型。

正在加载编辑器...
显示提示

将摄氏度乘以 9,除以 5,加上 32,并在函数上使用 : number 返回类型返回结果。

3 次尝试后可用的解决方案

练习 4:折扣计算

锻炼#ts.m1.l1.e4
尝试:0加载中...

创建一个名为calculateDiscount 的函数,该函数接受数字类型的参数price 和数字类型的参数discountPercent,并以数字形式返回最终折扣价格。显式指定参数类型和返回类型。

正在加载编辑器...
显示提示

用 1 减去折扣百分比除以 100,然后乘以价格。确保注释参数并以数字形式返回值。

3 次尝试后可用的解决方案