TypeScript 笔记

Date: 2023-03-08 18:35:12
视频地址：尚硅谷TypeScript教程
ps：TS 没什么难的，一种写法罢了

P1 TS简介

JS 是一种轻量型语言，很难报错，所以很难去写大型项目，维护性很低。有报错难以及时发现，比如写函数类型的参数，无需定义类型。所以为了解决 JS 维护较难的问题，TS 应运而生，相当于把 JS 变成了一种强类型语言，方便维护。

类似于 css 的预处理语言 sass less。

TS 也需要编译成 JS 使用。当然，你也可以认为这是一种书写规范，因为就算报错，如果不设置，TS 也会正常编译为 JS，对于刚接触的人来说，报错是难免的，TS 是属于用了就回不去的技术。

TS 增加了什么？

  • 类型 （增加了很多新的数据类型）
  • 支持 ES 的新特性
  • 添加 ES 不具备的新特性
  • 丰富的配置选项
  • 强大的开发工具 （vscode）
    ···

那么开始吧！！! 😼😼😼

需要的前置知识

  • HTML5
  • JS
  • ES6

P2 开发环境搭建

正常流程

  • 运行命令 npm i -g typescript
  • 创建 xxx.ts 文件
  • 使用命令 tsc xxx.ts，会在同文件夹内出现 xxx.js 文件

省心

  • 运行命令 npm create vue@3
  • 在配置中选择支持 TS 即可

反正是学习，怎么舒服怎么来🤣

P3 TS的类型说明

let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{
    ...
}
// -----------------------具体
let name:string;
let name: string = "Gavin";
function fn(name: string, age: number): void {
  console.log("I'm------" + name + "------" + age);
}

注意：

  • TS 可以编译任意 js 版本
  • TS 有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

P4-5 TS 中的类型

TS 中的类型

类型 例子 描述
any * 任意类型
array [1,2,3] 任意JS数组
boolean true、false 布尔值true或false
enum enum 枚举，TS中新增类型
never 没有值 不能是任何值
number 1, -33, 2.5 任意数字
object 任意的JS对象
string 'hi', "hi", hi 任意字符串
tuple [4,5] 元素，TS新增类型，固定长度数组
unknown * 类型安全的any
void 空值（undefined） 没有值（或undefined）
字面量 其本身 限制变量的值就是该字面量的值

服务类型的语法

  • 联合类型 |
  • 联合取值或类型
  • 类型断言（告诉解析器变量的实际类型）

基本使用

  • any 可以污染其他变量
  • unknow 不污染其他变量
  • never 用来报错，void 返回空
  • enum 枚举类型，像是性别可以用枚举写
  • object 可在括号内限制元素类型，
    • 加 ? 表可选类型
  • 类型的别名，（列出可能的类型）
  • 字面量 就是变量的值
// any 相当于关闭 ts ，一般用unknown替代any，unknown不污染其他变量
// void never 一般设置为设置方法返回值，void 为空 (万恶的 undefined)，never 返回报错
function fn(): void {
  throw new Error("错了啊");
}
console.log(fn());

// obj 不常使用，因为 js 都是对象，主要使用是限制其属性类型
// ? 表参数可选
let b: {
  name: string;
  age?: number;
};
b = {
  name: "gavin",
};
// 定义 Obj 内多个内容，name 为必须，其他随意皆可
let c: { name: string; [propName: string]: unknown };
c = {
  name: "rose",
  sex: 0,
  age: 24,
};

//数组类型
let g: number[] = [1, 2, 3, 4];

// 元组，固定长度数组 [一个个具体填]
let h: [string, number] = ["Gavin", 25];
console.log(h);
// enum 枚举 可能情况全部列出来
enum Gender {
  Male,
  Female,
}
let i: { name: string; gender: Gender } = { name: "阿强", gender: Gender.Male };
console.log(i);
// `|`或                   /// `&` 都
let j: string | number = 1;

// 类型别名，选一个吧。
type myType = 1 | 2 | "a";
let m: myType = 2;
console.log(m);

// 对方法参数限制
let fu: (a: number, b: number) => number;
fu = function (n1: number, n2: number): number {
  console.log(n1, n2);
  return 10;
};
fu(1, 2);

P13~20 TS 中类相关知识

面向对象

类是用于创建具体对象的模板。类感觉功能和直接写构造器方法类似，构造器方法就是类的一部分。

JS 中类相关知识进行对比

涉及知识点

  • 类的定义
  • 构造器函数
  • 类的继承
  • 方法重写
  • super 关键字
