目录
前言
因为一些原因开始学习TypeScript，在这里写一下TypeScript学习的笔记，在写这个专栏前我考虑过是否要系统性的构建属于自己的TypeScript知识网络，但是还是有难度的，所以我会尽力构建不同于网络上【TypeScript】教程文章的知识网络。
（原本以为不用学习TypeScript的，但是现在前端基本都转向ts了，所以没学的小伙伴们，还是抓紧学一下吧！）
本专栏参考：TypeScript 教程 | 菜鸟教程
TypeScript安装
使用npm安装：
npm install -g typescript
TypeScript特性
- 静态类型检查：TypeScript在编译时会检查代码的类型，这可以帮助你发现很多潜在的错误
- 类型推断：TypeScript能够自动判断变量的类型
- 接口和类型定义：TypeScript提供interface和type关键字，允许你定义复杂的数据结构
- 类和模块支持：TypeScript增加类的概念
- 兼容JavaScript：TypeScript是JavaScript的超集，这意味着所有合法的JS代码都是TS代码
TypeScript的声明
TypeScript可以声明变量、函数、类
变量声明
TypeScript变量的命名规则：
- 变量名称可以包含数字、字母、下划线_、美元$
- 变量名不能以数字开头
声明变量的类型及初始值：
// 语法
var [变量名] : [类型] = 值;
// 例如
var num : number = 1;声明变量的类型，但没有初始值，变量值会被设置为undefined：
// 语法
var [变量名] : [类型];
// 例如
var num : number;声明变量并设置初始值，但不设置类型，该变量可以是任意类型：
// 语法
var [变量名] = 值;
// 例如
var num = 1;声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为undefined：
// 语法
var [变量名];
// 例如
var num;函数声明
// 语法
function [函数名]([参数名] : [类型]) : [返回值类型]{
return [返回值];
}
// 例如
function test(name : string) : string {
return 'hello ' + name;
}类声明
我们可以在TS中直接进行类的书写：
// 语法
class Person {
name:string;
age:number;
constructor (name : string, age : number) {
this.name = name;
this.age = age;
}
test() {
return 'hello ' + this.name;
}
}
let person = new Person('tom', 18);
console.log(person.test());经过TS编译后的JS代码：
// 语法
var Person = /** @class */ (function () {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.test = function () {
return 'hello ' + this.name;
};
return Person;
}());
var person = new Person('tom', 18);
console.log(person.test());
接口声明
对于复杂数据结构，我们可以声明一个接口来间接的声明复杂数据结构
// 语法
interface Animal {
name : string;
sound : number;
makeSound() : void;
}类型声明
可以为对象、联合、交叉类型等定义别名
（可以理解为string这个类型六个字符太啰嗦了，所以你定义了一个s的别名用来平替string）
// 语法
type s = string;异步声明
async function fetchData(): Promise<string> {
const response = await fetch("https://example.com");
const data = await response.text();
return data;
}TypeScript的类型
string 字符串
表示文本数据，只能存储字符串、模板字符串
number 数字
number表示所有数字，包括整数和浮点数
boolean 布尔值
表示逻辑值true或false，用于条件判断
array 数组
可以表示一组相同类型的元素，可以使用type[]或Array<type>两种方式表示
tuple 元组
表示已知数量和类型的数组。每个元素可以是不同的类型，适合表示固定结构的数据。
let person: [string, number] = ["Alice", 25];enum 枚举
用来定义一组命名常量。默认情况下枚举的值从0开始递增。
any 不确定
表示任何类型，适合不确定数据类型的情况，使用any会绕过类型检查
let randomValue: any = 42;
randomValue = "hello";void 空类型
用于没有返回值的函数
function logMessage(message: string): void {
console.log(message);
}object 对象
表示非原始类型的值，适用于复杂的对象结构
let person: object = { name: "Alice", age: 30 };union 联合类型
表示一个变量可以是多种类型之一。通过 | 符号实现
let id: string | number;
id = "123";
id = 456;unknown 不确定的类型
与 any 类似，但更严格。必须经过类型检查后才能赋值给其他类型变量。
let value: unknown = "Hello";
if (typeof value === "string") {
let message: string = value;
}- any：可以赋值给任何类型
- unknown：只能赋值给unknown和any类型
字面量类型
让变量只能拥有特定的值
let direction: "up" | "down" | "left" | "right";
direction = "up";类型断言
类型断言可以让开发者明确告诉编译器变量的类型，常用于无法推断的情况
有两种方式：
1.尖括号：
let value: unknown = "hello";
let strLength: number = (<string>value).length;2.as语法：
let value: unknown = "hello";
let strLength: number = (value as string).length;子类型
子类型是其余所有类型的子类型，子类型可以赋值给任何类型
let str: string = "hello";
str = null;
str = undefined;
let num: number = 42;
num = null;
num = undefined; 其它
更多TypeScript学习可以参考我的专栏：