TypeScript学习【一】

目录

前言

TypeScript安装

TypeScript特性

TypeScript的声明

变量声明

函数声明

类声明

接口声明

类型声明

异步声明

TypeScript的类型

[string 字符串](#string 字符串)

[number 数字](#number 数字)

[boolean 布尔值](#boolean 布尔值)

[array 数组](#array 数组)

[tuple 元组](#tuple 元组)

[enum 枚举](#enum 枚举)

[any 不确定](#any 不确定)

[void 空类型](#void 空类型)

[object 对象](#object 对象)

[union 联合类型](#union 联合类型)

[unknown 不确定的类型](#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变量的命名规则：

1. 变量名称可以包含数字、字母、下划线_、美元$
2. 变量名不能以数字开头

声明变量的类型及初始值：

// 语法
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博客