Advertisement

【TypeScript 】typescript入门基础知识点整理

阅读量:

它是由微软开发的一种开源编程语言。它将JavaScript扩展为一种功能更强大的编程语言,并包含类型系统以及支持ES6的技术特性。其目标是实现静态类型检查技术,在代码运行前发现潜在错误并提高程序质量。

在这里插入图片描述

以下是 TypeScript 入门时需要了解的一些基础知识点:

类型系统 :TypeScript 支持了静态类型的验证,在编译阶段能够识别并捕获所有类型的错误。

基本数据类型:TypeScript 包含一系列基本数据类型, 包括例如 boolean, number, string, any, void,
null 以及 undefined 和 never.

类型注解 :你可以在变量声明时指定类型,例如 let myName: string = '一碗周'

类型推断 :TypeScript 支持根据赋给变量的值自动推导其类型,并能降低显式类型注解的需求。

接口(Interfaces) :可以通过 TypeScript 定义对象结构的方式称为接口;用于指定类、函数及其返回值的参数和类型。

类(Classes) :在 TypeScript 中基于面向对象的编程范式创建类,并且通过继承机制允许这些类实现代码共享与行为统一。

Decorator patterns:A decorator pattern is a special kind of metaprogramming mechanism that can be attached to class declarations, method definitions, access control structures, and property settings to enhance their functionality.

泛型(Generics) :泛型支持实现可重复使用的组件,并使其能够与其他各种数据类型协同工作而无需更改代码结构或功能。

模块(Modules) :支持模块化的开发方式,在TypeScript中你可以将代码组织成独立的功能单元,并通过import关键字引入所需的代码功能,并通过export关键字将开发成果输出到其他地方。

Compilation : TypeScript code must be compiled into JavaScript code to run in browsers or Node.js environments. You can use the tsc command-line tool for compilation.

配置文件内容:在 tsconfig.json 中描述了 TypeScript 项目的配置信息。你可以在这里设置编译选项以及过滤包含或排除的文件规则。

类型保障 :TypeScript 支持多种类型的保护机制, 包括 typeofinstanceof 和自定义类型的保护措施. 这些机制有助于确保在联合数据模型中进行精确的属性验证与访问控制.

联合类型(Union Types)
联合类型是一种编程语言中的概念,允许你定义一个变量支持多个数据类型的值。例如,在JavaScript中定义变量时会用到这种特性:const greeting = "Hello"; 这种方式支持将变量赋值为字符串或其他可变类型的值。在 TypeScript 中同样适用这一特性:let value: number | string; 这种语法结构允许 value 变量既可以是数字也可以是字符串类型的值,并且在定义过程中会明确标明支持哪些具体的数据类型。

复制代码
      // 定义一个函数,它可以接收一个字符串或一个数字作为参数
    function getLength(value: string | number): number {
       // 使用typeof获取字符串或数字的长度
       return typeof value === 'string' ? value.length : value;
    }
    
    // 调用函数,传入一个字符串
    console.log(getLength("Hello World")); // 输出:11
    
    // 调用函数,传入一个数字
    console.log(getLength(123)); // 输出:3
    
    // 定义一个联合类型的变量,它可以是字符串或数字
    let myValue: string | number;
    
    // 给变量赋值字符串
    myValue = "TypeScript";
    console.log(myValue.length); // 输出:9
    
    // 给变量赋值数字
    myValue = 42;
    console.log(myValue.length); // 错误:Property 'length' does not exist on type 'number'
  1. 交叉类型(Intersection Types)
    交叉类型表示一个对象可以同时具有多种类型的属性和方法。例如,let person: { name: string } & { age: number } 表示 person 对象既有 name 属性(类型为 string),也有 age 属性(类型为 number)。交叉类型使用 & 符号来组合不同的类型。
复制代码
       // 定义两个接口
    interface User {
    id: number;
    name: string;
    }
    
    interface Admin {
    id: number;
    adminPrivileges: string[];
    }
    
    // 创建一个交叉类型,表示一个对象同时是User和Admin
    type UserAdmin = User & Admin;
    
    // 定义一个变量,它的类型是UserAdmin
    let userAdmin: UserAdmin;
    
    // 给变量赋值,它必须同时满足User和Admin接口的要求
    userAdmin = {
    id: 1,
    name: "Alice",
    adminPrivileges: ["edit posts", "delete posts"]
    };
    
    // 尝试赋值一个不满足Admin接口要求的对象将会报错
    // let incorrectUserAdmin: UserAdmin = {
    //     id: 1,
    //     name: "Bob"
    // }; // 错误:类型 'User' 不匹配 'UserAdmin'

通过字面量类型(Literal Types),类型被限定为特定的字面值。例如,在编程语言中使用let status: 'success' | 'failure'时,则表示status变量仅能赋值为 'success''failure'这两个字符串中的一个。

