威尼斯wns.9778官网 > 计算机教程 > 5分钟了解TypeScript

原标题:5分钟了解TypeScript

浏览次数:125 时间:2019-05-10

1.安装TypeScript

有两种方式安装TypeScript:

  • Via npm

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

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

nmp install -g TypeScript

建议阅读者有一定JavaScript编程基础者,会C、PHP等语言就会发现一切似曾相识。翻译自官方文档Quick start

2.创建第一个TypeScript文件

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

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

TypeScript是JavaScript超集,提前实现了ECMAScript部分新标准及增加了许多特性,以提高大型项目代码的可靠性及可维护性。目前由Microsoft方面主导维护,Google团队维护的Angular2项目也开始基于TypeScript构建。

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);
使用TypeScript编写的代码最终会通过编译器转换为兼容现行浏览器的普通JavaScript代码,并在编译时进行自动代码检查。

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,但是结果可能不会满足你的预期。 

安装TypeScript

你需要安装TypeScript来实现代码的编译及其它功能。有两种方法:

  • 通过npm(Node.js包管理工具)安装 (后文以此为例)
~> npm install -g typescript
  • 使用Visual Studio的可以直接安装插件
微软的集成开发环境Visual Studio最新版已默认自带TypeScript插件(当然你也可以只使用Visual Studio Code)。

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里面只能声明属性或者签名,而无法添加方法。

创建首个TypeScript文件

TypeScript文件的后缀为.ts,我们创建一个新文件kill.ts(放轻松,就当JS写,TypeScript完全兼容):

function kill(person) {
    return "You died, "   person;
}
var user = "Sunkey fong";
document.body.innerHTML = kill(user);

在命令行进入文件所在目录并输入tsc kill.ts就会得到一个编译好的kill.js文件。

就是这样,你可以自由在ts里使用TypeScript的特性了,编译器将会处理代码查错及转换为高兼容性js文件的工作。

本文由威尼斯wns.9778官网发布于计算机教程,转载请注明出处:5分钟了解TypeScript

关键词:

上一篇:威尼斯wns.9778官网Windows程序设计:格式化对话框

下一篇:没有了