|

10分钟搞定TypeScript

作者daliane

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

类似文章