typescript学习笔记

Stupid小池2023-12-16 8:36

  • js易学即是优点也是缺点

  • ts可以编译成各种版本的js

  • 安装：npm i -g typescript

  • 运行：tsc xxx.ts

  • 变量类型声明：function sum(a:number):number{}

  • 类型

    1. 基本类型：
    • number：表示数值。
    • string：表示字符串。
    • boolean：表示布尔值。
    • null 和 undefined：表示空值。
    • symbol：表示唯一的符号值。
    1. 复合类型：
    • array：表示数组，可以使用泛型 Array<T> 定义。
      • let a:number[]
      • let a:Array<number>
    • tuple：表示元组，允许你定义一个固定长度和固定类型的数组。
      • 因为固定，所以效率更高。
      • let a:[string, string]
    • object：表示对象类型。
      • 常用于指明对象中包含什么属性。例如：let a:{name:string，age?:number}
      • 加?表示这个属性是可选的
      • 必须存在某个属性其余属性随意 的写法：let a:{name:string,[propName:string]:any}propName:string表示任意字符串形式的的属性名，any表示任意类型
    • function：表示函数类型。
      • 常用于限制函数参数和返回值
      • 写法：let f:(a:number)=>number; f=function(n1){...}
    • enum：表示枚举类型。

      • 枚举就像是一个标签集合，用来给一组特定的事物分配名字。这提高了代码的可读性和可维护性。

      • 使用：

        js 复制代码 
            // Enum
    enum Color {
        Red,
        Green,
        Blue,
        }

    //或者显式赋值
    enum Color {
        Red = 0,
        Green = 1,
        Blue = 2,
        }

    let color: Color = Color.Red; // 使用枚举成员
    console.log(color); // 输出: 0
    //存在数据库里的就是0而不是Red了
    1. 高级类型：
    • any：表示任意类型，取消了类型检查。不写声明类型默认就是any。
    • void：表示没有返回值的函数。
    • never：表示永远不会返回结果的函数。不能返回值。
    • unknown：表示未知类型，相对于 any 更加类型安全。原因：any类型的变量可以赋值给任何变量，会有隐患，unknown类型就不可以。
    • union：表示联合类型，可以包含多种不同类型的值。比如：let a:number|string
    • intersection：表示交叉类型，可以包含多个类型的成员。
    1. 自定义类型：
    • 使用 type 关键字来定义自定义类型。
    • 使用 interface 关键字来定义接口。
    • 字面量类型:比如 let a:10;//a就只能是10。
    1. 补充
    • 或：let b:'male'|'female'; //b就只能赋这两个值
    • 与：let a:{name:string}&{age:number} //等同于{name:string;age:number}

  • 类型断言

    类型断言是一种方式，允许你告诉编译器 "我知道这个变量的类型是什么"，从而可以绕过类型检查器的一些检查。类型断言有两种语法形式：angle-bracket 语法和 as 语法。

    1. Angle-Bracket 语法：
      使用尖括号 <Type> 来进行类型断言，如下所示：
    typescript 复制代码 
    let someValue: any = "Hello, TypeScript!";
