Typescript

Intro

1. JavaScript：20多年来成为广泛使用的跨平台语言。

2. 初始作为小型脚本语言，现支持大规模前后端应用。

3. JavaScript开发因语言与程序复杂性不匹配而困难。

4. 程序员常见错误为类型错误。

5. TypeScript目标：作为JavaScript的静态类型检查器。

6. 无JavaScript背景者应先学习JavaScript基础。

1. JavaScript Value Behaviors: 不同操作下，JavaScript值展示的行为取决于其类型。

2. TypeScript's Goal: TypeScript旨在作为JavaScript的静态类型检查器。

3. Static Type-Checking: 静态类型检查帮助提前识别错误，提高代码质量。

4. Non-Exception Failures: TypeScript处理JavaScript中的非异常失败。

5. Types for Tooling: TypeScript的类型系统增强了代码编辑工具的功能。

6. tsc, the TypeScript Compiler: TypeScript编译器tsc将TypeScript代码转换为JavaScript。

7. Explicit Types: 明确的类型注释增强了函数和变量的可读性和健壮性。

8. Erased Types: 编译过程中TypeScript的类型注释会被移除，不影响运行时行为。

9. Downleveling: TypeScript可以将高版本ECMAScript代码转换为低版本。

10. Strictness: TypeScript提供严格模式，增加类型检查的严格性。

11. noImplicitAny: noImplicitAny标志防止隐式任意类型的使用，增加代码安全性。

12. strictNullChecks: strictNullChecks标志增强null和undefined的处理，防止常见错误。

1. JavaScript Value Behaviors:

2. TypeScript's Goal:

3. Static Type-Checking:

4. Non-Exception Failures:

5. Types for Tooling:

6. tsc, the TypeScript Compiler:

7. Explicit Types:

8. Erased Types:

9. Downleveling:

10. Strictness:

11. noImplicitAny:

12. strictNullChecks:
 
 

1. string - 字符串类型，表示文本数据。
• 描述：用于表示文本数据的类型。
• 例子：let greeting: string = "你好, 世界";

2. number - 数值类型，不区分整数和浮点数。
• 描述：表示数字，无整数或浮点数之分。
• 例子：let age: number = 30;

3. boolean - 布尔类型，表示真或假。
• 描述：用于表示真值（true）或假值（false）。
• 例子：let isOpen: boolean = true;

4. Arrays - 数组类型，表示同类型元素的集合。
• 描述：用于表示同一类型元素的有序集合。
• 例子：let numbers: number[] = [1, 2, 3];

5. any - 任意类型，可分配给任何值。
• 描述：不进行特定类型检查的类型。
• 例子：let randomValue: any = "Hello"; randomValue = 100;

noImplicitAny

When you don’t specify a type, and TypeScript can’t infer it from context, the compiler will typically default to any.
You usually want to avoid this, though, because any isn’t type-checked. Use the compiler flag noImplicitAny to flag any implicit any as an error.

6. Type Annotations on Variables - 变量类型注解。
• 描述：用于明确变量的数据类型。
• 例子：let myString: string = "测试";

7. Functions - 函数类型，定义输入输出的数据类型。
• 描述：指定函数参数和返回值的类型。
• 例子：function greet(name: string): string { return "Hello " + name; }
1. 参数类型注解 (Parameter Type Annotations): 函数参数的类型定义。
例子: function greet(name: string) { ... }
2. 返回类型注解 (Return Type Annotations): 明确函数返回值类型。
例子: function getNumber(): number { return 123; }
3. 匿名函数 (Anonymous Functions): 没有具名的函数。
例子: let myFunction = function(user: string) { ... };

8. 对象类型 (Object Types): 定义对象属性及其类型。
例子: function printCoord(pt: { x: number; y: number }) { ... }
1. 可选属性 (Optional Properties): 对象属性可能不存在。
例子: function printName(obj: { first: string; last?: string }) { ... }

9. 联合类型 (Union Types): 值可以是几种类型中的一种。
例子: function printId(id: number | string) { ... }
🌱
联合类型（Union Types）是 TypeScript 中一种非常有用的特性，它允许你创建一个新类型，这个新类型可以是几个已有类型中的任意一个。这是通过使用多种操作符组合现有类型来实现的。
定义联合类型
联合类型是由两个或更多其他类型形成的一个新类型，表示的值可以是这些类型中的任何一个。每个参与组成联合类型的类型都被称为联合的成员。
让我们来看一个例子，这个函数可以接受字符串或数字类型的参数：
使用联合类型
向符合联合类型的变量提供值很简单，只需提供任何一个联合成员的类型即可。但如果你拥有一个联合类型的值，该如何操作呢？
TypeScript 只允许对联合类型的每个成员都有效的操作。例如，如果你有一个 string | number 类型的联合，你就不能使用只在字符串上可用的方法：
解决方案是通过代码对联合类型进行缩小（narrowing），类似于在没有类型注解的 JavaScript 中的做法。当 TypeScript 可以基于代码结构推断出一个更具体的类型时，就会发生缩小。
例如，TypeScript 知道只有字符串类型的值会有 typeof 值 "string"：
另一个例子是使用像 Array.isArray 这样的函数：
注意，在 else 分支中，我们不需要做任何特别的事情 - 如果 x 不是 string[]，那么它一定是 string。
有时候，你可能会有一个联合类型，其中所有成员都有一些共同点。例如，数组和字符串都有 slice 方法。如果一个联合中的每个成员都有一个共有属性，你可以不缩小类型就使用该属性：
理解联合类型可能有些混淆，因为联合类型似乎拥有那些类型属性的交集。这并非偶然 - 联合的名称来自类型理论。通过取每种类型的值的联合来组成 number | string 这样的联合。注意，给定两组对应的事实集合，只有这些事实的交集适用于这些集合的联合本身。例如，如果我们有一个房间里的人都很高并且戴着帽子，另一个房间里的人都是西班牙语说话者并且戴着帽子，那么合并这些房间后，我们唯一知道的关于每个人的事实是他们必须戴着帽子。

10. 类型别名 (Type Aliases): 给类型起一个别名。
例子: type Point = { x: number; y: number; };

11. 接口 (Interfaces): 描述对象的结构。
例子: interface Point { x: number; y: number; }
1. 类型别名与接口的区别 (Differences Between Type Aliases and Interfaces): 类型别名不可扩展，接口可扩展。
例子: interface Animal { name: string; } interface Bear extends Animal { ... }

12. 类型断言 (Type Assertions): 手动指定一个值的类型。
例子: const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

13. 字面量类型 (Literal Types): 定义具体的字符串或数字类型。
例子: let x: "hello" = "hello";
1. 字面量类型推断 (Literal Inference): 根据字面量推断类型。
例子: const obj = { counter: 0 } as const;

14. null 和 undefined: 表示无值或未初始化的值。
例子: let a: null = null; let b: undefined = undefined;
1. 非严格空检查关闭 (strictNullChecks off): null 和 undefined 可赋值给任意类型。
例子: 在配置中设置 strictNullChecks: false。
2. 非严格空检查开启 (strictNullChecks on): 对 null 和 undefined 进行严格检查。
例子: 在配置中设置 strictNullChecks: true。
3. 非空断言操作符 (Non-null Assertion Operator (Postfix !)): 断言值不为 null 或 undefined。
例子: let x: number | null; console.log(x!.toFixed());

15. 枚举 (Enums): 定义一组命名常量。
例子: enum Color {Red, Green, Blue}

16. 较不常见的原始类型 (Less Common Primitives): bigint 和 symbol。