创建简单的web应用

1.安装：cnpm install -g typescript

2.第一个TypeScript文件

(1)创建：greeter.ts(2)编译：在ts文件所在的根目录下面用tsc greeter.ts 编译。编译结果是生成一个js文件(3)类型注解：一种轻量级的为函数或变量添加约束的方式(4)接口：关键字interface声明(5)类：关键字class声明1)类和接口可以一起工作，程序员自行决定抽象的级别；2)在构造函数的参数上使用public等同于创建了同名的成员变量(6)运行web应用：在html文件中直接引入编译生成的js文件即可

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Test</title><script type="text/javascript" src="greeter.js"></script>
</head>
<body></body>
</html>

greeter.ts

/*** Created by yangjiao on 2017/12/20.*/
// 添加类
class Student {fullName: string;constructor(public firstName: string, public middleInicail: string, public lastName: string){this.fullName = firstName + ' ' + middleInicail + '' + lastName;}
}// 添加接口
interface Person {firstName: string,lastName: string
}function greeter(person: Person){   // 类型注解 : stringreturn 'Hello ' + person.firstName + person.lastName;
}
let user = new Student('hello', 'world', 'middle');
console.log(greeter(user));

greeter.js

/*** Created by yangjiao on 2017/12/20.*/
// 添加类
var Student = /** @class */ (function () {function Student(firstName, middleInicail, lastName) {this.firstName = firstName;this.middleInicail = middleInicail;this.lastName = lastName;this.fullName = firstName + ' ' + middleInicail + '' + lastName;}return Student;
}());
function greeter(person) {return 'Hello ' + person.firstName + person.lastName;
}
var user = new Student('hello', 'world', 'middle');
console.log(greeter(user));

转载于:https://my.oschina.net/yj1993/blog/1592423

TypeScript学习笔记（第一天）------创建简单的web应用相关推荐

blfs（systemv版本）学习笔记-使用apache创建简单的网页服务器
apache项目地址:http://www.linuxfromscratch.org/blfs/view/stable/server/apache.html 一.编译安装apache apache的依 ...
TypeScript学习笔记1：变量赋值及书写方式
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录变量赋值 ...
《Go语言圣经》学习笔记第一章 Go语言入门
Go语言圣经学习笔记第一章 Go语言入门目录 Hello, World 命令行参数查找重复的行 GIF动画获取URL 并发获取多个URL Web服务本章要点注:学习<Go语言圣经&g ...
【opencv学习笔记八】创建TrackBar轨迹条
createTrackbar这个函数我们以后会经常用到,它创建一个可以调整数值的轨迹条,并将轨迹条附加到指定的窗口上,使用起来很方便.首先大家要记住,它往往会和一个回调函数配合起来使用.先看下他的函数 ...
PhalAPI学习笔记 ——— 第一章自定义HelloWorld接口
PhalAPI学习笔记 --- 第一章自定义HelloWorld接口前言自定义接口项目实例结果分布解析结束语前言公司业务需要转学PHP,而PHP中一个功能强大且生态链完整的PHP接口框 ...
tensorflow学习笔记二——建立一个简单的神经网络拟合二次函数
tensorflow学习笔记二--建立一个简单的神经网络 2016-09-23 16:04 2973人阅读评论(2) 收藏举报分类: tensorflow(4) 目录(?)[+] 本笔记目的 ...
TypeScript学习笔记3：运算符
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录运算符 ...
TypeScript学习笔记2：数据类型
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录数据类型 ...
Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

TypeScript学习笔记（第一天）------创建简单的web应用

创建简单的web应用

1.安装：cnpm install -g typescript

2.第一个TypeScript文件

test.html

greeter.ts

greeter.js

TypeScript学习笔记（第一天）------创建简单的web应用相关推荐

最新文章

热门文章