ts基础

# 快速上手 TypeScript

# TypeScript 简介

TypeScript (TS) 是 JavaScript (JS) 的超集，增加了类型系统。
TS 支持所有 JS 语法，编译时去掉类型信息，生成 JS 代码。
TS 在开源社区中流行，是前端开发的更好选择，优于其他类型系统（如 Flow.js）。

# 为什么需要类型系统

JS 的灵活性导致类型错误，需在运行时才能发现。

示例：

function getFirstWord(msg) {
    console.log(msg.split(' ')[0]);
}
getFirstWord(123); // 会导致 TypeError

1
2
3
4

TS 在编译时进行类型检查，避免运行时错误，减少潜在的 BUG。

# Hello TypeScript

创建 ts 文件夹，添加 index.ts 文件。
安装主要依赖包：
```
npm install -D typescript ts-node
```
1
修改 package.json 中的 scripts 字段，添加：
```
"dev:ts": "ts-node src/ts/index.ts"
```
1

# 常用的 TS 类型定义

# 原始数据类型

原始数据类型	JavaScript	TypeScript
字符串	String	string
数值	Number	number
布尔值	Boolean	boolean
大整数	BigInt	bigint
符号	Symbol	symbol
空值	Null	null
未定义	Undefined	undefined

# 数组

定义数组类型：
- string[] 或 Array<string>

# 对象（接口）

使用 interface 定义对象结构。
接口的命名遵循大驼峰命名法。
支持可选属性：age?: number
接口可以继承：interface Admin extends UserItem

# 类

使用 class 关键字定义对象模板。
类支持继承，方法定义时需指定参数和返回值类型。

# 函数

# 基本写法

定义入参和返回值类型：

function sum(x: number, y: number): number {
    return x + y;
}

1
2
3

# 可选参数与默认参数

可选参数使用 ?，默认参数可以直接赋值。

# 无返回值的函数

返回类型为 void：

function sayHi(name: string): void {
    console.log(`Hi, ${name}!`);
}

1
2
3

# 异步函数

返回类型为 Promise<T>，用于处理异步操作：

async function fetchData(): Promise<string> {
    return "data";
}

1
2
3

# 函数重载

允许同名函数根据参数类型返回不同类型：

function greet(name: string): string;
function greet(name: string[]): string[];
function greet(name: string | string[]) {
    return Array.isArray(name) ? name.map(n => `Welcome, ${n}!`) : `Welcome, ${name}!`;
}

1
2
3
4
5

# 联合类型

用于定义变量可以是多种类型：

function counter(count: number | string) {
    console.log(`Count is: ${count}`);
}

1
2
3

# 类型断言

通过 as 或 <类型> 显式指定变量类型：
```
const value = "Hello" as string;
```
1

# 编译 TypeScript 为 JavaScript

使用 tsc 命令编译：
```
tsc src/ts/index.ts --outDir dist
```
1
运行编译后的文件：
```
node dist/index.js
```
1

# tsconfig.json

用于配置 TypeScript 编译选项。
生成方式：在命令行中运行 tsc --init。

配置示例：

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "outDir": "./dist"
    }
}

1
2
3
4
5
6
7

# 其他注意事项

TypeScript 提供类型推论，自动推导变量类型。
使用 @types 安装缺失的类型定义包。

# 总结

TypeScript 提供了强大的类型系统，增强了代码的可维护性和安全性。
通过实践和配置，可以快速上手并有效使用 TypeScript。

在线编辑

上次更新: 2025/02/25, 18:30:54

← ES6 ts注解→