TypeScript最新语法总结

本文是对最新的TypeScript4的重点语法的总结。

前端技术

827人浏览 · 2023-08-04 11:26:08

前端技术 · 2023-08-04 11:26:08 发布

注意注意！！！本文介绍的是最新的TypeScript4的重要语法

第一部分：TypeScript的简介

TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言，可以让 JavaScript 开发大型企业项目。谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+ 就是基于 Typescript 语法，最新的 Vue 、React 也可以集成 TypeScript。Nodejs 框架中的 Nestjs、midway 中用的就是 TypeScript 语法。
关于如何安装TypeScript的请参考前文哦……

第二部分：TypeScript4数据类型

小编总结出一共有12种类型（如有纠错，可以在评论区留言哦）。分别是：
1、number类型

let num: number = 100
console.log(num)

2、string类型

let str: string  'Hello'
console.log(str)

3、boolean类型

let flag: boolean = true
console.log(falg)

4、null类型

let n: null = null
console.log(n)

5、undefined类型

let u: undefined = undefined
console.log(u)

6、数组类型

let arr: number[] = [1, 2, 3, 4, 5]
console.log(arr)

// 或者使用泛型定义数组（后面会学到泛型）
let arr2: Array<number> = [1, 2, 3, 4, 5]
console.log(arr2)

7、元组类型

let user: [string, number] = ["小黄", 20]
console.log(user)

8、any类型

let flag: any = 1
flag = 'Hi'
flag = true
console.log(flag)

9、void类型（表示没有任何类型，通常用于定义函数的时候函数没有返回值）

function print(): void {
  console.log("执行了，但是没有返回值！")
}
print()

10、never类型（表示没有任何类型，通常用于定义抛出错误的函数类型）

function error(): never {
  throw new Error('抛出错误了')
}

11、枚举类型
第一种情况：只有标识符没有赋值，那么属性的值就是该属性的下标

enum Flag {
  first,
  second,
  third
}
let a: Flag = Flag.first
console.log(a)  //值为0

第二种情况：如果标识符已经赋值，那么属性的值就是被赋的值

enum Flag {
  first,
  second = 200,
  third
}
let b: Flag = Flag.second
console.log(b)  //值为200

12、组合类型

let flag: number | string = 100
flag = 'Hello'
console.log(flag)

第三部分：TypeScript4函数

首先，我们先来看看函数的格式，函数通常有两种格式。
函数格式一：

function 函数名(参数列表): 返回值类型 {
  函数体……
  [return 返回值]
}

函数格式二：

let 函数名 = function(参数列表): 返回值类型 {
  函数体……
  [return 返回值]
}

重点！函数的参数类型：
1、必选参数

function getInfo(name: string, age: number): string {
  return `${name} --- ${age}`
}
console.log(getInfo('张三', 18))  //正确
console.log(getInfo('张三'))  //错误
console.log(getInfo(18))  //错误

2、可选参数
注意！！！可选参数必须放到最后面

function getInfo(name: sqtring, age?: number): string {
  return `${name} --- ${age}`
}
console.log(getInfo('张三', 18))  //正确
console.log(getInfo('张三'))  //正确
console.log(getInfo(18))  //错误

3、默认参数

function getInfo(name: string, age: number = 20): string {
  return `${name} --- ${age}`
}
console.log(getInfo('张三', 18))  //正确
console.log(getInfo('张三'))  //正确
console.log(getInfo(18))  //错误

4、剩余参数
注意！！！剩余参数必须放到最后面

function sum(...result: number[]): number {
    let sum = 0
    for (let i = 0; i < result.length; i++) {
        sum += result[i]
    }
    return sum
}
console.log(sum(1, 2, 3, 4, 5, 6))

function sum(init: number, ...result: number[]): number {
    let sum = init
    for (let i = 0; i < result.length; i++) {
        sum += result[i]
    }
    return sum
}
console.log(sum(100, 1, 2, 3, 4, 5, 6))

第四部分：TypeScript4的类

1、类的定义

class Person {
    name: string  //属性，前面省略了public关键词

    constructor(n: string) {  //构造函数，实例化类的时候触发的方法
        this.name = n  //使用this关键字为当前类的name属性赋值
    }

