TypeScript创建一个简单Web应用
目录
- 安装TypeScript
- 构建你的第一个TypeScript文件
- 编译代码
- 类型注解
- 接口
- 类
- 运行TypeScript Web应用
- 实践项目地址
安装TypeScript
获取TypeScript工具的方式：
通过npm（Node.js包管理器）
npm install -g typescript
构建你的第一个TypeScript文件
创建项目文件夹
mkdir typescript_demo && cd typescript_demo
创建文件greeter.ts
touch greeter.ts
将下面的代码写入greeter.ts中
function greeter(person) {
return "Hello, " + person;
}
let user = "Durban Zhang";
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 = "Durban Zhang";
document.body.innerHTML = greeter(user);
类型注解
TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。
在这个例子里，我们希望 greeter函数接收一个字符串参数。
然后尝试把 greeter的调用改成传入一个数组：
function greeter(person:string) {
return "Hello, " + person;
}
let user = "Durban Zhang";
document.body.innerHTML = greeter(user);
重新编译，你会看到如下产生 的一个错误。
greeter.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'. 7 document.body.innerHTML = greeter(user);
类似地，尝试删除greeter调用的所有参数。
TypeScript会告诉你使用了非期望个数的参数调用了这个函数。
在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。
要注意的是尽管有错误，greeter.js文件还是被创建了。 就算你的代码里有错误，你仍然可以使用TypeScript。但在这种情况下，TypeScript会警告你代码可能不会按预期执行。
接口
这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。
这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Durban", lastName: "Zhang" };
document.body.innerHTML = greeter(user);
类
最后，让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。
让我们创建一个Student类，它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作，程序员可以自行决定抽象的级别。还要注意的是，在构造函数的参数上使用public等同于创建了同名的成员变量。
class Student {
fullName:string;
constructor (
public firstName: string,
public middleName: string,
public lastName: string) {
this.fullName = firstName + " " + middleName + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Durban", "M.", "Zhang");
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>
实践项目地址
https://github.com/durban89/typescript_demo
tag: 1.0.0
以上就是TypeScript创建一个简单Web应用的详细内容，更多关于TypeScript创建Web应用的资料请关注我们其它相关文章！
相关推荐
-
Web应用开发TypeScript使用详解
目录 一.什么是 TypeScript 二.TypeScript 简史 三.为什么我们要使用TypeScript? TypeScript的附加功能 四.大牛现身说法: 五.你可能不知道的TypeScript顶级功能 1.面向对象程序设计 2.接口.泛型.继承和方法访问修饰符 3.编译时/静态类型检查 4.比JavaScript代码更少 5.可读性 6.兼容性 7.提供可以将代码转换为JavaScript等效代码的“编译器” 8.支持模块 9.ES6 功能支持 10.在流行的框架中使用 11.减少
-
websocket4.0+typescript 实现热更新的方法
最近搞了一个webpack4+typescript的开发环境,折腾了很久现在记录一下.... 本身环境比较好搞,但是热更新是个麻烦事儿 本环境是基于webpack-dev-server搭建的 output: { publicPath: '/dist', path: path.resolve(__dirname, 'dist'), filename: 'ljax.bundle.js', hotUpdateChunkFilename: 'hot/hot-update.js', hotUpdateMa
-
教你使用webpack打包编译TypeScript代码
TypeScript打包 webpack整合 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包: TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS: 步骤如下: 初始化项目 进入项目根目录,执行命令 npm init -y,创建package.json文件 下载构建工具 命令如下: npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpac
-
React+TypeScript+webpack4多入口配置详解
资源 React-16.8.* react-router-dom-4.3.* TypeScript-3.5.* webpack-4.* eslint-5.16.* 项目目录 ├── dist # 打包结果目录 │ ├── demo1 //类别demo1的打包结果 │ │ ├── demo1.himl │ │ ├── demo1.js │ │ └── demo1.css │ └── demo2 ... //类别demo2的打包结果 ├── src # 业务资源文件目录 │ ├── category
-
TypeScript创建一个简单Web应用
目录 安装TypeScript 构建你的第一个TypeScript文件 编译代码 类型注解 接口 类 运行TypeScript Web应用 实践项目地址 安装TypeScript 获取TypeScript工具的方式: 通过npm(Node.js包管理器) npm install -g typescript 构建你的第一个TypeScript文件 创建项目文件夹 mkdir typescript_demo && cd typescript_demo 创建文件greeter.ts touch
-
nodejs使用express创建一个简单web应用
Express 在初始化一个项目的时候需要指定模板引擎,默认支持Jade和ejs. 这里我们使用ejs模板引擎:(关于ejs的介绍可以先从百科里面了解一个大概) EJS是一个JavaScript模板库,用来从JSON数据中生成HTML字符串. 在使用express创建一个网站的时候,使用ejs模板引擎,建立基本的网站结构,当前目录下使用:express -t ejs sophiehui命令就在当前目录下创建了一个sophiehui的子目录,创建信息如图片所示: 倒数第四行提示我们安装依赖,所以接
-
用Eclipse 创建一个简单的web项目(图文教程)
Eclipse neon 汉化版 ; 1.右击新建 --> 选择 动态Web项目 2. 填写 项目名 项目位置 ; 选择 Dynamic web module version 和 tomcat version ; 点击完成 即可创建 项目; 2.1:项目名称: 2.2:项目位置: 2.3: Dynamic Web Module Version 和 Tomacat Version 之间有版本上的匹配关系: 匹配关系如下图 3. 创建成功后的项目结构: 4. 在创建好项目结构之后 先查看一下 项目的
-
Django REST框架创建一个简单的Api实例讲解
Create a Simple API Using Django REST Framework in Python WHAT IS AN API API stands for application programming interface. API basically helps one web application to communicate with another application. Let's assume you are developing an android app
-
Python 如何创建一个简单的REST接口
问题 你想使用一个简单的REST接口通过网络远程控制或访问你的应用程序,但是你又不想自己去安装一个完整的web框架. 解决方案 构建一个REST风格的接口最简单的方法是创建一个基于WSGI标准(PEP 3333)的很小的库,下面是一个例子: # resty.py import cgi def notfound_404(environ, start_response): start_response('404 Not Found', [ ('Content-type', 'text/plain')
-
nodejs入门教程二：创建一个简单应用示例
本文实例讲述了nodejs创建一个简单应用的方法.分享给大家供大家参考,具体如下: 1.创建 test.js // require 来载入 http 模块 var http = require('http'); /** * 使用 http.createServer() 方法创建服务器,返回 一个对象 * 对象有一个叫做 listen 的方法,并使用 listen 方法绑定 8000 端口. * 函数通过 request, response 参数来接收和响应数据. */ http.createSe
-
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
1.安装vue-cli cnpm install vue-cli -g --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目的目录结构及说明 build是webpack配置 build.js // 生产环境构建代码 check-versions.js // 检查node&npm等版本 utils.js // 构建配置公用工具 vue-loader.conf.js // vue加载器
-
java swing 创建一个简单的QQ界面教程
记录自己用java swing做的第一个简易界面. LoginAction.java package com.QQUI0819; import javax.swing.*; import java.awt.event.*; //首先,编写按钮癿监听器实现类 public class LoginAction implements ActionListener { private int count=0; //当前为null,创建后指向界面输入框 private JTextField ulName;
-
MyBatis入门实例教程之创建一个简单的程序
准备: (1) IDEA 2021 (2)Java 1.8 (3)数据库 MySQL 5.7 (SQLyog 或 Navicat) 在 MySQL 中创建数据库 mybatisdemo,编码为 utf8 新建表: USE mybatisdemo CREATE TABLE users( uid INT PRIMARY KEY AUTO_INCREMENT, uname VARCHAR(20) NOT NULL, uage INT NOT NULL ); INSERT INTO users(uid,
-
HTML+CSS+JavaScript创建一个简单的井字游戏
目录 实现 HTML 添加 CSS 实现 Javascript 部分 演示地址 实现 HTML 首先在 head 部分,我将包含我们稍后创建的 css 和 javascript 文件.我还添加了名为 Itim 的 Google 字体. <link rel="stylesheet" href="style.css" rel="external nofollow" > <link rel="preconnect"