文档章节

如何用TypeScript来创建一个简单的Web应用

durban
 durban
发布于 2018/07/23 20:58
字数 950
阅读 46
收藏 1

转载地址

如何用TypeScript来创建一个简单的Web应用

安装TypeScript

获取TypeScript工具的方式:
    通过npm(Node.js包管理器)

npm install -g typescript

构建你的第一个TypeScript文件

创建项目文件夹

mkdir typescript_demo && cd typescript_demo

创建文件greeter.ts

touch greeter.ts

将下面的代码写入greeter.ts中

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

let user = "Durban Zhang";

document.body.innerHTML = greeter(user);

编译代码

这里使用.ts扩展名,但是这段代码仅仅是JavaScript而已。 你可以直接从现有的JavaScript应用里复制/粘贴这段代码。

在命令行上,运行TypeScript编译器:

tsc greeter.ts

输出结果为一个greeter.js文件,它包含了和输入文件中相同的JavsScript代码。 一切准备就绪,我们可以运行这个使用TypeScript写的JavaScript应用了!接下来让我们看看TypeScript工具带来的高级功能。 给 person函数的参数添加: string类型注解,如下:

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

let user = "Durban Zhang";

document.body.innerHTML = greeter(user);

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里,我们希望 greeter函数接收一个字符串参数。 然后尝试把 greeter的调用改成传入一个数组:

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

let user = "Durban Zhang";

document.body.innerHTML = greeter(user);

重新编译,你会看到如下产生 的一个错误。

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

7 document.body.innerHTML = greeter(user);

类似地,尝试删除greeter调用的所有参数。 TypeScript会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中,TypeScript提供了静态的代码分析,它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误,greeter.js文件还是被创建了。 就算你的代码里有错误,你仍然可以使用TypeScript。但在这种情况下,TypeScript会警告你代码可能不会按预期执行。

接口

这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里,只在两个类型内部的结构兼容那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以,而不必明确地使用 implements语句。

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

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

let user = { firstName: "Durban", lastName: "Zhang" };

document.body.innerHTML = greeter(user);

最后,让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。

让我们创建一个Student类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作,程序员可以自行决定抽象的级别。还要注意的是,在构造函数的参数上使用public等同于创建了同名的成员变量。

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

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

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

let user = new Student("Durban", "M.", "Zhang");
document.body.innerHTML = greeter(user);

重新运行tsc greeter.ts,你会看到生成的JavaScript代码和原先的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。

运行TypeScript Web应用

创建greeter.html并在里面输入如下内容:
 

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

实践项目地址

https://github.com/durban89/typescript_demo.git
tag: 1.0.0

© 著作权归作者所有

durban
粉丝 101
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,...

红薯
2012/10/07
65K
35
TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进 步的地方 包括:加入注释...

彭博
2012/11/27
948
0
我们应该如何(以及为什么)要将Typescript与Express、nodejs一起使用(译文)

在我的职业生涯开始时,我是一名桌面应用开发人员,其中强类型语言占据了市场主导地位。 当我迁移到Web开发时,我对JavaScript和Python等语言的每个新功能都很着迷。事实上,我没有必要声明变...

前端技术小哥
2018/11/19
0
0
TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开...

powertoolsteam
2018/06/29
0
0
react与typescript搭配干活就是不累(译)

原文地址 作者:Ross Bulat 注:本文并非直译 一份用Typescript开发react和redux应用的指南 typescript在增强react应用的稳定性,可读性以及易管理性方面一直都处在非常重要的位置上,types...

下半身要幸福
02/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac部分目录读写提示“Operation not permitted”解决

今天试图在mac os x下重命名/usr/bin/python,提示Operation not permitted,虽然我是root,很奇怪。原来mac os x里还有一个安全机制:rootless,少用root。参考这篇文章如何开关rootless,不...

swingcoder
24分钟前
1
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

oschina130111
30分钟前
0
0
信必优成功案例 – 中国网络电视台(CNTV)

项目背景 •中国网络电视台(英文简称CNTV),由央视国际网络有限公司主办,是中央电视台旗下的国家网络广播电视播出机构。中国网络电视台全面部署多终端业务架构,已建设网络电视、IP电视、...

symbiochina88
31分钟前
0
0
redis cluster集群 三主三从

redis 集群一般由 多个节点 组成,节点数量至少为 6 个,才能保证组成 完整高可用 的集群。每个节点需要 开启配置 cluster-enabled yes,让 redis 运行在 集群模式 下。 redis5之后使用redis...

MonroeCode
32分钟前
0
0
新东方的Kubernetes实践:从服务化ES到Kafka和Redis

2017年,新东方开始了利用容器化手段将中间件业务服务化的探索,基于Rancher 1.6使用ES;2019年,新东方再次开始了扩大了中间件的业务服务化,基于Kubernetes使用Kafka、ES和Redis。在服务化...

RancherLabs
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部