深入浅出 TypeScript 青训营打卡day9 | 包MarsCode AI刷题

图图学前端
85 阅读4分钟

01 TypeScript VS JavaScript

image.png

image.png

  1. 超集关系: TypeScript 是 JavaScript 的超集，意味着任何有效的 JavaScript 代码都是有效的 TypeScript 代码。但是，TypeScript 添加了许多额外的功能和特性，使其比 JavaScript 更加丰富和强大。

  2. 用途:

    • TypeScript: 主要用于解决大型项目的复杂性和可维护性问题，特别适合构建大规模应用程序。
    • JavaScript: 基本脚本语言，主要用于创建动态网页内容。

  3. 类型系统:

    • TypeScript: 强类型语言，支持静态类型检查，允许在编译阶段检测到类型错误。
    • JavaScript: 动态弱类型语言，类型检查发生在运行时，无法在编译阶段捕获类型错误。

  4. 错误处理:

    • TypeScript: 在编译期间就可以发现并纠正错误，因为它是强类型的。
    • JavaScript: 错误通常只能在运行时被发现，因为它是动态弱类型的。

  5. 数据类型约束:

    • TypeScript: 不允许改变变量的数据类型，一旦声明了一个变量的类型，就不能再赋值给其他类型的值。
    • JavaScript: 允许变量被赋值不同类型的值，即变量的类型可以在运行时改变。

通过这些对比可以看出，虽然 TypeScript 提供了更强大的类型安全性和开发效率，但它也要求开发者具备更强的类型意识和一定的学习成本。而 JavaScript 则以其灵活性和易学性著称，更适合小型项目或者对类型安全性要求较低的应用场景

TypeScript基础

变量类型

基本类型

  1. boolean

    let isDone: boolean = false;

  2. number（包括整数、浮点数、负数）

    let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

  3. string

    let myName: string = "Alice";

  4. null 和 undefined

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

复合类型

  1. array（数组类型）

    let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

  2. tuple（元组类型）

    let x: [string, number] = ["hello", 10]; // 元组类型

枚举类型

  1. enum（枚举类型）

    enum Color {Red, Green, Blue}
let c: Color = Color.Green;

特殊类型

  1. any（任意类型）

    let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

  2. unknown（未知类型）

    let value: unknown = 42;
value = "Hello"; // OK
value = true;    // OK

  3. void（无返回值类型）

    function warnUser(): void {
    console.log("This is my warning message");
}

  4. never（永远不存在的值的类型）

    
function error(message: string): never {
    throw new Error(message);
}

TS高阶-高级类型

联合类型和交叉类型

  1. union types（联合类型）

    let myValue: string | number = 10;
myValue = "hello";

  2. intersection types（交叉类型）

    interface Person {
    name: string;
}

interface Logger {
    log: () => void;
}

type PersonLogger = Person & Logger;

const pl: PersonLogger = {
    name: "Alice",
    log: () => console.log("Logging...")
};

类型断言

type assertions（类型断言）

```
typescript
浅色版本
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
```

interface

image.png

  1. 可选属性：可以通过在属性名称后面加上问号 ? 来标记该属性为可选的，这样在实例化对象时就不必强制提供该属性的值。
  2. 只读属性：使用 readonly 关键词可以指定某个属性为只读，这意味着该属性一旦初始化之后就不可更改。
  3. 描述函数类型：接口不仅可以用来描述对象的形状，还可以用来描述函数的参数和返回值类型。
  4. 自定义属性：接口可以定义索引签名，允许对象拥有动态添加的属性。

幻灯片最后总结道：“接口非常灵活 duck typing”，这里的“duck typing”是一个术语，来源于 Python 社区的一句格言：“如果它看起来像鸭子，游泳起来像鸭子，叫声听起来像鸭子，那么它就是一只鸭子。”在 TypeScript 中，“duck typing”指的是只要一个对象满足某种行为模式（例如实现了某些方法），那么它就可以被视为符合这种模式的对象，即使它并没有明确继承自特定的类或实现特定的接口。换句话说，TypeScript 的接口机制允许我们以类似的方式对待不同的对象，只要它们的行为一致即可。

TS进阶

这里没怎么听懂，小蒟蒻基础不太好，所以就鸽掉了

avatar
文章
阅读
粉丝