let strLength: number = (<string>someValue).length;

    在这个例子中，我们首先将 someValue 声明为 any 类型，然后使用尖括号 <string> 来告诉 TypeScript 编译器我们将 someValue 视为字符串类型，以便获取其 length 属性。
    2. as 语法：

    typescript 复制代码 
    let someValue: any = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

    需要注意的是，类型断言不会改变变量的实际类型，它只是在编译阶段告诉编译器如何处理这个变量。如果类型断言不正确，可能会导致运行时错误。因此，应该谨慎使用类型断言，尽量避免在不确定类型的情况下使用它们，而是更倾向于使用 TypeScript 提供的类型检查功能。

    类型断言在以下情况常常使用：

    • 当你比编译器更了解某个值的类型时，例如在从 DOM 获取元素时。
    • 当你需要与第三方库交互，这些库的类型信息不够完善时。
    • 当你在编写自定义类型声明文件（.d.ts）时，需要告诉 TypeScript 如何处理某个库的类型。

  • 类型别名：

    ts 复制代码 
        type ID = number;
    type Point = { x: number; y: number };
    type Person = { name: string; age: number };

    // 使用类型别名
    const userId: ID = 123;
    const userLocation: Point = { x: 10, y: 20 };
    const personInfo: Person = { name: "Alice", age: 30 };

  • 编译选项

    • tsc xxx.ts -w watch，监视ts文件的变化反映到js上
    • tsc 按照配置文件自动编译所有ts文件
      tsconfig.json 是 TypeScript 项目的配置文件，用于指定

    1. compilerOptions（编译器选项）:

      • target: 指定编译后的 JavaScript 版本（如 "ES5", "ES6" 等）。
      • module: 指定模块的输出格式（如 "CommonJS", "ES6" 等）。
        • commonJS和ES6的区别
        • c：服务端，被引用的模块会被立即加载
          • 出：a.js: module.exports = {xxx:xxx}
          • 入：const a=require('./a'); a.xxx
        • 6：浏览器端，真正用到了才会加载
          • 出： b.js: export a=xxx
          • 入：import {a} from './b.js'
      • outDir: 指定编译后的 JavaScript 文件的输出目录。
      • rootDir: 指定 TypeScript 文件的根目录。
      • strict: 启用严格类型检查，包括 strictNullChecks, strictFunctionTypes, 等。
      • esModuleInterop: 启用 ES 模块的互操作性。
      • sourceMap: 是否生成源映射文件。
      • declaration: 是否生成声明文件（.d.ts）。
      • allowJs: 允许编译 JavaScript 文件。默认false
      • checkJs: 是否按照ts规则检查js文件语法。默认false
      • noEmit: 不生成编译后的 JavaScript 文件，只进行类型检查。
      • noEmitOnError: 当有错误时，不编译
      • lib:用到了什么库(宿主环境)，一般情况下不需要改

    2. include 和 exclude:

      • include: 包含哪些文件或文件夹进行编译，默认为项目根目录下的所有 TypeScript 文件。例如"./src/**/*"表示src目录下的任意目录(**)的任意文件(*)
      • exclude: 排除哪些文件或文件夹不进行编译，默认为 node_modules, bower_components, jspm_packages 等。

    3. files:

      • 明确指定要包括在编译中的文件列表。

    4. extends:

      • 引用其他 tsconfig.json 文件，当前配置文件会自动包含这个引用文件的配置选项。

    5. compileOnSave:

      • 是否在保存文件时自动触发编译。

    6. typeAcquisition:

      • 自动获取类型声明文件（如从 DefinitelyTyped）。

    7. angularCompilerOptions:

      • 用于 Angular 项目的编译选项。

    8. references:

      • 指定项目依赖关系，允许以多项目的方式构建和编译。

  • webpack打包ts工程文件

      1. 生成package.json配置文件 npm init -y (y:yes,默认选项)
      1. 安装依赖npm i -D webpack webpack-cli typescript ts-loader
      1. 编写webpack.config.js配置文件
      1. 编写package.json在"scripts"中添加"build":"webpack"
      1. 开始打包：npm run build

  • babel的作用

    将最新版本ECMAScript规范（例如ES6、ES7、ES8等）编写的JavaScript代码，转译成可以在不同浏览器中运行的旧版本JavaScript代码。从而实现浏览器兼容。

  • TS中的类：

    1. 类的定义：

    在TS中，你可以使用class关键字来定义一个类。例如：

    typescript 复制代码 
    class Person {
    // 属性
    firstName: string;
    lastName: string;

    // 构造函数
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    // 方法
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

    这个类定义了一个Person类，具有firstName和lastName属性以及一个getFullName方法。
    2. 创建类的实例：

    一旦类被定义，你可以使用new关键字来创建该类的实例：

    typescript 复制代码 
    const person = new Person("John", "Doe");
    1. 属性和方法：

    类中可以包含属性和方法。属性用于存储数据，而方法用于执行操作。在类中的方法可以访问类的属性。
    4. 构造函数：

    构造函数用于在创建类的实例时初始化对象的属性。它在对象创建时自动调用。在上面的例子中，constructor方法用于初始化firstName和lastName属性。
    5. 访问修饰符：

    TS支持访问修饰符，例如public、private和protected，用于控制属性和方法的访问权限。默认情况下，类的成员是public的，这意味着它们可以在类的外部访问。你可以使用访问修饰符来限制成员的访问权限。
    6. 继承：

    TS支持类的继承，一个类可以继承另一个类的属性和方法。继承使用extends关键字实现。例如：

    typescript 复制代码 
    class Employee extends Person {
    employeeId: number;

    constructor(firstName: string, lastName: string, employeeId: number) {
        super(firstName, lastName); // 调用父类的构造函数
        this.employeeId = employeeId;
    }

    // 可以重写父类的方法
    getFullName() {
        return `${super.getFullName()} (Employee ID: ${this.employeeId})`;
    }
}
    1. 静态属性和方法：

    你可以使用static关键字定义静态属性和方法，它们属于类本身而不是类的实例。

    typescript 复制代码 
    class MathUtility {
    static PI: number = 3.14159;

    static calculateCircleArea(radius: number) {
        return MathUtility.PI * radius * radius;
    }
}

    使用方式如下：

    typescript 复制代码 
    const area = MathUtility.calculateCircleArea(5);

    1. 抽象类 ：

      TS支持抽象类，它们不能被实例化，但可以被其他类继承。抽象类通常用于定义基类，其中包含一些共享的属性和方法的框架。

      typescript 复制代码 
      abstract class Shape {
    abstract getArea(): number;
}

      子类必须实现抽象类中定义的抽象方法。

      这些是 TypeScript 中类的一些基本概念和用法。类是面向对象编程的核心概念之一，可以帮助你更好地组织和抽象代码，使其更易于维护和扩展。

    2. 接口 ：

      在 TypeScript 中，接口（Interfaces）是一种用于定义对象的结构或形状的抽象化工具。接口用于描述对象应该具备的属性和方法，以便在编写代码时进行类型检查，确保对象符合指定的结构。接口在 TypeScript 中非常有用，特别是在面向对象编程和编写可重用代码时。

      以下是关于 TypeScript 接口的一些基本概念和用法：

      1. 接口的定义：

      使用 interface 关键字来定义接口。接口描述了一个对象的属性和方法的结构，但不提供实现。例如：

      typescript 复制代码 
      interface Person {
    firstName: string;
    lastName: string;
    getFullName(): string;
}

      这个 Person 接口定义了一个对象应该包含 firstName 和 lastName 属性，以及一个 getFullName 方法。
      2. 对象符合接口：

      在 TypeScript 中，对象可以符合（或实现）接口，只要对象的结构与接口的结构匹配，就可以将该对象视为符合该接口。例如：

      typescript 复制代码 
      const person: Person = {
    firstName: "John",
    lastName: "Doe",
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

      这个 person 对象符合 Person 接口的结构。
      3. 可选属性：

      接口中的属性可以标记为可选，使用 ? 符号。这意味着对象可以包含该属性，也可以不包含。例如：

      typescript 复制代码 
      interface Car {
    make: string;
    model: string;
    year?: number; // year 是可选属性
}
      typescript 复制代码 
      const myCar: Car = {
    make: "Toyota",
    model: "Camry"
};
      1. 只读属性：

      使用 readonly 关键字可以将接口属性标记为只读，这意味着属性的值在对象创建后不能被修改。例如：

      typescript 复制代码 
      interface Point {
    readonly x: number;
    readonly y: number;
}
      typescript 复制代码 
      const point: Point = { x: 10, y: 20 };
// point.x = 30; // 编译错误，无法修改只读属性
      1. 函数类型：

      接口可以描述函数类型，包括函数参数和返回值的类型。例如：

      typescript 复制代码 
      interface CalculateArea {
    (radius: number): number;
}

      这个接口描述了一个函数类型，接受一个 number 类型的参数并返回一个 number 类型的值。
      6. 继承接口：

      TypeScript 支持接口之间的继承。一个接口可以继承另一个接口的属性和方法。例如：

      typescript 复制代码 
      interface Person {
    firstName: string;
    lastName: string;
}

interface Employee extends Person {
    employeeId: number;
}

      Employee 接口继承了 Person 接口的属性。
      7. 类实现接口：

      类可以通过 implements 关键字来实现接口，以确保类符合接口定义的结构。例如：

      typescript 复制代码 
      class Employee implements Person {
    firstName: string;
    lastName: string;
    employeeId: number;

    constructor(firstName: string, lastName: string, employeeId: number) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.employeeId = employeeId;
    }

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

      Employee 类实现了 Person 接口的结构。

      接口在 TypeScript 中是一种非常有用的工具，它有助于增强代码的可读性和可维护性，同时可以进行静态类型检查，帮助开发者在开发过程中捕获潜在的错误。它们经常用于定义合同和规范，以确保不同部分的代码能够协同工作。

  • this的指向问题：

    在 JavaScript 和 TypeScript 中，构造函数中的 this 关键字的指向是一个重要且常见的概念。理解 this 的指向对于正确编写和理解对象的创建和初始化非常关键。以下是一些关于构造函数中 this 指向的重要概念：

    1. 默认绑定：
    • 在普通函数中，this 默认绑定到全局对象（在浏览器中通常是 window 对象），这意味着在全局范围内使用 this 会指向全局对象。
    javascript 复制代码 
    function sayHello() {
    console.log("Hello, " + this.name);
}

const name = "Global";
sayHello(); // 输出 "Hello, Global"
    • 在严格模式下，全局对象不会被用作默认绑定，而是 this 会被设置为 undefined。
    javascript 复制代码 
    "use strict";

function sayHello() {
    console.log("Hello, " + this.name);
}

const name = "Global";
sayHello(); // 输出 "Hello, undefined"
    1. 隐式绑定：
    • 当函数作为对象的方法被调用时，this 会隐式绑定到调用该方法的对象。
    javascript 复制代码 
    const person = {
    name: "John",
    sayHello() {
        console.log("Hello, " + this.name);
    }
};

person.sayHello(); // 输出 "Hello, John"
    1. 显式绑定：
    • 你可以使用 call()、apply() 或 bind() 方法来显式绑定 this 到指定的对象。
    javascript 复制代码 
    function sayHello() {
    console.log("Hello, " + this.name);
}

const person = {
    name: "John"
};

sayHello.call(person); // 使用 call() 显式绑定
sayHello.apply(person); // 使用 apply() 显式绑定
const boundSayHello = sayHello.bind(person); // 使用 bind() 创建绑定的函数
boundSayHello();
    1. 箭头函数中的 this：
    • 箭头函数的 this 始终继承自包含它的最近的非箭头函数父作用域。它不具备自己的 this，而是捕获了父作用域的 this 值。
    javascript 复制代码 
    const person = {
    name: "John",
    sayHello: () => {
        console.log("Hello, " + this.name); // this 指向全局对象，不是 person 对象
    }
};

person.sayHello(); // 输出 "Hello, undefined"

  • 泛型：把类型作为一种参数：

    泛型（Generics）是 TypeScript 中的一个重要特性，它允许你编写可重用的、灵活的代码，同时提高代码的类型安全性。泛型允许你在编写函数、类和接口时，将类型作为参数进行参数化，以便在不同地方使用相同的代码，但可以适用于不同的数据类型。

    以下是有关泛型的基本概念和用法：

    1. 泛型函数：

    在函数中使用泛型可以使函数接受不同类型的参数，同时确保正确的类型检查。例如，下面是一个泛型函数，用于交换两个值：

    typescript 复制代码 
    function swap<T>(a: T, b: T): [T, T] {
    return [b, a];
}

const result = swap(1, 2); // result 的类型为 [number, number]

    在这个示例中，<T> 表示类型参数，它允许我们将不同类型的值传递给 swap 函数，同时保留了类型的一致性。
    2. 泛型类：

    你可以创建泛型类，允许类的属性或方法使用泛型类型。例如：

    typescript 复制代码 
    class Box<T> {
    private value: T;

    constructor(value: T) {
        this.value = value;
    }

    getValue(): T {
        return this.value;
    }
}

const numberBox = new Box<number>(42);
const stringBox = new Box<string>("Hello");

    这里的 Box 类是一个泛型类，它可以用不同的类型参数实例化，从而创建不同类型的盒子。
    3. 泛型接口：

    泛型也可以用于接口的定义，以便在创建实现该接口的类时指定类型参数。例如：

    typescript 复制代码 
    interface Pair<T, U> {
    first: T;
    second: U;
}

const pair: Pair<number, string> = { first: 1, second: "two" };

    这个示例中，Pair 接口接受两个类型参数 T 和 U，并且我们可以在使用该接口的时候指定具体的类型。
    4. 泛型约束：

    有时候你想要对泛型类型进行一些限制，确保它具有特定的方法或属性。你可以使用泛型约束来实现这一点。例如：

    typescript 复制代码 
    function lengthOfValue<T extends { length: number }>(value: T): number {
    return value.length;
}

const strLength = lengthOfValue("Hello"); // 5
const arrLength = lengthOfValue([1, 2, 3]); // 3
// const numLength = lengthOfValue(42); // 编译错误，数字没有 length 属性

    这里的 <T extends { length: number }> 表示 T 必须是具有 length 属性的对象类型，这样我们可以安全地访问 value.length。

    泛型是 TypeScript 中非常强大和灵活的功能，它允许你编写更具通用性和可维护性的代码，并提供了强类型检查，有助于在编译时捕获潜在的错误。通过正确使用泛型，可以提高代码的可读性和可维护性，同时增加代码的复用性。

相关推荐
Bearnaise几秒前
PointMamba: A Simple State Space Model for Point Cloud Analysis——点云论文阅读（10）
论文阅读·笔记·python·深度学习·机器学习·计算机视觉·3d
怀旧6661 小时前
spring boot 项目配置https服务
java·spring boot·后端·学习·个人开发·1024程序员节
infiniteWei2 小时前
【Lucene】原理学习路线
学习·搜索引擎·全文检索·lucene
follycat2 小时前
[极客大挑战 2019]PHP 1
开发语言·学习·网络安全·php
weixin_518285053 小时前
深度学习笔记11-神经网络
笔记·深度学习·神经网络
并不会6 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
龙鸣丿6 小时前
Linux基础学习笔记
linux·笔记·学习
Nu11PointerException8 小时前
JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习
笔记·学习
亦枫Leonlew10 小时前
三维测量与建模笔记 - 3.3 张正友标定法
笔记·相机标定·三维重建·张正友标定法
考试宝10 小时前
国家宠物美容师职业技能等级评价（高级）理论考试题
经验分享·笔记·职场和发展·学习方法·业界资讯·宠物
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测05RAG 实践- Ollama+RagFlow 部署本地知识库06【经验分享】Ubuntu22.04安装微信(linux官方版)07Macbook pro M1 安装Ubuntu教程08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09Windows10安装PCL1.14.0及点云配准10文件或文件夹名称中有空格如何批量去除