5分钟了解TypeScript

更新日期: 2018-06-13阅读量: 2144标签: TypeScript

1.安装TypeScript

有两种方式安装TypeScript:

  • Via npm

  • 通过安装VS插件,更多可参见这里

对于npm用户,可以直接使用下面的命令行安装:

nmp install -g TypeScript

2.创建第一个TypeScript文件

打开editor,最好使用VSCode并且安装TypeScript插件支持。创建greeter.ts文件,并写入:

function greeter(person) {
    return "Hello, " + person;
}
let user = "Jane User";
document.body.innerhtml = greeter(user);

3.编译你的代码

TypeScript文件后缀都是.ts。虽然我们使用的是ts后缀,但是上面写的这些code就只是JavaScript内容,你可以直接copy一下,然后使用这些内容进行测试。打开终端,找到该文件所在目录,执行以下命令:

tsc greeter.ts

便会声称一个greeter.js文件,里面内容如下:

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerhtml = greeter(user);

其实刚才的ts文件内容和编译出来的js内容是一样的,在web application中,可以直接使用编译出来的js文件。

现在,可以使用TypeScript的一些新特性,添加 : string来注释person的类型:

function greeter(person: string) {
    return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);

4.Type annotations

在TypeScript中,Type annotations可以用来标识变量或者参数的类型,在上面的例子中,使用了string类型来标识person。那么这个时候一旦将代码更改为:

function greeter(person: string) {
    return "Hello, " + person;
}
let user = [1,2,3];
document.body.innerHTML = greeter(user);

编译器就会报错:

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

同样地,如果在调用greeter函数的时候什么也不传入,则会报错误:

greeter.ts(7,27): error TS2554: Expected 1 arguments, but got 0.

也就是说,TypeScript会根据代码结构和提供的类型注释提供代码静态分析。

虽然报错,但greeter.js还是被生成了,你可以继续使用包含错的的TypeScript,但是结果可能不会满足你的预期。 


5.Interface

还是在上面的demo代码基础上进行修改,我们可以使用interface来描述一个对象有firstName和lastName两个属性。在TypeScript中,如果其内部结构兼容,则两种类型兼容。这就说明了我们可以通过Interface来实现对象,而不需要implement去实现。

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);

这里需要注意,interface里面只能声明属性或者签名,而无法添加方法。


6.class

TypeScript支持JavaScript的新功能,其中很重要的一个功能就是基于类的面向对象编程(OOP)。

这里创建一个Student的类,它有一个构造函数和一个属性。看一下下面的代码,你会发现类和Interface在一起结合的很完美,程序员可以自己决定正确的抽象。另外,还有一个public的关键字,和java中的public类似:

class Student {
    fullName: string;
    constructor(public firstName: string,public middleInitial: string,public lastName: string) {
        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);


值得关注的是,我们将上面代码进行编译为js文件,你可以看到编译后的文件为:

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;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);


其实就是个Student的函数。说了这么多,怎么能直接看到运行效果呢?很简单,创建一个html文件,然后在里面引用编译的js文件即可:

<!DOCTYPE html>
    <head>
        <title>TypeScript Greeter</title>
    </head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

使用浏览器打开此html文件即可运行 ~ ~另外,VSCode的提供也是很强大的,具体自己感受。


来源:https://www.cnblogs.com/zhanggui/archive/2018/06/12/9173660.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/876

Typescript中以变量方式传递类

最近尝试用TypeScript写一个工具库,需要实现这样一个场景:声明一个抽象类Parent,声明一组子类ChildA、ChildB继承这个Parent,实现它的抽象方法

为什么要用TypeScript?

TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序。另外它还提供了一些语法来帮助大家更方便地实践面向对象的编程。

抛弃 JS,使用 TypeScript

最近几个月我已经全面抛弃 JavaScript,完全使用 TypeScript 进行前端开发(只在上课的时候用到 JS)。先说优点:bug 显著减少,之前会遇到的 xxx 为空的问题几乎不会出

typescript nodejs 依赖注入实现

依赖注入通常也是我们所说的ioc模式,今天分享的是用typescript语言实现的ioc模式,这边用到的主要组件是 reflect-metadata 这个组件可以获取或者设置元数据信息,它的作用是拿到原数据后进行对象创建类似C#中的反射

TypeScript 渐进迁移指南

最大的问题是我没有提供迁移大型项目的解决方案。显然,大型项目不可能在短时间内重写一切。因此,我很想分享下我最近学到的迁移项目到 TypeScript 的主要经验。

Typescript 进阶

这是一篇自己总结的 Typescript type相关的进阶文章,适合有一定ts基础,并在type编写方面感到迷惑、感到绝望的同学,也给那些入门Typescript已久,却无法更上一层楼的童鞋一个方向

TypeScript魔法堂:函数类型声明其实很复杂

江湖有传“动态类型一时爽,代码重构火葬场”,由于动态类型语言在开发时不受数据类型的约束,因此非常适合在项目原型阶段和初期进行快速迭代开发使用,这意味着项目未来将通过重写而非重构的方式进入成熟阶段

TypeScript 中的类型保护

如上所示,getSmallPet 函数中,既可以返回 Fish 类型的对象,又可以返回 Bird 类型的对象。由于返回的对象类型不确定,所以使用联合类型对象共有的方法时,一切正常,但是使用联合类型对象各自独有的方法时,ts 会报错。

你应该知道的TypeScript高级概念

例如我们这定义一个叫做printPost的函数,那这个函数可以接收一个文章对象参数post,然后在函数的内部去打印文章的title, 然后再去打印他的content属性。

10个帮助你捕获更多Bug的TypeScript建议

有一个对TypeScript常见的误解是:一个变量只要标注了类型,那么它总是会检查自己的数据类型是否与我们的预期一致。与该误解相呼应的想法会认为:对一个从后端返回的对象进行类型标注可以在代码运行时执行检查来确保对象类型的正确性。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!