如何使用TypeScript和Webpack编写网页应用
这些都是前端的工具并不能直接编写东西,webpack的话是一个前端的自动化构建的工具只能是提高团队合作和开发效率
移动前端开发和 Web 前端开发的区别是什么？
移动WEB前端开发属于HTML5开发，使用HTML+CSS+JavaScript三种语言编写，该职位偏向于移动端网页开发，包括H5专题页、移动前端网页，广告落地页、Hybrid App等；
Tips：由于原生APP开发需要开发两个客户端（Android和iOS），产品开发周期和成本相对较高，因此出现了Hybrid App。Hybrid App可以使用PhoneGap将网页直接打包成Android原生APP和iOS原生APP。
1，经常会有硬件交互，例如摄像头，相机，指纹识别，陀螺仪，等。
2，依赖设备的操作系统，因为设备都有自动省级机制，几乎不需要考虑新特性的兼容性。
3，无论用原生还是 h5 实现，都有随着系统更新带来的迭代，一般使用热更新。
WEB前端开发也是属于HTML5开发，使用HTML+CSS+JavaScript三种语言编写，主要偏向PC端的网页开发，包括PC端网页开发、PC端后台管理页面等，也会涉及部分的移动端网页开发。
1，除了鼠标键盘几乎不需要与硬件交互，有特殊需求才会有硬件交互，例如在线直播，语音输入等。
2，需要考虑浏览器兼容性，主要看用户群体，代码需要兼容到哪个版本。
3，浏览器的升级，几乎不需要迭代，版本迭代几乎都是需求变化。
移动端开发主要是开发APP，属于c/s架构的开发。Web前端开发是基于PC端或移动端浏览器来开发web页面，属于b/s架构的开发。
移动端开发主要针对手机、电视等智能设备，web前端开发则主要针对pc端。
移动端开发针对系统类型采用的编程语言也有所不同，安卓端采用Java或Kotlin开发语言，IOS采用object-c或swift语言开发。以上这些语言属于原生开发，还有混合式开发，如Fluter+Dart、ReactNative、vuex。基于webview的套壳应用，如微信小程序、百度小程序、快应用等。
Web前端开发使用的开发语言是JavaScript或其超集Typescript，使用的开发框架主要以React、Vue、Angular为主。
移动端开发开发的产品，一般是to C的服务型产品。Web前端开发开发的产品，一般是to B的产品。
webstorm如何调试typescript代码
需要先配置一个调试的服务器，如果会需要安装对应的浏览器插件配合使用
1. 首先要安装WebStrom以及在Chrome浏览器里配置好Live Edit插件。
2. 运行WebStrom，创建一个web project。
3. 修改index.html文件如下：
!DOCTYPE html
html
body
p
JavaScript 能够直接写入 HTML 输出流中：
/p
script
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;icars.length;i++)
{
document.write(cars[i] + "br");
}
/script
p
您只能在 HTML 输出流中使用 strongdocument.write/strong。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
/p
/body
/html
4. 设置断点，选择index.html文件，从右键菜单打开debug。
有哪些前端框架是使用typescript写的？
蛮多的，下面举几个常见的前端框架。
Angular
简单介绍下Angular, AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。
从Angular2版本开始，使用TypeScript开发，完全重写框架，性能提升巨大。目前最新版本为8.1.0.
Ionic
Ionic Framework是一个开源的UI工具包，用Web技术（HTML，CSS和JavaScript）构建高性能的高质量移动和桌面应用程序。Ionic Framework专注于前端用户体验，或应用程序的UI交互（控件，交互，手势，动画）。它易于学习，并与其他库或框架（如Angular）很好地集成，或者可以独立使用而无需使用简单脚本包含的前端框架。目前，Ionic Framework已与Angular正式集成，对Vue和React的支持也正在开发中。
Ant Design of Angular
Ant Design 说是前端框架不太严谨，更像是一个UI组件库，这点和Ionic类似。
Ant Design 由阿里开发，目标是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。
还提供了一系列的工具方便设计和开发人员更快的实现需求，缩短项目周期；国内使用人数较多。PS: 大家还记得去年的圣诞节彩蛋吗？
最后提一下 Vue ,很火的一个前端框架，它不是采用TypeScript语言开发，但可以使用TypeScript配合开发。
Angular，Ionic这些耳熟能详啦。
但Visual Studio Code也是用Typescript写的就强悍了，而且还能移植成Web版本的VS Code.
vue.js 3.0版本
使用 Webstorm 或 IDEA 调试 typescript
1. 使用 ts-node ，其描述如下
2. 全局安装 ts-node
2. tsconfig.json 支持 sourceMap
3. 安装 Run Configuration for TypeScript 插件
4. 进入 ts 文件鼠标右击选择 Debug 选项
插件本质还是依赖于 ts-node 来运行，只是其可以帮助我们自动配置好 ts-node 运行参数，简化使用
怎么用typescript做网页
TypeScript项目和tsconfig.json
首先安装TypeScript编译器
npm i -g typescript
进入项目目录，新建一个 hello.ts
function sayHello(name: string) {
return 'Hello, ' + name;
}
let myName = 'Cheng Wang';
console.log(sayHello(myName));
然后执行
tsc hello.ts
编译器会生成 hello.js
function sayHello(name) {
return 'Hello, ' + name;
}
var myName = 'Cheng Wang';
console.log(sayHello(myName));
为了方便编译器和编辑器识别TypeScript项目，TypeScript约定了tsconfig.json文件来存储项目配置，如果运行 tsc 时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。比如这样：
{
"compilerOptions": {
"outFile": "dist/app.js",
"sourceMap": true
},
"files": [
"src/app.ts"
]
}
直接运行 tsc ，会自动把 src/app.ts 编译到 dist/app.js 。
关于这个配置文件的更多选项，可以看 官方文档 。
使用模块
TypeScript中，模块的使用方法与ES6一致。
src/modules/utilities.ts ：
function getUrlParam(key: string) {
const REG_PATTERN = new RegExp('(^|)' + key + '=([^]*)(|$)', 'i');
let result: string[] = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
} else {
return null;
}
}
export { getUrlParam }
src/app.ts ：
import { getUrlParam } from './modules/utilities';
let deviceType: string = getUrlParam('deviceType');
console.log(deviceType);
编译后的app.js（TypeScript编译器在输出单个文件时，只能使用AMD或System模块规范）：
define("modules/utilities", ["require", "exports"], function (require, exports) {
"use strict";
function getUrlParam(key) {
var REG_PATTERN = new RegExp('(^|)' + key + '=([^]*)(|$)', 'i');
var result = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
}
else {
return null;
}
}
exports.getUrlParam = getUrlParam;
});
define("app", ["require", "exports", "modules/utilities"], function (require, exports, utilities_1) {
"use strict";
var deviceType = utilities_1.getUrlParam('deviceType');
console.log(deviceType);
});
使用NPM库
我们开发JS程序的时候，要用到NPM上的第三方的库，比如jQuery、Lodash等，但是绝大多数库都是用JS写的，没有类型提示，我们也不能在在代码中将这些库作为模块引入。
比如我们需要在项目中使用Lodash：
npm i --save lodash
然后在代码中引入：
import * as _ from 'lodash';
console.log(_.camelCase('helloworld'))
运行 tsc 则报错：
src/app.ts(1,20): error TS2307: Cannot find module 'lodash'.
如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。
Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，编辑器和编译器就可以去node_modules目录中找到相应的JS库，并编译到最终的JS代码中。
先安装Typings工具：
npm i -g typings
然后安装Lodash的定义文件：
typings install --save lodash
Typings会去NPM、Bower上寻找库的作者加的定义文件，但是有的库如jQuery并没有官方的定义文件，则需要从社区维护的 DefinitelyTyped 目录下安装：
typings install --save --ambient jquery
然后再tsconfig.json中的files配置中加入一条：
"files": [
"src/app.ts"，
"typings/main.d.ts"
]
此时编译就不会提示找不到模块了。
安装好定义文件之后，如果使用Visual Studio Code等对TypeScript支持较好的编辑器，则会提供更加强大的代码提示功能。
使用Webpack构建
TypeScript编译器支持很多模块组织规范，如ES6、commonJS、AMD等，但是如果想要将多个ts文件打包成一个文件，TypeScript只支持AMD和System，对于浏览器应用来说，还需要引入第三方的模块加载器。如果使用Webpack配合TypeScript的loader，则可以方便地构建浏览器可以运行的JS代码。
首先安装Webpack和ts-loader：
npm i webpack -g
npm i ts-loader --save-dev
然后配置项目目录中的webpack.config.js:
module.exports = {
entry: './src/app.ts',
output: {
filename: 'app.js',
path: './dist'
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
},
module: {
loaders: [
{ test: //.ts$/, loader: 'ts-loader' }
]
}
}
然后就可以通过运行 webpack 来构建了，构建生成的代码自带了webpack的模块加载器，可以直接在浏览器中运行。