TypeScript(初步了解)
*文档基于TypeScript中文文档进行学习
npm 安装TypeScript:
npm install -g typescript
构建第一个TS文件
// greeter.ts
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
编译代码
在命令行上,运行TypeScript编译器:
tsc greeter.ts
输出结果为一个 greeter.js 文件,包含了和输入文件中相同的JS代码。
类型注释
TS里的类型注释是一种轻量级的为函数或变量添加约束的方式。
例:将 greeter 的调用改为传入一个数组:
// greeter.ts 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'.
类似地,尝试删除greeter
调用的所有参数。 TypeScript会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中,TypeScript提供了静态的代码分析,它可以分析代码结构和提供的类型注解。
要注意的是尽管有错误,greeter.js
接口
// greeter.ts 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);
类
最后,让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。
让我们创建一个Student
类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作,程序员可以自行决定抽象的级别。
还要注意的是,在构造函数的参数上使用public
// greeter.ts 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);
//greeter.js /*创建类 方法1*/ var Student = /** @class */ (function () { function Student(firstName, middleInitial, lastName) { this.firstName = firstName; this.middleInitial = middleInitial; this.lastName = lastName; this.fullName = firstName + " " + middleInitial + " " + lastName; } return Student; }()); /*创建类 方法2*/ class Student{ constructor(firstName, middleInitial, lastName){ this.firstName = firstName; this.middleInitial = middleInitial; this.lastName = lastName; this.fullName = firstName + " " + middleInitial + " " + lastName; } } /*方法1效果等同于方法2*/ function greeter(person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user);
只有向前走,才不会被淘汰