什么是 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();