    run(): void {  //方法
        console.log(this.name+ "在跑步")
    }
}
var p = new Person("张三")
p.run()

2、类的继承
类的继承：在 TypeScript 中要想实现继承使用 extends 关键字，只要一旦实现了继承关系，那么子类中便拥有了父类的属性和方法，而在执行方法过程中，首先从子类开始找，如果有，就使用，如果没有，就去父类中找。类的继承只能单向继承。

class Person {
    name: string  //父类属性，前面省略了public关键词

    constructor(n: string) {  //构造函数，实例化父类的时候触发的方法
        this.name = n  //使用this关键字为当前类的name属性赋值
    }

    run(): void {  //父类方法
        console.log(this.name + "在跑步")
    }
}

//中国人这个类继承了人这个类
class Chinese extends Person {
    age: number  //子类属性

    constructor(n: string, a: number) {  //构造函数，实例化子类的时候触发的方法
        super(n)  //使用super关键字调用父类中的构造方法
        this.age = a  //使用this关键字为当前类的age属性赋值
    }

    speak(): void {  //子类方法
        super.run()  //使用super关键字调用父类中的方法
        console.log(this.name + "说中文")
    }
}
var c = new Chinese("张三", 28)
c.speak()

3、类的修饰符
TypeScript 里面定义属性的时候给我们提供了三种修饰符。
（1）public：公有类型，在当前类里面、子类、类外面都可以访问；
（2）protected：保护类型，在当前类里面、子类里面可以访问，在类外部没法访问；
（3）private：私有类型，在当前类里面可以访问，子类、类外部都没法访问。

注意！！！如果属性不加修饰符，那么就是默认公有(public)

4、类的静态属性
静态属性：被静态修饰符修饰的属性就是静态属性，静态属性可以通过类名直接调用。

class Person {
    name: string  //属性，前面省略了public关键词
    static sex: string = "男"  //被静态修饰符static修饰的属性

    constructor(n: string) {  //构造函数，实例化类的时候触发的方法
        this.name = n
    }

    run(): void {  //方法
        console.log(this.name+ "在跑步")
    }
}
console.log(Person.sex)

5、类的静态方法
也是很简单的，静态方法可以通过类名直接调用。

class Person {
    name: string  //属性，前面省略了public关键词
    static sex: string = "男"  //被静态修饰符static修饰的属性

    constructor(n: string) {  //构造函数，实例化类的时候触发的方法
        this.name = n
    }

    run(): void {  //方法
        console.log(this.name + "在跑步")
    }

    static print(): void {  //被静态修饰符static修饰的方法
        // console.log('姓名：' + this.name)  //错误
        console.log('性别：' + Person.sex)  //正确
        // this.run()  //错误
    }
}
Person.print()

6、抽象类
TypeScript 中的抽象类：它是提供其他类继承的基类，不能直接被实例化。

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类（也就是其子类）中实现，abstract抽象方法只能放在抽象类里面。

我们常常使用抽象类和抽象方法用来定义标准。

//动物抽象类，所有动物都会跑（假设），但是吃的东西不一样，所以把吃的方法定义成抽象方法
abstract class Animal {
    name: string
    constructor(name: string) {
        this.name = name
    }
    abstract eat(): any  //抽象方法不包含具体实现并且必须在派生类中实现
    run() {
        console.log(this.name + "会跑")
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name)
    }
    eat(): any {  //抽象类的子类必须实现抽象类里面的抽象方法
        console.log(this.name + "吃骨头")
    }
}
var d: Dog = new Dog("小狼狗")
d.eat()

class Cat extends Animal {
    constructor(name: string) {
        super(name)
    }
    eat(): any {  //抽象类的子类必须实现抽象类里面的抽象方法
        console.log(this.name + "吃老鼠")
    }
}
var c: Cat = new Cat("小花猫")
c.eat()

第五部分：TypeScript4接口

学过Java的同学应该明白接口的干嘛的，没学过也没关系，也是很简单的东西，不要方啦。
接口的用途就是对行为和动作进行规范和约束，跟抽象类有点像，但是，接口中不能有方法体，只允许有方法定义。
接口主要有以下几种：
1、属性类型接口

//这个是一个属性类型接口
interface FullName {
    firstName: string;
    secondName: string;
}

