欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TypeScript总结

程序员文章站 2022-03-05 08:17:47
...

TypeScript主要是为了解决JavaScript的弱类型和没有命名空间的特点。JS作为弱类型语言,好处就是编译的时候更简洁更灵活,但对于大型项目,强类型更有利,可以降低系统的复杂度,在编译时就发现类型错误。
在语法上,TypeScript并没有摒弃JS语法,而是做成了JS的超集,因此任何JS语句在TypeScript下都是合法的。

安装

通过npm安装

npm install -g typescript

创建TypeScript文件

在编译器里创建一个.ts文件hello.ts

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

编译代码

在命令行运行TypeScript编译器

tsc greeter.ts

然后会输出一个hello.js文件

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。
例如:

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

这时编译后会报错

greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

这就是TS的类型检测
声明变量类型后,其他任何类型的赋值都会引起编译错误。

但尽管提示错误,还是会创建js文件。

接口

接口可以扩展一个实例,可以作为类型注解使用。

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

类包含构造函数和一些公共字段,可以和接口一起运作。

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

模块化

利用TypeScript的module,可以起到命名空间的效果,export可以控制是否能被外部访问。

运行TypeScript

与普通js一样,在html中加入script标签。

相关标签: typescript