class Person { //类的定义
  constructor(name, age) { //构造函数
    this.name = name
    this.age = age
  }
  sayHello() {
    console.log(this.name + '------' + this.age)
  }
}
class Students extends Person{ //类的继承
  constructor(name, age, score) {
    super(name, age)   //调用父类的构造函数属性
    this.score = score
  }
  sayHello() {  //重写父类的方法
    console.log(this.name + '------' + this.age + '岁------' + this.score)
  }
}
const p1 = new Students('张三', 18, 100)
const p2 = new Students('李四', 28, 90)

TS 中类相关知识

涉及知识点

  • 子元素强类型定义

  • 构造器函数和 this

    • static 静态属性 （在类里定义，只能通过类名访问）
    • readonly 只读属性（只有实例化后才能调用）
    • 类跟对象的写法一样，只不过类的目的是创造对象

  • 类的继承

    • 继承后，用构造器生成多个不同的对象

  • 方法重写

    • 两个类如果几乎一样。可将重复代码提取出来。写在父类里进行复用。
    • 子类想使用父类方法添加新的属性、在子类里重写即可

  • super 关键字

    • 子类写构造函数时，父类会被自动覆盖，触发方法重写
    • 如果想要用父类的构造方法。则使用 super关键字 进行调用。实现构造方法合并的目的。

  • 抽象类（abstract）

    • 抽象类是在 父类 使用 abstract 进行修饰，禁止实例化
    • 抽象方法只能写在抽象类中，子类中必须方法重写，不然报错。抽象方法无内容。

  • 方法重写

    在子类中写父类同名的不同功能方法。

  • 接口

    类的规范，对类的元素进行统一限制，跟 TS 类型中对 Obj 的限制是差不多的

  • 属性的封装（private 私有属性）

    • private 修饰符 在 class 使用存取器 get set 进行修改。只能在这个类中使用，不太常用，子类只能通过方法获取私有属性
    • public 修饰符 继承子类也可访问，
    • protected 修饰符 将属性声明直接定义在构造方法中，写起来也方便

基本例子 （内容定义、继承、方法重写、super、抽象类）

abstract class Person { // 抽象类，不能被实例化，只能被继承
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  abstract sayHello(): void;
}
class Students extends Person { // 类的继承
  static school: string = "清华大学"; // 静态属性，只能通过类名访问
  readonly score: number; // 只读属性，只能在构造函数中赋值
  constructor(name: string, age: number, score: number) { 
    super(name, age); // 调用父类的构造方法，进行整合
    this.score = score;
  }
  sayHello(): void { // 对抽象方法重写
    console.log(this.name + "--------" + this.age + "--------" + this.score);
  }
}
const student = new Students("李四", 28, 99);

private 属性、 接口

  • 对象写法
// 对象 Obj TS 写法
type Person = { // 定义对象类型
  name: string;
  sex: number
}
const per: Person = { // 实现对象类型
  name: "gavin",
  sex:1
}
  • 类的写法

// 接口用来定义类的结构
// 可定义多个同名接口，属性添加
interface Person {
  name: string;
  sayBye(): void;
}
interface Person { // 合并接口
  sex: number;
}
class Stuendt implements Person { // 实现接口
  name: string;
  sayBye(): void {
    console.log(this.name + "------" + this.sex);
  }
  sex: number = 1;
  // -----------------
  private _age: number; // 私有属性
  get age(): number { // 存取器形式
    return this._age;
  }
  set age(val) {
    if (val > 0) {
      this._age = val;
    }
  }
  // ---------
  constructor(name: string, age: number) {
    this._age = age;
    this.name = name;
  }
}
const gavin = new Stuendt("gavin", 25);

类的快速写法

class person{
  constructor(public name: string, public age: number) {}
}
const per = new person('张三', 18) //ct {name: '张三', age: 18}

P21. 泛型

泛型可以在多处使用

// 类型不明确用泛型
function fn<T>(a: T): T {
  return a;
}
fn(5); //不指定
fn<string>("hello");
// 方法参数多个且不确定
function fn2<T, K>(a: T, b: K): T {
  console.log(a, b);
  return a;
}
fn2(5, "hello");
fn2<number, string>(5, "hello");

// 限制泛型范围 （泛型返回为类）
interface Inter {
  length: number;
}
function fn3<T extends Inter>(params: T): number {
  console.log(params);
  return a.length;
}
fn3("123");

JS 与 TS 类的对比

TS 真的很像 Java，不吹不黑，强类型语言编码虽然麻烦一些，但维护真的香

posted @ 2023-03-28 21:42  悠悠江水  阅读(64)  评论(0)    收藏  举报