function printName(name: FullName) {
    console.log(name.firstName + "--" + name.secondName)
}

//传入的参数必须包含firstName、secondName
var obj = {
    firstName: '张',
    secondName: '三'
};
printName(obj)

2、函数类型接口

//以下是一个函数类型接口
interface encrypt {
    (key: string, value: string): string;
}

var testFunc1: encrypt = function (key, value) {
    return key + "----" + value
}
console.log(testFunc1("name", "zhangsan"))

var testFunc2: encrypt = function (key, value) {
    return key + "====" + value
}
console.log(testFunc2("name", "lisi"))

3、可索引型接口

//以下是一个可索引型接口，对数组的约束
interface UserArr {
    [index: number]: string
}
var arr1: UserArr = ["aaa", "bbb"]
console.log(arr1[0])

//以下是一个可索引接口，对对象的约束
interface UserObj {
    [index: string]: string
}
var arr2: UserObj = { name: '张三', age: '21' }
console.log(arr2)

4、类类型接口

//以下是一个类类型接口，用于对类的约束
interface Animal {
    name: string;
    eat(str: string): void;
}

class Dog implements Animal {
    name: string
    constructor(name: string) {
        this.name = name
    }
    eat() {
        console.log(this.name + "吃大骨头")
    }
}
var d = new Dog("小狼狗")
d.eat()

class Cat implements Animal {
    name: string
    constructor(name: string) {
        this.name = name
    }
    eat(food: string) {
        console.log(this.name + "吃" + food)
    }
}
var c = new Cat("小花猫")
c.eat("大老鼠")

5、接口的继承

//人接口
interface Person {
    eat(): void;
}

//程序员接口
interface Programmer extends Person {
    code(): void;
}

//小程序接口
interface Web {
    app(): void;
}

//前端工程师
class WebProgrammer implements Programmer, Web {
    public name: string
    constructor(name: string) {
        this.name = name
    }
    eat() {
        console.log(this.name + "下班吃饭饭")
    }
    code() {
        console.log(this.name + "上班敲代码")
    }
    app() {
        console.log(this.name + "开发小程序")
    }
}
var w = new WebProgrammer("小李")
w.eat()
w.code()
w.app()

第六部分：TypeScript4泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件。

通俗理解：泛型就是解决类、接口、方法的复用性、以及对不特定数据类型的支持。
泛型主要有以下两种：
1、泛型类

//类的泛型
class MinClas<T>{
    public list: T[] = []
    add(value: T): void {
        this.list.push(value)
    }
    min(): T {
        var minNum = this.list[0]
        for (var i = 0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i]
            }
        }
        return minNum
    }
}
//实例化类并且制定了类的T代表的类型是number
var m1 = new MinClas<number>()
m1.add(11)
m1.add(3)
m1.add(2)
console.log(m1.min())
//实例化类并且制定了类的T代表的类型是string
var m2 = new MinClas<string>()
m2.add('c')
m2.add('a')
m2.add('v')
console.log(m2.min())

2、泛型接口

//泛型接口
interface ConfigFn<T> {
    (value: T): T;
}

function getData<T>(value: T): T {
    return value
}
var myGetData: ConfigFn<string> = getData
console.log(myGetData('20'))

第七部分：命名空间

命名空间：在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的函数、类、接口等放置到命名空间内，同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过export关键字对外暴露。

namespace A {
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string
        constructor(theName: string) {
            this.name = theName
        }
        eat(): void {
            console.log(`${this.name} 吃狗粮。`)
        }
    }
    export class Cat implements Animal {
        name: string
        constructor(theName: string) {
            this.name = theName
        }
        eat(): void {
            console.log(`${this.name} 吃猫粮。`)
        }
    }
}

namespace B {
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string
        constructor(theName: string) {
            this.name = theName
        }
        eat(): void {
            console.log(`${this.name} 吃狗粮。`)
        }
    }
    export class Cat implements Animal {
        name: string
        constructor(theName: string) {
            this.name = theName
        }
        eat(): void {
            console.log(`${this.name} 吃猫粮。`)
        }
    }
}
var ac = new A.Cat("小花")
ac.eat()

var bc = new B.Cat("小花")
bc.eat()