1.npm install -g typescript

在编辑器,将下面的代码输入到greeter.ts文件里:

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

类型注解

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

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文件还是被创建了。 就算你的代码里有错误,你仍然可以使用TypeScript。但在这种情况下,TypeScript会警告你代码可能不会按预期执行。

接口

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

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等同于创建了同名的成员变量。

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

重新运行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>

等等

 

对TypeScript进行研究的更多相关文章

  1. TypeScript是什么,为什么要使用它?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://medium.com/swlh/what-is-typescript-bf333e ...

  2. TypeScript 编译器源码研究(一)

    TypeScript (以下简称 TS)是一个非常强大的语言,其编译器源码超过 10000 行. 源码在 Github 可以找到:https://github.com/Microsoft/TypeSc ...

  3. 转职成为TypeScript程序员的参考手册

    写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http:/ ...

  4. 转载:《TypeScript 中文入门教程》 9、泛型

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性. 组件不 ...

  5. Typescript 其实就想排个序和枚举取数

    Typescript里的sort和C#差不多,但是略有不太一样,反正官方文档没说明白,就自己研究吧 list =list.sort((n1,n2) => { if(n1 > n2) { r ...

  6. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  7. 使用TypeScript开发程序

    简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript ...

  8. angular2 学习笔记 (Typescript)

    1.接口奇葩验证 interface Abc { name : string } function abc(obj : Abc) { } let ttc = { name: "adad&qu ...

  9. TypeScript开发Vue

    用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象 目录 背景 解决方案 关于Vue中的计算属性类型 TypeScript的强制类型声明语法 强制类型声明的局限 ...

随机推荐

  1. 使用putty远程登录Ubuntu时,报Network error:Connection refused错误及解决(记录)

    putty远程登录Ubuntu,弹出Network error:Connection refused的错误提示框,就是因为Ubuuntu没有安装ssh服务.执行命令: sudo apt-get ins ...

  2. Pycharm最新激活码汇总,pycharm2019激活码

    Pycharm激活码汇总 激活过程如下: 1.双击运行桌面上的Pycharm图标,进入下图界面,选择Do not import settings,之后选择OK,进入下一步. 2.拖动到底部,选择Acc ...

  3. Akka系列(六):Actor解决了什么问题?

    前言..... 文档来源于  : What problems does the actor model solve? Actor解决了什么问题? Akka使用Actor模型来克服传统面向对象编程模型的 ...

  4. python nonlocal 的具体原理

    很多文章都大概列了下nonlocal的具体用法,比如看到几篇文章写的 “nonlocal关键字用来在函数或其他作用域中使用外层(非全局)变量” 看完以后我感觉自己是懂了,但光从这句话来说还没完全理解它 ...

  5. java 集合 队列(Queue)

    特点:特殊线性表,先进先出(FIFO first-in-first-out) 方法: java5中 添加java.util.Queue接口,java.util.Collection 的扩展类 add( ...

  6. Elasticsearch入门教程(二):Elasticsearch核心概念

    原文:Elasticsearch入门教程(二):Elasticsearch核心概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:ht ...

  7. vim学习(一)之简介、安装、配置

    vim简介 Vim是从 vi 发展出来的一个文本编辑器,是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面. 简单的来说, vi 是老式的文字处理器,不过功能已经很齐全了,但是还是 ...

  8. javascript 与node的 event-loop

    参考:https://juejin.im/post/5c337ae06fb9a049bc4cd218 https://github.com/forthealllight/blog/issues/5 h ...

  9. json字符串和json对象

    在对接口的时候,需要对某些地方进行字符串拼接的操作 现在我需要的是让图表中只默认显示前三条数据, 我的思路是先循环取出来三条外的公司名字 //声明前三个公司之外的公司数组 var selectcomp ...

  10. [转载]一个支持Verilog的Vim插件——自动插入always块

    原文地址:一个支持Verilog的Vim插件--自动插入always块作者:hover 插件支持always块的自动插入,如果用户要插入时序always块,需要在端口声明中标志时钟和异步复位信号(仅支 ...