A-A+

10分钟搞定TypeScript

2017年04月18日 APP开发, javascript 暂无评论 阅读 37 views 次

1.安装:npm install -g typescript
有两种主要的方式获取TypeScript工具。

通过npm(Node.js包管理器)
安装TypeScript的Visual Studio插件
Visual Studio2015和Visual Studio 2013 Update 2默认包含了TypeScript。如果你没有安装包含TypeScript的Visual Studio ,你仍然可以下载。

使用NPM的开发者:

npm install -g typescript

2.创建第一个TypeScript文件并编译
创建a.ts
内容如下:

function a(a){
return "Hi,"+a;
}
var user = "daliane";

document.body.innerHTML = a(user);

编译: tsc a.tsc

生成a.js

主要告诉你,a.ts文件是typescript的文件,可以编译成js

 

3.什么是类型注释 就是给参数定好了是什么类型

function a(a:string){
return "Hi,"+a;
}
var user = "daliane";

document.body.innerHTML = a(user);

 

此时,如果把user=[1,2,3];就会报错,但仍然可以编译,只是结果就不一定是什么玩意了。

4.接口要怎么理解?就是把对象下面的属性拎出来,并定义类型。没啥玩意。

 

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

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

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

document.body.innerHTML = greeter(user);

 

5.类? 有了接口,当然下一步就是类了。

 

最后,让我们最后一次使用类来继续开发demo。TypeScript支持新的JavaScript特性,像基于类的面向对象编程的支持。

在这里,我们创建一个具有构造函数和一些公共字段的Student类。注意:类和接口的良好配合使用,决定一个程序员的抽象水平。

此外,在构造函数参数中使用public是一种简写形式,它将自动创建具有该名称的属性。

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

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

document.body.innerHTML = greeter(user);
再次运行tsc greeter.ts,你将看到生成的JavaScript代码和以前的一样。TypeScript中的类只是对于经常在JavaScript中使用了相同的基于原型的面向对象的简写。

 

6.运行TypeScript web应用程序

现在在greeter.html中输入以下代码:

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

在浏览器中打开greeter.html去运行第一个TypeScript web应用程序demo!

 

greet_person

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: