TypeScript语法解析与进阶扩展

于 2024-06-18 10:14:34 发布
阅读量857 收藏 30
点赞数 26
分类专栏： # JavaScript灬结丹期 文章标签： typescript ubuntu linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Augenstern_QXL/article/details/139765066
版权

TypeScript

1、类型别名

类型别名用来给一个类型起个新名字。使用 type 创建类型别名

// 给String类型起别名为s
type s = String;
let str1: s = "123";


let all: string|number|boolean
let a: all = 123
let b: all = true

类型别名常用于联合类型。

2、字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个。

let name = "张三" | "张三丰" | "张大炮"
let a: name = "张三"

上例中，我们使用 type 定了一个字符串字面量类型name，它只能取三种字符串中的一种。

注意，类型别名与字符串字面量类型都是使用 type 进行定义。

3、元组

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。例如定义一对值分别为 string 和 number 的元组：

// 需要按照顺序
let tom: [string, number] = ['Tom', 25];
// 给元组添加内容(不用按照顺序)
tom.push(15888888);
tom.push("秦");

4、枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。枚举使用 enum 关键字来定义：

enum Color {
  Red, // 0
  Green, // 1
  Blue, // 2
}

上面示例声明了一个 Enum 结构Color，里面包含三个成员Red、Green和Blue。第一个成员的值默认为整数0，第二个为1，第二个为2，以此类推。

使用时，调用 Enum 的某个成员，与调用对象属性的写法一样，可以使用点运算符，也可以使用方括号运算符。

let c = Color.Green; // 1
// 等同于
let c = Color["Green"]; // 1

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

5、类

5.1、public private protected

TypeScript 可以使用三种访问修饰符，分别是 public、private 和 protected。

  • public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
  • private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
  • protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的
class Animal {
  public name;
  // 构造函数,创建类的时候会自动调用  
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

上面的例子中，name 被设置为了 public，所以直接访问实例的 name 属性是允许的。很多时候，我们希望有的属性是无法直接存取的，这时候就可以用 private 了：

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // error

当构造函数修饰为 private 时，该类不允许被继承或者实例化：

class Animal {
  public name;
  private constructor(name) {
    this.name = name;
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name);
  }
}

let a = new Animal('Jack');

当构造函数修饰为 protected 时，该类只允许被继承。

5.2、readonly

只读属性关键字，只允许出现在属性声明或索引签名或构造函数中。

class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom'; // error

5.3、抽象类

abstract 用于定义抽象类和其中的抽象方法

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

class Cat extends Animal {
  public sayHi() {
    console.log(`Meow, My name is ${this.name}`);
  }
}

let cat = new Cat('Tom');
  • 抽象类是不允许被实例化的
  • 抽象类中的抽象方法必须被子类实现

给类加上 TypeScript 的类型很简单，与接口类似：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi(): string {
    return `My name is ${this.name}`;
  }
}

let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

5.4、静态成员

类的内部可以使用static关键字，定义静态成员。静态成员是只能通过类本身使用的成员，不能通过实例对象使用。

class MyClass {
  static x = 0;
  static printX() {
    console.log(MyClass.x);
  }
}

MyClass.x; // 0
MyClass.printX(); // 0

上面示例中，x是静态属性，printX()是静态方法。它们都必须通过MyClass获取，而不能通过实例对象调用。

static关键字前面可以使用 public、private、protected 修饰符。

class MyClass {
  private static x = 0;
}

MyClass.x; // 报错

上面示例中，静态属性x前面有private修饰符，表示只能在MyClass内部使用，如果在外部调用这个属性就会报错。

5.5、类实现接口

实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

一个类可以实现多个接口：

interface Alarm {
    alert(): void;
}