类型别名(Type Aliases)
类型别名提供了为某个类型分配一个新的名称的能力。这种机制在构建复杂的类型体系时尤其有用,在代码逻辑上更加清晰易懂。例如,在type Point = { x: number; y: number; }中定义了一个用于描述二维点坐标的类型。

复制代码
       // 定义一个函数,它的参数类型为字面量类型 'success' | 'error'
    function logResult(result: 'success' | 'error') {
    switch (result) {
        case 'success':
            console.log('操作成功');
            break;
        case 'error':
            console.log('发生错误');
            break;
        default:
            console.log('未知结果');
    }
    }
    
    // 调用函数,传入字面量类型 'success'
    logResult('success'); // 输出:操作成功
    
    // 调用函数,传入字面量类型 'error'
    logResult('error'); // 输出:发生错误
    
    // 尝试传入一个不是 'success' 或 'error' 的值将会报错
    // logResult('warning'); // 错误:类型 '"warning"' 不匹配 '"success" | "error"'

元组类型(Tuple Types)
元组类型支持定义一个预设长度的数组,并规定每个元素的数据类型。例如,在JavaScript中使用let关键字声明变量时,默认支持以下语法结构:let tuple: [number, string]; 这种声明方式会创建一个包含一个 number 类型元素和一个 string 类型元素的元组变量。

复制代码
      // 定义一个元组类型,包含一个字符串和一个数字
    type Person = [string, number];
    
    // 创建一个Person类型的元组
    let john: Person = ['John', 30];
    
    // 访问元组中的元素
    console.log(john[0]); // 输出:John
    console.log(john[1]); // 输出:30
    
    // 修改元组中的元素
    john[1] = 31;
    console.log(john); // 输出:['John', 31]
    
    // 尝试添加额外的元素将会报错
    // john[2] = 'male'; // 错误:索引 2 超出了元组的索引范围
    
    // 尝试访问不存在的元素也会报错
    // console.log(john[2]); // 错误:索引 2 超出了元组的索引范围

映射类型(Mapped Types)
映射类型是一种基于现有类型的机制,在不改变原有结构的情况下生成新的数据格式。通过语法结构{ [key in keyof T]: U }我们可以定义一种新的统一数据类型的集合体,在这种情况下所有键都遵循现有类型的结构,并且每个键都被指定为统一的数据格式U。

复制代码
    创建数组类型的映射
    // 定义一个原始类型
    type Keys = 'a' | 'b' | 'c';
    
    // 使用映射类型创建一个Keys类型的数组
    type KeysArray = Array<Keys>;
    
    // 创建一个KeysArray类型的实例
    let keys: KeysArray = ['a', 'b', 'c'];
    
    创建元组类型的映射
    // 定义一个元组类型
    type Tuple = [number, string, boolean];
    
    // 使用映射类型创建一个与元组类型对应的索引签名类型
    type TupleMapping = { [K in keyof Tuple]: Tuple[K] };
    
    // 创建一个TupleMapping类型的实例
    let tupleMapping: TupleMapping = {
       0: 1,
       1: 'string',
       2: true
    };
    
    创建对象类型的映射
    // 定义一个对象类型
    interface Person {
       name: string;
       age: number;
    }
    
    // 使用映射类型创建一个新类型,它的每个属性都是可选的
    type PartialPerson = { [K in keyof Person]?: Person[K] };
    
    // 创建一个PartialPerson类型的实例
    let partialPerson: PartialPerson = {
       name: 'Alice',
       // age属性是可选的,可以不赋值
    };
  1. 条件类型(Conditional Types)
    条件类型基于各类型间的关联来构建类型的体系。例如,在表达式中当 T extends U 时,则结果为 V;否则结果为 W
复制代码
    // 定义一个条件类型,如果T是U的子类型,则结果类型为X,否则为Y
    type IsStringOrNumber<T, U, X, Y> = T extends U ? X : Y;
    
    // 定义一个类型变量T,它是字符串或数字
    type T = 'a' | 'b' | 'c' | 1 | 2 | 3;
    
    // 使用条件类型来推断T的类型
    let result: IsStringOrNumber<T, 'a' | 'b' | 'c', string, number>; // 推断结果为 string

索引访问类型(Index Access Types)
可以通过索引来访问类型。其中T[keyof T]表示具体来说,在编程语言中这种机制通常用于在类型系统中动态地关联属性和值。

类型运算符
TypeScript还包含其他类型的运算符,例如keyof, inferred, unique等,这些运算符用于创建和处理类型。

这些知识点构成了 TypeScript 入门的基础,并帮助你在学习过程中更好地理解和使用这门语言。随着学习的发展与深入理解, 你会学会掌握更高级的特性与模式, 并编写出更为健壮且易于维护的代码

全部评论 (0)

还没有任何评论哟~