TypeScript 基础学习笔记 | 青训营

59 阅读1分钟

TypeScript和JavaScript的区别

image.png

TS是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

TS的基础

基础类型

  1. boolean、number string

image.png

  1. 枚举enum(ts特有)
  2. any 、unknown、void
  3. never
  4. 数组类型[]
  5. 元组类型tuple

函数类型

TS 定义函数类型需要定义输入参数类型和输出类型,输出类型也可以忽略,因为 TS 能够根据返回语句自动推断出返回值类型;

函数重载:函数重载是指两个函数名称相同,但是参数个数或参数类型不同,不需要把相似功能的函数拆分成多个函数名称不同的函数.

Interface

定义:接口是为了定义对象类型

  • 可选属性使用: ?
  • 只读属性使用:readonly
  • 可以描述函数类型
  • 可以描述自定义属性
  name: string;
  age?: number;
  readonly sex: string;
}

let obj1: user = {
    name: "张三",
    age: 18,
    sex: "男"
}
obj1.age = 19;
obj1.sex = "女"; // 报错 无法分配到 "sex" ,因为它是只读属性。

// 因为age是可选的,所以不赋值也无所谓
let obj2: user = {
    name: "张三",
    sex: "男"
}

image.png

image.png 特点:

  • 对ES6的类进行了增强,引入了更多特性

  • 增加了public、private、protected修饰符

public: 公有的可以在任何地方可以被访问和修改(类中属性和方法默认为publish)
private: 私有的仅在当前类可访问和修改
protected: 仅当前类与子类(继承类)可以访问和修改
readonly: 只读修饰符, 仅可访问不可修改

  • 抽象类:

    • 只能被继承,不能被实例化
    • 作为基类,抽象方法必须被子类实现
  • interface约束类,使用implements关键字