TypeScript入门到精通

    技术2023-06-17  77

    TypeScript是什么?

    TypeScript是强类型的JavaScript语言 它添加了我们对强类型语言所期望的一些特性

    TypeScript带来的好处

    TypeScript的编译步骤可以让你及早发现问题,而不是等待运行时失败 它可以让你的代码以JavaScript无法描述的方式进行自我描述

    TypeScript缺点

    TypeScript是一个预处理器,代码必须编译,因此每次更新和测试运行需要稍长一点时间

    安装 TypeScript

    npm install -g typescript

    编译 TypeScript 文件

    tsc hello.ts

    原始数据类型

    JavaScript 的类型分为两种:原始数据类型 和对象类型 (Array Object) 原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol

    原始数据类型写法示例

    let isDone: boolean = false; let isDone: number = 123; let myName: string = '123'

    空值

    // JavaScript 没有空值(Void)的概念 // 在 TypeScript 中 我们用 void 表示没有任何返回值的函数 function alertName(): void { alert('void'); }

    任意值

    // any类型,赋值过程中改变类型是允许的 let myFavoriteNumber: any = 'seven'; myFavoriteNumber = 7;

    类型推论

    如果没有明确的指定类型,那么 TypeScript 会依照类型推论的规则推断出一个类型 如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查,不会报错

    联合类型

    // 联合类型 表示取值可以为多种类型中的一种 // 联合类型使用 | 分隔每个类型 let myFavoriteNumber: string | number; myFavoriteNumber = 'seven'; myFavoriteNumber = 7;

    数组类型

    // 表示法 number[] // 数组的项中不允许出现其他的类型 // 数组的一些方法的参数也会根据数组在定义时约定的类型进行限制 let fibonacci: number[] = [1, 1, 2, 3, 5]; // 一个比较常见的做法是,用 any 表示数组中允许出现任意类型 let list: any[] = ['blog', 1, { blog: 'https://was666.gitee.io/blog/' }];

    对象类型-接口

    // 在 TypeScript 中,我们使用接口来定义对象的类型。 // tom 的形状必须和接口 Person 一致。少一些属性,多一些属性都是不允许的。 interface Person { name: string; age: number; } let tom: Person = { name: 'Tom', age: 25 }; // 可选属性 在属性后边加? interface Person { name: string; age?: number; } //不会报错 let tom: Person = { name: 'Tom' }; //不会报错 let tom: Person = { name: 'Tom', age:25 }; //报错 let tom: Person = { name: 'Tom', age: 25, gender: 'male' }; // 任意属性 [propName: string] interface Person { name: string; age?: number; [propName: string]: any; } let tom: Person = { name: 'Tom', gender: 'male' }; // 只读属性 readonly interface Person { readonly id: number; name: string; age?: number; [propName: string]: any; } let tom: Person = { id: 89757, name: 'Tom', gender: 'male' }; tom.id = 9527; // index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property. // 使用 readonly 定义的属性 id 初始化后,又被赋值了,所以报错了

    声明函数

    // 输入多余的(或者少于要求的)参数,是不被允许的 function sum(x: number, y: number): number { return x + y; } sum(1, 2)
    Processed: 0.018, SQL: 9