TypeScript学习【一】
目录
前言
TypeScript安装
TypeScript特性
TypeScript的声明
变量声明
函数声明
类声明
接口声明
类型声明
异步声明
TypeScript的类型
string 字符串
number 数字
boolean 布尔值
array 数组
tuple 元组
enum 枚举
any 不确定
void 空类型
object 对象
union 联合类型
unknown 不确定的类型
字面量类型
类型断言
子类型
其它
前言
因为一些原因开始学习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学习可以参考我的专栏：
TypeScript_是洋洋a的博客-CSDN博客