TypeScript 入门教程：从零开始掌握现代 JavaScr
2024-12-31 本文已影响0人
可乐他爸
什么是 TypeScript？
简单来说，TypeScript 是 JavaScript 的一个超集。它在 JavaScript 的基础上添加了静态类型等特性，让你的代码在运行前就能发现潜在的错误，就像给 JavaScript 穿上了一件“盔甲”，让它更加安全可靠。
你可以把 TypeScript 理解为：
- JavaScript + 类型系统
- 更强大的 JavaScript
为什么要用 TypeScript？
你可能会问，JavaScript 不是挺好的吗？为什么要用 TypeScript？ 别急，我们来对比一下：
| 特性 | JavaScript | TypeScript |
|---|---|---|
| 类型 | 动态类型（运行时确定） | 静态类型（编译时确定） |
| 错误检测 | 运行时报错 | 编译时报错 |
| 代码可读性 | 变量类型不明确，代码理解难度高 | 变量类型明确，代码可读性高 |
| 代码维护性 | 大型项目维护困难 | 大型项目维护更轻松 |
| 开发效率 | 小型项目开发快，大型项目易出错 | 大型项目开发效率更高，更稳定 |
总结一下，TypeScript 的优势在于：
- 提前发现错误： 编译时就能发现类型错误，减少运行时 bug。
- 代码可读性更高： 明确的类型让代码更容易理解和维护。
- 更强大的 IDE 支持： 智能提示、自动补全等功能，提高开发效率。
- 更适合大型项目： 类型系统让大型项目更易于管理和维护。
如何开始使用 TypeScript？
-
安装 TypeScript：
首先，你需要安装 Node.js 和 npm (或 yarn)。然后，在终端中运行以下命令全局安装 TypeScript：
npm install -g typescript或者在你的项目中局部安装：
npm install typescript --save-dev -
创建 TypeScript 文件：
创建一个以
.ts为后缀的文件，例如hello.ts。 -
编写 TypeScript 代码：
在
hello.ts中输入以下代码：//表示 `name` 参数的类型是字符串,函数返回类型为字符串 function greet(name: string): string { return "Hello, " + name; } // 变量类型为字符串 let user: string = "TypeScript"; console.log(greet(user)); -
编译 TypeScript 代码：
在终端中，使用
tsc命令编译hello.ts文件：tsc hello.ts这会生成一个
hello.js文件，其中包含编译后的 JavaScript 代码。 -
运行 JavaScript 代码：
使用 Node.js 运行
hello.js文件：node hello.js你会在控制台看到输出：
Hello, TypeScript
TypeScript 的基本类型
TypeScript 提供了多种基本类型，包括：
-
string： 字符串类型，例如"hello"、'world'。 -
number： 数字类型，例如10、3.14。 -
boolean： 布尔类型，例如true、false。 -
null： 空值。 -
undefined： 未定义的值。 -
any： 任意类型，不建议使用，会失去类型检查的优势。 -
void： 表示函数没有返回值。 -
array： 数组类型，例如string[]、number[]。 -
tuple： 元组类型，可以存储不同类型的元素，例如[string, number]。 -
enum： 枚举类型，用于定义一组命名的常量。 -
object： 对象类型。
示例：
let message: string = "Hello";
let count: number = 10;
let isDone: boolean = true;
let fruits: string[] = ["apple", "banana", "orange"];
let person: [string, number] = ["Alice", 30];
enum Color { Red, Green, Blue };
let myColor: Color = Color.Green;
let obj: object = { name: "Bob", age: 25 };
TypeScript 的函数
TypeScript 可以为函数定义参数类型和返回值类型，让函数更加健壮。
示例：
function add(a: number, b: number): number {
return a + b;
}
TypeScript 的接口
接口（Interface）用于定义对象的结构，可以约束对象的属性和方法。
示例：
interface Person {
name: string;
age: number;
greet(): void;
}
let user: Person = {
name: "Charlie",
age: 28,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
user.greet();
