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 =