分享好友 编程语言首页 频道列表

Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)

typescript文章/教程  2023-02-09 10:200

Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loading就没法搞了。

因此我使用了webpack2,webpack2自带tree shaking,只要将tsconfig中的module设置成es2015就可以, 虽然效果没rollup好,但支持lazy loading。

另外, angular2目前不支持typescript 2.1.X,所以如果想在"target": "es5"前提下使用async/await就不行了,但是可以将target设为es2015,然后引入babel-loader,这样的话,打包好的代码就会稍微大一点。

 

源代码

项目的github地址是https://github.com/nickppa/myAngular2Aot,用的是官方的hero的那个例子,master分支下没有引入babel, webpack-babel分支下引入了babel,以支持async/await。

参考了https://github.com/AngularClass/angular2-webpack-starter, 没有使用hmr(热加载),看了下hmr的相关代码,有点像redux的单个state的概念。

 

吐槽Typescript

Interface

感觉Typescript的interface是个鸡肋,不如全部定义成class,原文如下

It's not Angular's fault. An interface is a TypeScript design-time artifact. JavaScript doesn't have interfaces. The TypeScript interface disappears from the generated JavaScript. There is no interface type information left for Angular to find at runtime.

也就是当typescript转换成javascript时,接口会被删除。

函数重载

另外typescript的函数重载,个人感觉这写法也太low了。

 

总结

感觉Typescript主要还是强类型,对es6,es7的各种新语法支持(怎么感觉babel更棒一点),以及泛型和tsc编译比较有用。 其他的优点暂时还没发现, 话说2.1中的keyof蛮不错的,但是angular2里面现在还用不了啊。

另外,项目中尝试使用了immutable,以及angular2的OnPush策略。

查看更多关于【typescript文章/教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
electron教程(一): electron的安装和项目的创建electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLintelectron

0评论2023-03-08610

使用TypeScript,AngularJs和Web API构建基本的CRUD Web 应用
原文地址:using typescript with angularjs and web api 版权归其作者所有.在这篇文章中我将向大家展示如何使用TypeScript,Angular Js 和Asp.net Web API 来构建一个基本的实现CRUD功能的Web应用程序. Typescript提供了一系列的功能来方便程序员构造和组织更

0评论2023-02-10391

Typescript 中类的继承
Typescript中类的定义与继承与后端开发语言java/C#等非常像,实现起来非常方便,而且代码便于阅读。用Typescript写较大项目时是非常有优势的。/** * BaseClass */class BaseClass {constructor(name:string,age:number) {this.name=name;this.age=age;}name:s

0评论2023-02-09350

TypeScript实现设计模式——工厂模式
上回用typescript实现了单例模式,这回来实现工厂模式。工厂模式又分为简单工厂模式、工厂方法模式以及抽象工厂模式。简单工厂模式简单工厂模式通常在业务比较简单的情况下使用,它有三个部分组成:工厂类、抽象产品类、具体产品类。抽象产品类abstract class

0评论2023-02-09907

使用Visual Studio Code和typescript 开发调试React Native项目
关于React Native的详细介绍我就不叙述了,他是使用js构建原生app的开发框架。一次变编码多平台运行,非常强大。但是个人不喜欢js的过于灵活(弱类型)的语法。强大的强类型语言Typescript(简称TS)是我的首选,他可以编译成JavaScript,编译成的JavaScript代

0评论2023-02-09391

TypeScript的安装、使用及配置
JS是一种弱类型语言,对于代码的维护和重构是非常困难的。TypeScript是一个编译到纯JS的有类型定义的JS超集,可以极大的提升代码的健壮性。使用TS后,能够方便的查看函数定义、默认参数及类型、变量结构体等,同时对于IDE的参数类型提示也是非常友好的。优点

0评论2023-02-09713

vue-type-check: Vue 模板中的 Typescript 类型检查
越来越多人开始尝试使用 Typescript 编写他们的 vue 项目,vue 本身也在不断加强对 Typescript 的支持(官方提供 vue-class-component 库、使用 Typescript 编写 Vue 3.0 等),但是对于组件中模板部分的类型检查仍然有很大的局限性。为此我们开源了一个易

0评论2023-02-09756

JavaScript面向对象轻松入门之抽象(demo by ES5、ES6、TypeScript)
抽象的概念  狭义的抽象,也就是代码里的抽象,就是把一些相关联的业务逻辑分离成属性和方法(行为),这些属性和方法就可以构成一个对象。  这种抽象是为了把难以理解的代码归纳成与现实世界关联的概念,比如小狗这样一个对象:属性可以归纳出“毛色”、

0评论2023-02-09777

Typescript学习笔记 TYPESCRIPT
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。 安装 TypeScript命令行工具安装:npm install -g typescript编译一个 TypeScript 文件:tsc hello.ts  原始数据类型/ 任意值为每一个变量提前申明该类型,则该变量取值只能为申明的

0评论2023-02-09688

typescript结合three.js
import * as THREE from "three";// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.tsclass Game{private _scene: THREE.Scene;//private _canvas: HTMLCanvasElement;private _camera: THREE.PerspectiveCamera;private _ren

0评论2023-02-09748

更多推荐