从 A 到 Z 学习 TypeScript

TypeScript 是一款功能强大的工具，适用于希望在项目中添加静态类型的 JavaScript 开发人员。无论您是初学者还是经验丰富的开发人员，本博客都会通过示例带您了解 TypeScript 概念！

1.什么是 TypeScript？🤔

TypeScript 是 JavaScript 的一个超集，添加了静态类型。它可以帮助您尽早发现错误并提高代码的可读性。TypeScript 可编译为常规 JavaScript，因此它可以在任何运行 JavaScript 的环境中运行！

2. 设置 TypeScript

首先使用 npm 全局安装 TypeScript：

npm install -g typescript

检查安装：

tsc --version

您还可以创建一个 `tsconfig.json` 文件来配置 TypeScript 设置：

tsc --init

3.基本类型

在 TypeScript 中，类型是基础。让我们从一些基本类型开始：

let name: string = "John Doe"; // A string
let age: number = 25; // A number
let isStudent: boolean = true; // A boolean

4.数组和元组

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

// Array
let scores: number[] = [90, 85, 78];

// Tuple
let person: [string, number] = ["John", 25];

5. 枚举🎉

枚举是代表相关值集合的绝佳方式。例如，表示星期几：

enum Day {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday
}

let today: Day = Day.Monday;
console.log(today); // Outputs: 1

您还可以为枚举分配自定义值：

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let favoriteColor: Color = Color.Green;

6. 函数和返回类型

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

function greet(name: string): string {
  return `Hello, ${name}!`;
}

let message = greet("Alice"); // TypeScript knows this is a string

您还可以定义接受多种类型的函数：

function combine(a: string | number, b: string | number): string | number {
  return a + b;
}

console.log(combine(5, 10)); // 15
console.log(combine("Hello", "World")); // "HelloWorld"

7. 接口📐

接口定义对象的形状。它们允许您指定所需的属性及其类型：

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

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

8. 类和对象

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

class Car {
  make: string;
  model: string;

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

  displayInfo(): string {
    return `Car: ${this.make} ${this.model}`;
  }
}

let myCar = new Car("Toyota", "Corolla");
console.log(myCar.displayInfo()); // Car: Toyota Corolla

9. 泛型

泛型允许您创建具有灵活类型的可重用组件。当您事先不知道类型时，这很有用。

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

let num = identity(123); // 123
let str = identity("Hello"); // "Hello"

10. 联合类型和交叉类型⚔️

联合类型允许变量保存不同类型的值，而交叉类型则将多种类型合并为一种。

**联合类型：**

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

printId(101); // Works fine
printId("abc"); // Works fine

**交叉口类型：**

interface Person {
  name: string;
}

interface Contact {
  phone: string;
}

type PersonWithContact = Person & Contact;

const contact: PersonWithContact = {
  name: "Alice",
  phone: "123-456-7890"
};

11. 类型别名

您可以使用类型别名创建自己的类型名称。

type Point = { x: number; y: number };

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

12. 类型断言

有时，TypeScript 无法推断出确切的类型。在这种情况下，你可以断言类型：

let someValue: any = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

13. React 中的 TypeScript

TypeScript 可以与 React 无缝协作！以下是示例：

import React from 'react';

interface ButtonProps {
  label: string;
}

const Button: React.FC = ({ label }) => {
  return ;
};

export default Button;

14. 高级类型🌐

映射类型：这些允许您动态地基于现有类型创建类型。

type PersonKeys = "name" | "age";
type PersonMapped = { [key in PersonKeys]: string };

条件类型：这些类型根据条件而改变。

type IsString = T extends string ? "Yes" : "No";
type Test = IsString; // "Yes"

回答这个问题??🤯

那么，说了这么多，我来给你回答一个棘手的问题：

如果 TypeScript 是 JavaScript 的超集，并且它可以编译为 JavaScript，你能告诉我**我们为什么需要 TypeScript**吗？这只是为了类型安全，还是有更强大的东西隐藏在幕后？你怎么看？在评论中发表你的想法！😅

**结论**

各位，现在就到这里！从基本类型到高级功能，您刚刚完成了 TypeScript 速成课程。🌟 使用 TypeScript，您不仅可以添加类型，还可以为代码添加结构、安全性和清晰度。立即开始在您的项目中使用它，看看它如何改变您的 JavaScript 体验！

CLIS.CC