interface Light {
    lightOn(): void;
    lightOff(): void;
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

上例中，Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。

5.6、接口继承接口

接口与接口之间可以是继承关系：

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

这很好理解，LightableAlarm 继承了 Alarm，除了拥有 alert 方法之外，还拥有两个新方法 lightOn 和 lightOff。

5.7、接口继承类

常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可以的：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

6、泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

上例中，我们在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array<T> 中即可使用了。接着在调用的时候，可以指定它具体的类型为 string。

6.1、多个类型参数

定义泛型的时候，可以一次定义多个类型参数：

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

上例中，我们定义了一个 swap 函数，用来交换输入的元组。

6.2、泛型约束

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：

function loggingIdentity<T>(arg: T): T {
    // error
    console.log(arg.length);
    return arg;
}

上例中，泛型 T 不一定包含属性 length，所以编译的时候报错了。

这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

上例中，我们使用了 extends 约束了泛型 T 必须符合接口 Lengthwise 的形状，也就是必须包含 length 属性。

6.3、泛型接口

可以使用含有泛型的接口来定义函数的形状：

interface CreateArrayFunc<T> {
    (length: number, value: T): Array<T>;
}

6.4、泛型类

与泛型接口类似，泛型也可以用于类的类型定义中：

// 泛型数字类
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

// 新创建泛型数字类,给泛型的类型是 number
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { 
    return x + y; 
};

6.5、泛型参数的默认类型

在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。

function createArray<T = string>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
生命是有光的
关注
  • 26
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
stats：Typescript Grider； CSV解析和分析
02-14
在IT行业中，TypeScript是一种广泛... CSV解析和分析"这个主题涵盖了TypeScript的基础和进阶应用，特别是与数据处理和前端开发相关的部分。通过理解这些概念和技术，开发者可以构建出高效、健壮的数据分析和展示工具。
masterclass-typescript
03-28
**标题与描述解析** "masterclass-typescript" 这个标题和描述暗示我们这是一个关于TypeScript的高级课程或教程资源，可能包含一系列深入讲解TypeScript的材料。TypeScript是一种由微软开发的开源强类型编程语言，...
TypeScript进阶
最新发布
weixin_42841605的博客
04-26 1015
多个子类可能有共同的行为，将共同的行为放到父类中，但父类中不想对这个行为有一个具体的实现，此时，就需要定义抽象类，再里面写上抽象方法，然后让子类继承这个抽象类，再在子类中实现这个方法，然后使用通用类写上抽象类的参数即可抽象方法：没有方法体的方法(没有具体实现)，必须存在于抽象类中，使用abstract声明的类和方法。抽象类的特点：抽象类不能被实例 （new）抽象类可以包含抽象方法，也可以包含有实现体的方法;有抽象方法的类，必须是一个抽象类；
Vue3+TypeScript从入门到进阶（三）——Vue3基础知识点（上）——附沿途学习案例及项目实战代码
wuyxinu的博客
05-29 2381
一、简介 二、Vue2和Vue3区别 见后续文章 三、Vue知识点学习 见后续文章 四、TypeScript知识点 见后续文章 五、项目实战 见后续文章 六、项目打包和自动化部署 见后续文章 七、沿途学习代码地址及案例地址 1、沿途学习代码地址 https://gitee.com/wu_yuxin/vue3-learning.git 2、项目案例地址 https://gitee.com/wu_yuxin/vue3-ts-cms.git 3、项目访问地址 http://101.34.91.130:8330/l
TypeScript 语法
青蛙king的博客
03-28 2199
目录一、数据类型1、任意类型——Any2、没有任何类型——void3、布尔——boolean4、数字——number5、字符串——string6、数组7、元组8、枚举——enum9、对象值缺失——null 和 未定义的值——undefined10、从未出现的值——never11、对象二、变量1、变量的命名规则2、声明一个变量三、类型推断 与 类型断言1、类型推断2、类型断言三、接口 一、数据类型 TypeScript 数据类型有 12 种： 基本类型（原始类型）： boolean number str
TypeScript语法学习
友人A的博客
06-21 408
typescript
vue + typescript 进阶篇
油墨香^-^的博客
03-06 1049
TypeScript是JavaScript的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的JavaScript代码。由于最终在浏览器中运行的仍然是JavaScript，所以TypeScript并不依赖于浏览器的支持，也并不会带来兼容性问题。TypeScript是JavaScript的超集，这意味着他支持所有的JavaScript语法。并在此之上对JavaScript添加了一些扩展，如classinterfacemodule等。这样会大大提升代码的可阅读性。与此同时，TypeScript也是。
TypeScript 进阶
qq_37440870的博客
08-18 930
typescript 学习进阶
Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
wuyxinu的博客
05-29 2938
一、简介 二、Vue2和Vue3区别 见后续文章 三、Vue知识点学习 见后续文章 四、TypeScript知识点 见后续文章 五、项目实战 见后续文章 六、项目打包和自动化部署 见后续文章 七、沿途学习代码地址及案例地址 1、沿途学习代码地址 https://gitee.com/wu_yuxin/vue3-learning.git 2、项目案例地址 https://gitee.com/wu_yuxin/vue3-ts-cms.git 3、项目访问地址 http://101.34.91.130:8330/l
Vue3+TypeScript从入门到进阶（七）——项目实战——附沿途学习案例及项目实战代码
wuyxinu的博客
05-29 3207
一、简介 二、Vue2和Vue3区别 见后续文章 三、Vue知识点学习 见后续文章 四、TypeScript知识点 见后续文章 五、项目实战 见后续文章 六、项目打包和自动化部署 见后续文章 七、沿途学习代码地址及案例地址 1、沿途学习代码地址 https://gitee.com/wu_yuxin/vue3-learning.git 2、项目案例地址 https://gitee.com/wu_yuxin/vue3-ts-cms.git 3、项目访问地址 http://101.34.91.130:8330/l
typescript （TS）进阶篇 --- 内置高阶泛型工具类型（Utility Type）
秋天，黄叶坠地，凉风有信。
02-21 3190
typescript （TS）进阶篇 --- 内置高阶泛型工具（Utility Type）内置了一些常用的工具类型，比如 Partial、Required、Readonly、Record 和 ReturnType 等。已经前置知识，ts关键字，索引，infer推断，三元语句，类型兼容性等学习
typescript-study
03-10
本文将深入探讨`typescript-study`这一主题，主要针对TypeScript这一强大的静态类型编程语言进行详尽的解析。TypeScript是JavaScript的一个超集，它为开发者提供了更多的工具和特性，以增强代码的可维护性、可读性和...
lets-learn-typescript
03-08
**TypeScript 深度解析：开启编程新旅程** TypeScript 是一种由 Microsoft 开发的开源强类型、面向对象的编程语言，它扩展了 JavaScript 的功能，增加了静态类型系统和类等特性，旨在提高大型项目开发的生产力和...
使用Knockout.js和Underscore.js进行Typescript提前绑定和过滤
04-07
8. **代码组织**：学习如何在Typescript项目中结构化代码，使代码易于维护和扩展。 9. **前端数据交互**：如果涉及.NET，会讲解如何与后端API进行数据交换。 10. **代码示例**：实践是检验真理的唯一标准，理解示例...
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript进阶班之DOM技术(四)
Augenstern_QXL的博客
04-03 4万+
✍、JavaScript进阶班之DOM技术(四)
JavaScript提高班之面向对象(六)
Augenstern_QXL的博客
03-25 3万+
1.面向对象 1.1 类 创建类 class name { // class body } 创建实例 var XX = new name(); ==注意：==类必须使用new 实例化对象 <script> // 1. 创建类 class 创建一个 明星类 class Star { constructor(uname, age) { this.uname = uname;
JavaScript基础之对象与内置对象(三)
Augenstern_QXL的博客
08-03 2万+
✍目录总览 1、对象???? 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的： 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） 1.1、创建对象???? 在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）： 利用字面量创建对象 利用 new Object创建对象 利用构造函数创建对象 ①利用字面量创建对象????
typescript学习笔记
03-04
typescript学习笔记

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生命是有光的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值