当前位置：首页 > news >正文

Typescript基础

news 2025/7/8 1:05:30

【禹神：三小时快速上手TypeScript，TS速通教程-哔哩哔哩】 https://b23.tv/L0FPcyx 评论区拿的笔记，仅供自学。
PDF 版本下载地址
阮一峰《TypeScript 教程》链接

TypeScript 快速上手

一、TypeScript 简介

TypeScript 是由微软开发的一种扩展语言，基于 JavaScript。它包含了 JavaScript 的所有内容，并增加了静态类型检查、接口、泛型等现代开发特性，更适合大型项目的开发。TypeScript 需要编译为 JavaScript，然后交给浏览器或其他 JavaScript 运行环境执行。

二、为何需要 TypeScript

静态类型检查：在代码运行前进行检查，发现代码的错误或不合理之处，减少运行时出现异常的几率。
代码结构清晰：虽然 TypeScript 的代码量大于 JavaScript，但其结构更加清晰，有利于后期代码的维护。

三、编译 TypeScript

命令行编译

创建一个 .ts 文件，例如 demo.ts。
全局安装 TypeScript：npm i typescript -g。
使用命令编译 .ts 文件：tsc demo.ts。

自动化编译

创建 TypeScript 编译控制文件：tsc --init。
监视目录中的 .ts 文件变化：tsc --watch 或 tsc -w。

四、类型声明

使用 : 对变量或函数形参进行类型声明，例如：

let a: string = 'hello';
let b: number = 666;
let c: boolean = true;

五、类型推断

TypeScript 会根据代码进行类型推导，例如：

let d = -99; // TypeScript 会推断出变量 d 的类型是数字

六、类型总览

JavaScript 中的数据类型

string
number
boolean
null
undefined
bigint
symbol
object

TypeScript 中的数据类型

除了 JavaScript 中的所有类型，TypeScript 还增加了以下类型：

any
unknown
never
void
tuple
enum
type
interface

七、常用类型与语法

1. any

any 类型表示任意类型，放弃对该变量的类型检查。

2. unknown

unknown 类型表示未知类型，适用于起初不确定数据的具体类型，需要后期确定。使用 unknown 类型会强制开发者在使用之前进行类型检查。

3. never

never 类型表示任何值都不是，通常用于限制函数的返回值或表示逻辑上不可能到达的代码分支。

4. void

void 类型表示空，通常用于函数返回值声明。函数返回类型为 void 时，调用者不应依赖其返回值进行任何操作。

5. object

object 类型表示所有非原始类型，包括对象、函数、数组等。

6. tuple

元组是一种特殊的数组类型，可以存储固定数量的元素，且每个元素的类型是已知的且可以不同。

7. enum

枚举可以定义一组命名常量，增强代码的可读性和可维护性。

8. type

type 可以为任意类型创建别名，让代码更简洁、可读性更强，同时能更方便地进行类型复用和扩展。

八、复习类相关知识

类

class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}speak() {console.log(`我叫：${this.name}，今年${this.age}岁`);}
}

继承

class Student extends Person {grade: string;constructor(name: string, age: number, grade: string) {super(name, age);this.grade = grade;}override speak() {console.log(`我是学生，我叫：${this.name}，今年${this.age}岁，在读${this.grade}年级`);}study() {console.log(`${this.name}正在努力学习中......`);}
}

属性修饰符

public：公开的，可以被类内部、子类、类外部访问。
protected：受保护的，可以被类内部、子类访问。
private：私有的，只能被类内部访问。
readonly：只读属性，属性无法修改。

九、抽象类

抽象类是一种无法被实例化的类，专门用来定义类的结构和行为。抽象类中可以写抽象方法，也可以写具体实现。

abstract class Package {constructor(public weight: number) {}abstract calculate(): number;printPackage() {console.log(`包裹重量为: ${this.weight}kg，运费为: ${this.calculate()}元`);}
}

十、接口（Interface）

接口是一种定义结构的方式，主要作用是为类、对象、函数等规定一种契约，确保代码的一致性和类型安全。

interface PersonInterface {name: string;age: number;speak(n: number): void;
}class Person implements PersonInterface {constructor(public name: string, public age: number) {}speak(n: number): void {for (let i = 0; i < n; i++) {console.log(`你好，我叫${this.name}，我的年龄是${this.age}`);}}
}

十一、泛型

泛型允许在定义函数、类或接口时使用类型参数来表示未指定的类型，这些参数在具体使用时才被指定具体的类型。泛型能让同一段代码适用于多种类型，同时仍然保持类型的安全性。

function logData<T>(data: T): T {console.log(data);return data;
}logData<number>(100);
logData<string>('hello');

十二、类型声明文件

类型声明文件是 TypeScript 中的一种特殊文件，通常以 .d.ts 作为扩展名。它的主要作用是为现有的 JavaScript 代码提供类型信息，使得 TypeScript 能够在使用这些 JavaScript 库或模块时进行类型检查和提示。

// demo.js
export function add(a, b) {return a + b;
}export function mul(a, b) {return a * b;
}// demo.d.ts
declare function add(a: number, b: number): number;
declare function mul(a: number, b: number): number;
export { add, mul };// index.ts
import { add, mul } from "./demo.js";
const x = add(2, 3); // x 类型为 number
const y = mul(4, 5); // y 类型为 number
console.log(x, y);