您的位置：首页 > Web前端 > AngularJS

【angular】TypeScript 搭建

2017-11-28 22:06 387 查看

TypeScript 有一些先天的优势：高度兼容原生脚本语法（甚至可以混着写）对语法的破坏性较少，即使没接触过的人，也能很快上手，初次阅读也没有什么障碍如名字所述，它讲究基于接口的强类型，因此非常适合原本的服务器开发者使用提供了大量编辑器的集成，有现有大量库的 .ts 元文件可用

静态类型检查

IDE 智能提示

代码重构

可读性

自从angular宣布2.0 基于TypeScript构建。TypeScript一下子火起来了。

TypeScript是众多以js为编译目标的语言中，做的最好的之一

安装TypeScript

npm install -g typescript

构建你的第一个TypeScript文件

index.ts

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

var user = "Jane User";

document.body.innerHTML = sayHi(user);

编译代码

tsc index.ts

类型注解

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

var user = [0, 1, 2];

document.body.innerHTML = sayHi(user);

接口

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

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

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

document.body.innerHTML = sayHi(user);

允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

类

支持基于类的面向对象编程。

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

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

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

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

document.body.innerHTML = sayHi(user);

运行TypeScript Web应用

index.html

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

angular、spring cloud 开源实战项目源码：https://gitee.com/xfdm/FCat

QQ群：549141844

代码持续更新…

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular

相关文章推荐

新的分享

章节导航