首页 前端知识 TypeScript最新语法总结

TypeScript最新语法总结

2024-05-19 09:05:57 前端知识 前端哥 352 806 我要收藏

注意注意!!!本文介绍的是最新的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()

好啦,以上就是本次关于最新的TypeScript4的重点总结啦,并不是太难的,希望对大家有所帮助,后续还会继续出文更新有关TS的其他内容哦,欢迎大家在下方留言^^

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8879.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!