TS核心知识点

一篇面向初学者的TypeScript知识点总结，并指导如何使用npm安装、编译和实时编译TypeScript。

TypeScript知识点总结（面向初学者）:

1. TypeScript简介

   • TypeScript是JavaScript的超集，添加了可选的静态类型和面向对象编程的特性
   • 由Microsoft开发和维护，编译成纯JavaScript

2. 基本类型

   • 布尔值：boolean
   • 数字：number
   • 字符串：string
   • 数组：type[]或Array
   • 元组：[type1, type2, …]
   • 枚举：enum
   • any：任意类型
   • void：通常用于函数返回值
   • null和undefined
   • never：永不存在的值的类型

   案例代码：

   // 布尔值：boolean
   let isDone: boolean = false;
   console.log(isDone); // 输出: false
   
   // 数字：number
   let decimal: number = 6;
   let hex: number = 0xf00d;
   let binary: number = 0b1010;
   let octal: number = 0o744;
   console.log(decimal, hex, binary, octal); // 输出: 6 61453 10 484
   
   // 字符串：string
   let color: string = "blue";
   let fullName: string = `Bob Bobbington`;
   let sentence: string = `Hello, my name is ${fullName}.`;
   console.log(sentence); // 输出: Hello, my name is Bob Bobbington.
   
   // 数组：type[] 或 Array<type>
   let list1: number[] = [1, 2, 3];
   let list2: Array<number> = [1, 2, 3];
   console.log(list1, list2); // 输出: [1, 2, 3] [1, 2, 3]
   
   // 元组：[type1, type2, ...]
   let x: [string, number];
   x = ["hello", 10];
   console.log(x[0].substr(1)); // 输出: ello
   console.log(x[1].toString()); // 输出: 10
   
   // 枚举：enum
   enum Color {Red, Green, Blue}
   let c: Color = Color.Green;
   console.log(c); // 输出: 1 (因为Green的索引是1)
   
   // any：任意类型
   let notSure: any = 4;
   notSure = "maybe a string instead";
   notSure = false;
   console.log(notSure); // 输出: false
   
   // void：通常用于函数返回值
   function warnUser(): void {
       console.log("This is my warning message");
   }
   warnUser(); // 输出: This is my warning message
   
   // null 和 undefined
   let u: undefined = undefined;
   let n: null = null;
   console.log(u, n); // 输出: undefined null
   
   // never：永不存在的值的类型
   function error(message: string): never {
       throw new Error(message);
   }
   
   // 尝试调用 error 函数
   try {
       error("这是一个错误");
   } catch (e) {
       console.log(e.message); // 输出: 这是一个错误
   }
   

3. 变量声明

   • 使用let和const声明变量
   • 类型注解：let variableName: type = value;

4. 函数

   • 函数参数和返回值可以指定类型
   • 可选参数和默认参数
   • 函数重载

5. 接口

   • 定义对象的结构
   • 可选属性和只读属性
   • 函数类型接口
   • 可索引类型

6. 类

   • 面向对象编程
   • 继承
   • 公共、私有和受保护的修饰符
   • 抽象类

7. 泛型

   • 可以处理多种类型的函数和类
   • 泛型约束

8. 模块

   • 导入和导出模块
   • 命名空间

使用npm安装、编译和实时编译TypeScript的步骤：

1. 安装Node.js和npm（如果尚未安装）
   访问 https://nodejs.org 下载并安装Node.js，它会自动安装npm

2. 安装TypeScript
   打开命令行，运行：

   npm install -g typescript
   

3. 初始化项目
   创建一个新文件夹，进入该文件夹，然后运行：

   npm init -y
   

4. 在项目中安装TypeScript

   npm install --save-dev typescript
   

5. 创建TypeScript配置文件

   npx tsc --init
   

6. 编写TypeScript代码
   创建一个.ts文件，例如app.ts

7. 编译TypeScript

   npx tsc 
   

---

. 实时编译TS
如何使用 tsc --watch 并配置相应的文件来实时编译 TypeScript。以下是详细的步骤：

1. 初始化 TypeScript 配置文件

首先，在你的项目根目录下运行以下命令来创建 tsconfig.json 文件：

npx tsc --init

2. 配置 tsconfig.json

创建后，打开 tsconfig.json 文件。这里有一些常用的配置选项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

这个配置的主要内容：

• target: 编译的目标 JavaScript 版本
• module: 使用的模块系统
• outDir: 编译后的 JavaScript 文件输出目录
• rootDir: TypeScript 源文件的根目录
• include: 需要编译的文件
• exclude: 不需要编译的文件

3. 创建源文件目录

根据上面的配置，创建一个 src 目录来存放你的 TypeScript 源文件：

mkdir src

4. 创建 TypeScript 文件

在 src 目录中创建一个 TypeScript 文件，例如 app.ts：

// src/app.ts
console.log("Hello, TypeScript!");

5. 运行 watch 模式

现在，你可以在项目根目录下运行以下命令来启动 watch 模式：

npx tsc --watch

这将启动 TypeScript 编译器的监视模式。每当你修改 src 目录下的 .ts 文件时，它都会自动重新编译。

6. 查看结果

你会发现在项目根目录下创建了一个 dist 文件夹，里面包含编译后的 JavaScript 文件。

7. 运行编译后的 JavaScript

你可以使用 Node.js 来运行编译后的 JavaScript 文件：

node dist/app.js