从零开始学TypeScript🚀

TypeScript 是一个强大的工具，适用于希望为项目添加静态类型的 JavaScript 开发者。无论你是新手还是有经验的开发者，这篇博客将通过示例向你介绍 TypeScript 的概念，这些示例会很有帮助！

——

1. TypeScript 是什么？ 🤔

TypeScript 是在 JavaScript 之上构建的，并增添了静态类型特性。它帮助你在代码中早期发现错误并提高代码的可读性。TypeScript 编译成普通的 JavaScript 代码，因此它可以在任何支持 JavaScript 的环境中运行。

……

2. 设置 TypeScript 环境 🔧

你可以通过 npm 来全局安装 TypeScript:

    npm install -g typescript

全局安装 TypeScript。

全屏显示 退出全屏

来检查一下安装吧

运行此命令来查看版本：tsc --version

进入全屏 退出全屏

你还可以创建一个 tsconfig.json 文件来调整 TypeScript 的配置：

初始化 TypeScript 编译器 (执行 `tsc --init`)

进入全屏 退出全屏

……

3. 基础数据类型 🏷️

在 TypeScript 里，类型非常基础。我们先来看看一些常见的类型。

    let name: string = "John Doe"; // 一个字符串字面量
    let age: number = 25; // 一个数值
    let isStudent: boolean = true; // 一个布尔量

点击全屏进入，点击退出全屏

……此处省略部分内容……

4. 数组和元组 📚

数组可以存储多个项目，而元组则是类型和长度固定的数组。

    // 数组示例
    let scores: number[] = [90, 85, 78]; // 像这样定义一个数组

    // 元组示例
    let person: [string, number] = ["John", 25]; // 元组可以这样定义

全屏模式 退出全屏

……

5 枚举类型 🎉

使用枚举是一种很好的表示一组相关值的方法。比如说，表示一周中的日子。

    枚举类型 Day {
      Sunday,
      Monday,
      Tuesday,
      Wednesday,
      Thursday,
      Friday,
      Saturday
    }

    定义 today: Day = Day.Monday;
    打印(today); // 输出: 1

全屏；退出全屏

您也可以给枚举设置自定义的数值。

    枚举 颜色 {
      Red = "RED";
      Green = "GREEN";
      Blue = "BLUE";
    }

    const favorite颜色: 颜色 = 颜色.RED;

进入全屏 退出全屏

此处为空行，可能表示章节的开始或结束。

6. 函数和返回值 📝

在 TypeScript 中，你可以指定函数的返回类型来确保一致性保证。

function greet(name: string): string {
  return `你好，${name}！`;
}

let message = greet("Alice"); // TypeScript 知道返回的是字符串

下面是一个简单的例子

function greet(name: string): string {
  return `你好，${name}！`;
}

let message = greet("Alice"); // TypeScript 知道返回的是字符串

点击此处以进入全屏, 点击此处以退出全屏

你也可以定义这样的函数，它可以接受多种类型的参数：

/* combine 函数将两个字符串或数字相加 */
function combine(a: 字符串 | 数字, b: 字符串 | 数字): 字符串 | 数字 {
  return a + b;
}

console.log(combine(5, 10)); // 控制台日志(combine(5, 10)); // 15
console.log(combine("Hello", "World")); // 控制台日志(combine('Hello', 'World')); // "HelloWorld"

全屏模式 退出全屏

……

7. 界面 🌐

接口定义了对象的形态。它们让你能够指定所需的属性及其类型。

    interface Person {
      name: string;
      age: number;
    }

    let user: Person = {
      name: "Alice",
      age: 30
    };

Note: Since the source text is entirely code with no explanatory text, the translation remains the same as the original code. No additional translation or comments are necessary.

进入全屏。退出全屏。

此处省略内容

8. 类与对象 💼

TypeScript 通过类来支持面向对象的编程。

    class Car {
      make: string;
      model: string;

      constructor(make: string, model: string) {
        this.make = make;
        this.model = model;
      }

      显示信息(): string {
        return `车: ${this.make} ${this.型号}`;
      }
    }

    let myCar = new Car("Toyota", "Corolla");
    console.log(myCar.显示信息()); // 车: Toyota Corolla

点击全屏，然后退出全屏

……

第九 泛型 🧩

泛型让你能够创建灵活的可重复使用组件。当你事先不确定具体类型时，这非常有用。

function identity<T>(arg: T): T {
  return arg;
}

// 这是一个恒等函数，返回传入的参数
let num = identity(123); // 123
let str = identity("Hello"); // "Hello"

进入全屏；退出全屏

……

10. 并集类型和交集类型 ⚔️

联合类型（Union Types）允许变量存储不同类型的数据，而交集类型（Intersection Types）则将多种类型合并为一种类型。

联合类型：

    function printId(id: string | number) {
      // 打印id
      console.log(id);
    }

    printId(101); // 一切正常
    printId("abc"); // 一切正常

进入或退出全屏

交叉类型

interface Person {
  // 人接口
  name: string;
}

interface Contact {
  // 联系方式接口
  phone: string;
}

type PersonWithContact = Person & Contact;

const contact: PersonWithContact = {
  // 人与联系方式的常量
  name: "Alice",
  phone: "123-456-7890"
};

进入全屏 退出全屏

---

11. 类型别名 🔠

你可以用类型别名创建你自己的类型。

定义了一个名为 Point 的类型，它有两个属性：x 和 y，分别代表点的横坐标和纵坐标。

let 点: Point = { x: 10, y: 20 };

这行代码定义了一个名为点的变量，它是 Point 类型的一个实例，其中 x 的值为 10，y 的值为 20。

全屏模式（按Esc退出）

---

12. 类型检查 🚀

有时候，TypeScript 无法准确推断类型。这种情况下，你可以指定类型：

let someValue: any = '你好，TypeScript!';
let strLength: number = (someValue as string).length;

全屏模式 退出全屏

---

13. 用 TypeScript 和 React 💻

TypeScript 和 React 配合得天衣无缝！比如，这里有个例子：

    import React from 'react';

    // 按钮属性，包含按钮的标签文本
    interface ButtonProps {
      label: string;
    }

    // 定义一个按钮组件，接收ButtonProps类型的数据
    const Button: React.FC<ButtonProps> = ({ label }) => {
      return <button>{label}</button>;
    };

    // 导出按钮组件
    export default Button;

全屏显示，退出全屏

---

14. 高级类型：全球视角 🌐

• 映射类型：这些可以让你根据现有的类型动态创建新类型。

type 人员键 = "name" | "年龄|string";
type 人员映射 = { [key in 人员键]: string };

全屏模式。退出全屏

• 条件依赖的类型：这些类型会随条件变化。

    type IsString<T> = T extends string ? "是的" : "不是";
    type Test = IsString<string>; // "是"

点击全屏模式，退出全屏

---

这个怎么回答 ?? 🤯

所以，经过这一切，这里有一个棘手的问题给你：
既然 TypeScript 是 JavaScript 的超集，编译后成为 JavaScript，你能告诉我我们究竟为啥要使用 TypeScript吗？是不是只是因为类型安全，还是背后藏着什么更牛的东西？你咋看？在评论区留下你的想法吧！😅

---

总之，结论

就这样，各位！从基本类型到高级特性，你刚刚完成了一次TypeScript快速入门。🌟 使用TypeScript，你不仅添加类型，更是在给你的代码添加结构、安全性和清晰度。从今天开始就在你的项目中使用它，看看它如何让你的JavaScript体验焕然一新！