技术栈

主页 > 大数据 >

Angular 4入门教程系列:10:TypeScript:结合gulp的第一个Helloworld

技术栈 - 中国领先的IT技术门户

这里写图片描述
这篇文章开始来简单地进行一下typescript的入门。为了简单练习,结合使用前端构建工具gulp进行第一个typescript的HelloWorld程序。

学习目标

  • 安装gulp
  • 初始化一个练习用的小的工程结构
  • 写第一个typescript的程序
  • 使用gulp确认结果

学习时长

预计时间为5分钟

事前准备

安装node

事先安装了node,没有安装可以参看下面文章中用到的一键安装脚本,亲测可用。

[root@angular tmp]
v9.1.0
[root@angular tmp]
5.5.1
[root@angular tmp]

准备工程目录

[root@angular tmp]
[root@angular tmp]
proj
proj/src
proj/dist
[root@angular tmp]

npm init

使用npm init对工程进行初期化, 信息可以自己随意填写。

[root@angular tmp]
[root@angular proj]
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save itas a dependency inthe package.json file.

Press ^C at any timeto quit.
package name: (proj) 
version: (1.0.0) 
description: typescript practice project
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: liumiaocn
license: (ISC) MIT
About towriteto /tmp/proj/package.json:

{
  "name": "proj",
  "version": "1.0.0",
  "description": "typescript practice project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "liumiaocn",
  "license": "MIT"
}


Is this ok? (yes) yes
[root@angular proj]

我们来确认一下发生了什么变化:

[root@angular proj]
./package.json
[root@angular proj]

只是给我们生成了一个文件,来看一下具体内容

[root@angular proj]
{
  "name":"proj",
  "version":"1.0.0",
  "description":"typescript practice project",
  "main":"index.js",
  "scripts": {
    "test":"echo \"Error: no test specified\" && exit 1"
  },
  "author":"liumiaocn",
  "license":"MIT"
}
[root@angular proj]

就是刚才初始化的信息,npm要用的package.json文件。

安装gulp相关依赖

gulp-cli

npm install -g gulp-cli

[root@angular proj]
/usr/local/npm/node/bin/gulp -> /usr/local/npm/node/lib/node_modules/gulp-cli/bin/gulp.js
+ gulp-cli@1.4.0
added 139 packages in59.518s
[root@angular proj]

typescript gulp gulp-typescript

npm install –save-dev typescript gulp gulp-typescript

[root@angular proj]# npm install 
npm WARN deprecated minimatch@2.0.10: Please updateto minimatch 3.0.2or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please updateto minimatch 3.0.2or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0andbefore will fail on node releases >= v7.0. Please updateto graceful-fs@^4.0.0as soon as possible. Use 'npm ls graceful-fs'to find it in the tree.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN proj@1.0.0No repository field.

+ gulp@3.9.1
+ gulp-typescript@3.2.3
+ typescript@2.6.1
added 241 packages in78.927s
[root@angular proj]#

然后此时再来确认一下内容

[root@angular proj]
dist  node_modules  package.json  package-lock.json  src
[root@angular proj]

因为安装没有加上-g所以在本地node_modules下有刚刚安装的内容,除此之外,还生成了一个package-lock.json用来保存当前依赖的快照,有兴趣的可以看一下具体的内容。而此时src和dist中仍空空如也

[root@angular proj]
dist:src:
[root@angular proj]

如果不是手动安装的npm,只要你的gulp -v能正常动作,此步骤即可跳过。
确认link源:

[root@angular proj]
total 4
-rwxr-xr-x. 1 root root 54Nov1122:31 gulp.js
[root@angular proj]

设定:

[root@angular proj]
[root@angular proj]

结果确认:

[root@angular proj]
[22:54:48] CLI version 1.4.0
[22:54:48] Local version 3.9.1
[root@angular proj]

自此,环境的准备就已经全部OK,可以写第一个HelloWorld了。

typescript的第一个HelloWorld

index.ts

相对于javascript的弱类型,typescript的静态类型是很重要的区别,使用官方的例子,我们定义一个string的类型然后作为参数进行传递,而这一切都在我们创建在src下面的一个index.ts中进行。

[root@angular proj]
function hello(compiler: string) {
    console.log(`Hello from ${compiler}`);
}
hello("TypeScript");
[root@angular proj]

tsconfig.json

为了进行typescript的编译,我们在proj目录下创建如下的设定文件

[root@angular proj]
{
    "files": [
        "src/index.ts"
    ],
    "compilerOptions": {
        "noImplicitAny":true,
        "target":"es5"
    }
}
[root@angular proj]

gulpfile

gulp需要一个gulpfile才能进行工作,我们写一个最简单的gulpfile,如下:

[root@angular proj]
var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function() {return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest("dist"));
});
[root@angular proj]

可能你还会觉得这有点复杂,但是如果你是从grunt走过来,你会发现简化好多,但是方式似乎有些不同,就是其所谓的流式的构建。gulp会将这一切穿起来,通过它的pipe。
自此,第一个程序就全部OK了,可以确认结果了

结果确认

执行gulp

[root@angular proj]
total 0
[root@angular proj]
[23:14:05] Using gulpfile /tmp/proj/gulpfile.js
[23:14:05] Starting 'default'...
[23:14:16] Finished 'default' after 11 s
[root@angular proj]
total 4
-rw-r--r--. 1 root root 93 Nov 1123:14 index.js
[root@angular proj]

可以看到gulp的执行结果是将这一切联系了起来,从我们的src/index.ts最终生成了我们要的dist/index.js
再来看一下编译生成的js代码

[root@angular proj]
function hello(compiler) {
    console.log("Hello from " + compiler);
}
hello("TypeScript");
[root@angular proj]

node结果

[root@angular proj]
Hello from TypeScript
[root@angular proj]

这样,我们看到了第一个HelloWorld的执行结果。

总结

通过使用gulp,我们第一个typescript的HelloWorld程序到此结束。

责任编辑:admin  二维码分享:
本文标签: angulartypescript