【学习笔记】TypeScript

1、介绍

      1.1、概述

        TypeScript 是由微软开发并维护的一种开源编程语言。它是 JavaScript 的一个超集，主要用于开发大型应用程序。TypeScript 提供了对 JavaScript 的静态类型检查和现代编程功能，同时保留了与 JavaScript 完全兼容的特点

      1.2、基本特点

基本特点	描述
类型系统	TypeScript 是强类型语言，提供了静态类型检查。开发者可以在编写代码时指定变量、函数参数和返回值的类型，从而在编译时捕获潜在的类型错误
编译器	TypeScript 代码需要通过 TypeScript 编译器（tsc）编译为 JavaScript 代码。编译器可以将 TypeScript 转换为任何版本的 JavaScript（例如 ES5、ES6 等）
接口	TypeScript 支持接口，允许开发者定义对象的结构和类型，从而提供更强的代码约束
类和继承	TypeScript 支持基于类的面向对象编程，包括类的定义、继承、公共和私有成员等

      1.3、优势

优势	描述
代码可维护性	由于有类型检查，TypeScript 使得代码更易于阅读和维护，减少了运行时错误
开发工具支持	TypeScript 与多种开发工具（如 Visual Studio Code）紧密集成，提供智能提示、代码补全和重构等功能，提升开发效率
社区和生态系统	TypeScript 拥有活跃的社区和丰富的生态系统，包括大量的类型定义文件（如 DefinitelyTyped），使得使用第三方库时也能享受类型安全的好处

      1.4、开发环境搭建

        ① 安装依赖：npm i -g typescript
        ② 编写一个 ts 脚本 index.ts

// 定义一个接口
interface Person {
   
  name: string;
  age: number;
}

// 实现接口的类
class Student implements Person {
   
  constructor(public name: string, public age: number, public grade: number) {
   }

  study() {
   
    console.log(`${
     this.name} is studying.`);
  }
}

// 创建一个 Student 实例
const student: Student = new Student('John', 20, 3);
student.study();  // 输出: John is studying.

        ③ 编译 ts 文件：tsc index.ts 编译之后能在同一目录下看到编译后的 js 文件 index.js（如果用 vsCode 编辑器的话，TypeScript 编译器扫描到 index.js、index.ts 中都有 Student 类会有下划线警告，因此可以选择使用 WebStorm 编辑器，因为编译后 index.ts 变得跟文件夹一样，index.js 存放在这个“文件夹”下，因此不会有警告）

// 实现接口的类
var Student = /** @class */ (function () {
   
    function Student(name, age, grade) {
   
        this.name = name;
        this.age = age;
        this.grade = grade;
    }
    Student.prototype.study = function () {
   
        console.log("".concat(this.name, " is studying."));
    };
    return Student;
}());
// 创建一个 Student 实例
var student = new Student('John', 20, 3);
student.study(); // 输出: John is studying.

Tip：在没有配置文件时，默认编译后的 JS 支持 ES3，所以会看到在 ts 中使用的 let 会被转换成 var

        ④ 验证 js 文件是否可以使用：node .\index.js

2、基础

      2.1、类型声明

        类型声明式 TS 非常重要的一个特点，通过类型声明可以指定 TS 中变量的类型，指定类型后当为变量赋值时，TS 编译器会自动检查值是否符合类型的声明，符合则成功赋值、否则报错（C++、Java 的特性）

// 先声明 后赋值
let a:number
a=1024
console.log(a);

// 声明后顺便赋值
let b:boolean=true
console.log(b);

// 直接赋值会自动检测类型
let c='ccc'
console.log(typeof c);

// 没有规定形参类型
function sum1(a,b){
   
    return a+b
}
console.log(sum1(123,"456"));

// 规定形参类型
function sum2(a:number,b:number){
   
    return a+b
}
console.log(sum2(123,456));

// 规定返回值类型 像上面那种没有规定的就自动判断
function hello():string{
   
    return 'Hello~'
}
console.log(hello());

类型	描述
number	数字
string	字符串
boolean	布尔值
字面量	例如 let a = number | “abc”

// 字面量类型
// 简单
let a: 10; // 声明a只能被赋值10
a = 10;
console.log(a);
// 多个类型使用 | 拼接
let b: 1 | "a" | boolean;
b = true;
console.log(b);
// 使用 type 来存储类型
type C = number | string;
let c: C = 3;

类型	描述
any	任意类型，随便赋值给别人不报错
unknown	任意类型，随便赋值给别人会报错

let a:number
let b:boolean
let c:string

// any类型 不推荐使用 因为可以随便赋值给别人不报错
// 显示声明
let d: any;
d = 1;
d = "a";
a = d; // 随便赋值给别人不报错
// 隐式声明
let e; // 相当于 let e:any;
e = 1;
e = "a";

// unknown 跟any类似，只不过不能赋值给别人
let f: unknown;
f = "a";
f = 10;
// 给别人赋值法一：包裹在判断语句中
if (typeof f === "string") c = f; //f在这个作用域里是string类型
// 给别人赋值法二：类型断言
b = f as boolean; //告诉编辑器执行到这里的时候f将会是boolean的值，这块别给我报错

类型	描述
object / { }	对象

// object类型表示只能赋值一个对象
let a: object = {
   };
let b: {
   }</