青训营 x 训练营笔记3.1——深入理解 JS

Eren7Y琳
123 阅读4分钟

课程介绍

本课程从TS基础入手，由基础类型一步步延伸到高级类型，通过示例来深入浅出的了解TypeScript的各种姿势。

课程重点

  • 整体介绍:Ts 背景、优缺点、社区活跃度等

  • TS常用类型基本概念

    • 基础类型、对象类型、接口、断言等

  • 进阶用法

    • 类、泛型及使用场景

  • 工程向

    • 代码检测、编译配置、tsconfig介绍
    • 工程中最佳实践、迁移工具

  • 小练习：实践一下

TS基础

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

TypeScript添加了很多尚未正式发布的ECMAScript新特性（如装饰器）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新版本为TypeScript 4.9。 image.png

image.png TypeScript 是 JavaScript 的一个超集，它通过添加静态类型和其他语言特性来增加代码的可读性和可维护性。

以下是 TypeScript 的一些基础知识：

  1. 类型注解

在 TypeScript 中，可以通过类型注解来为变量、函数等声明其类型。例如，可以这样声明一个字符串变量：

let message: string = "Hello, TypeScript!";

这样，变量 message 就被声明为字符串类型了。

  1. 接口

接口是 TypeScript 中定义对象结构的一种方式。可以使用接口定义一个对象应该包含哪些属性，以及这些属性的类型。例如：

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

上面的代码定义了一个名为 Person 的接口，该接口包含 name 和 age 两个属性，分别为字符串类型和数字类型。

  1. 类

类是 TypeScript 中一种重要的特性。可以使用类来创建复杂的对象，并在其中定义属性和方法。例如：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

上面的代码定义了一个名为 Animal 的类，该类包含 name 属性和 move 方法。

  1. 泛型

泛型是 TypeScript 中用来处理不同类型之间的通用逻辑的工具。可以使用泛型来定义一些通用的数据结构和算法。例如：

function reverse<T>(items: T[]): T[] {
  return items.reverse();
}

上面的代码定义了一个名为 reverse 的函数，它接受一个泛型数组，并返回一个反转后的同类型数组。

  1. 枚举

枚举是 TypeScript 中一种用于定义常量集合的特性。它可以将一组常量映射到相应的枚举值，使得代码更加易读易维护。例如：

enum Color {
  Red,
  Green,
  Blue
}

上面的代码定义了一个名为 Color 的枚举，它包含三个常量：Red、Green 和 Blue。

TS基础类型

image.png

  1. 布尔类型

布尔类型代表逻辑值 true 和 false。例如：

let isDone: boolean = false;
  1. 数字类型

数字类型可以表示整数、浮点数等数字类型数据。例如：

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
  1. 字符串类型

字符串类型表示文本数据，可以使用单引号或双引号来表示。例如：

let color: string = "blue";
let fullName: string = `Bob Bobbington`;
  1. 数组类型

数组类型用于表示一组相同类型的数据。可以使用以下方式来声明数组类型：

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
  1. 元组类型

元组类型用于表示已知长度和类型的数组。例如：

let x: [string, number];
x = ["hello", 10]; // OK
x = [10, "hello"]; // Error
  1. 枚举类型

枚举类型用于表示一组命名的常量。例如：

enum Color {
    Red,
    Green,
    Blue,
}

let c: Color = Color.Green;
  1. 任意类型

任意类型（any）可以表示任何类型的值。例如：

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
  1. 空类型

空类型（void）表示没有任何类型。例如：

function warnUser(): void {
    console.log("This is my warning message");
}
  1. Null 和 Undefined 类型

Null 和 Undefined 类型用于表示 null 和 undefined 值。例如：

let u: undefined = undefined;
let n: null = null;

文章仅为个人学习笔记，如有错误，欢迎指正。下期见🔥

avatar
文章
阅读
粉丝