TypeScript入门教程(一)

本文是TypeScript的入门文章,将分别从下面四点对TypeScript进行介绍:

1, 什么是TypeScript

2, 为什么要使用TypeScript

3, 如何安装TypeScript,Webpack中如何安装配置TypeScript

4, 快速构建一个小demo

一. 什么是TypeScript

登录TypeScript官网,TypeScript是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集,扩展了 JavaScript 的语法,本质上是添加了可选的静态类型和基于类的面向对象编程。TypeScript可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

二. 为什么要使用TypeScript

这里直接看下官网的总结:

(1)TypeScript 是 JavaScript 的超集,任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作,把js 文件可以直接重命名为 .ts 即可;

(2)可以在编译阶段就发现大部分错误;

(3)更多的规则和类型限制,让代码预测性更高,可控性更高,易于维护和调试;

(4)对模块、命名空间和面向对象的支持,更容易组织代码开发大型复杂程序;

(5) Angular2 就是使用 TypeScript 编写的;

三.安装TypeScript

3.1 安装TypeScript

官网中可以看到,有两种主要的方式来获取TypeScript工具:

--通过npm(Node.js包管理器)

--安装Visual Studio的TypeScript插件

这里通过npm来全局安装TypeScript,执行命令:

npm install -g typescript

注意这里是全局安装,加上-g参数,这样在其他工程中也能使用 TypeScript 的命令行编译工具。

查看安装版本:

tsc –v

这里可以看到我安装的版本是3.1.3:

3.2 开始第一个TypeScript程序:

在vscode中写程序,这里直接写入官网的示例代码:

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

保存为greeter.ts文件后,编译代码,在命令行中执行:

tsc greeter.ts

可以看到编译后,输出结果为一个greeter.js文件,它包含了和输入文件中相同的JavsScript代码。 

另外,tsc还可以支持一次编译多个文件,或者编译文件夹下的所有文件:

一次编译多个文件:

tsc 文件1 文件2

编译文件夹下所有ts文件:

tsc *.ts

还可以监听文件的变化,使用--watch:

tsc greeter.ts –watch

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式,上述代码中,是希望greeter函数接受一个字符串参数,如果这里把user改为数组传入,会发现报错:

不过虽然有报错,可以发现右边的greeter.js文件还是被创建了。 也就是说,就算你的代码里有错误,你仍然可以使用TypeScript。但在这种情况下,TypeScript会警告你代码可能不会按预期执行。

四.Webpack中配置TypeScript

关于webpack的内容,可以参考我前面的文章:超详细!webpack入门教程(一)

4.1 初始化工程

执行:

npm init

可以一路回车使用默认配置,生成的package.json配置:

注意,这里的name不要设置成typescript,会影响后面安装typescript包,这点后面会介绍。

4.2 安装配置webpack

首先要安装webpack:

npm install –save-dev webpack webpack-dev-server

这里一起安装了webpack-dev-server,主要是可以让我们在开发的时候启动一个 web 服务用于运行测试网页程序。

下面安装webpack-cli:

因为如果安装的是webpack v4+版本,则还需要安装webpack-cli,详情可以参考:超详细!webpack入门教程(一),执行:

npm install –save-dev webpack-cli

然后在项目根目录下,新建webpack.config.js,内容是:

module.exports = {
    // 入口文件
    entry: "./src/greeter.ts",
    // 输出文件和目录
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // 打开 sourcemaps 调试 webpack 的输出
    devtool: "source-map",

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", ".html"]
    },

    module: {
        rules: [
            // '.ts' or '.tsx' 后缀的文件将被 loadr 'awesome-typescript-loader' 处理。
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader"
            },

            // 所有输出的 '.js' 有 sourcemaps 的文件将被 'source-map-loader' 预处理。
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    }
};

设置package.json的scripts设置:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --client-log-level none --color --inline --hot"
  },

配置中可以看到,这里执行npm run build就是使用webpack编译代码,执行npm run dev就是启动一个web服务。

4.3 安装TypeScript

安装TypeScript、awesome-typescript-loader和source-map-loader:

npm install --save-dev typescript awesome-typescript-loader source-map-loader

这些依赖会让 TypeScript 和 webpack 在一起良好地工作,awesome-typescript-loader 可以让 webpack 使用 TypeScript 的标准配置文件 tsconfig.json 编译 TypeScript 代码。

source-map-loader 使用 TypeScript 输出的 sourcemap 文件来告诉 webpack 何时生成自己的 sourcemaps,这就允许你在调试最终生成的文件时就好像在调试 TypeScript 源码一样。

如果安装失败遇到这种报错:

这是因为初始化项目时,package.json的name设成了typescript,这里把package.json的name改个名称即可。然后再重新npm安装typescript:

npm install --save-dev typescript

安装后package.json最终变成这样:

4.4 配置TypeScript

我们需要创建一个tsconfig.json文件,它包含了输入文件列表以及编译选项。 在工程根目录下新建文件tsconfig.json文件,添加以下内容:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
    },
    "include": [
        "./src/**/*"
    ]
}

4.5 代码结构

新建index.html,内容如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello TypeScript!</title>
</head>

<body>

    <!-- 调用生成的 js 文件 -->
    <script src="./dist/bundle.js"></script>
</body>

</html>

新建greeter.ts,放到src目录下,内容如下:

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "lynnshen";

document.body.innerHTML = greeter(user);

总结一下,项目的文件目录是:

最后执行:

npm run build
npm run dev

注意:这两句都要执行,先编译前端,再本地起web服务。

接下来,在浏览器访问http://localhost:8080/,如果可以看到,那就说明ok了:

五. 小结

本文作为typescript入门文章的第一节,主要介绍了typescript的优点、如何安装、如何在webpack中配置,并构建了一个小demo作为说明。如有问题,欢迎指正。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏图像识别与深度学习

2018-03-24python3.6.2 Tensorflow环境配置(win10 64位)

18270
来自专栏kalifaの日々

window下用pin安装flask步骤及import flask报错的解决方案

安装过程: 1.下载get-pip.py,下载路径并不重要 不用放到Python安装目录里。 2.打开下载路径 python get-pip.py 运行这个py...

40170
来自专栏云加头条

腾讯云存储最佳实践系列一:使用对象存储COS托管静态网站

在此实践中,用户可以在腾讯云对象存储(以下简称 COS)上托管静态网站,访客可以通过自定义域名(例如 www.example.com )访问托管的静态网站。无论...

92300
来自专栏cnblogs

Chrome调试技巧

22830
来自专栏拂晓风起

JS 拦截/捕捉 全局错误 全局Error onerror

24540
来自专栏Django中文社区

注册

用户注册就是创建用户对象,将用户的个人信息保存到数据库里。回顾一下 Django 的 MVT 经典开发流程,对用户注册功能来说,首先创建用户模型(M),这一步我...

49350
来自专栏Golang语言社区

Go语言如何并发超时处理详解

大家都知道golang并没有在语言层次上提供超时操作,但可以通过一些小技巧实现超时。下面来一起看看吧,有需要的朋友们可以参考借鉴。 实现原理: 并发一个函数,等...

37560
来自专栏俗人笔记

浏览器用户脚本—打造自己的专属页面

一段用户脚本就是一个程序,通常用JavaScript语言来写,用于修改web页面以提升浏览体验。通常通过浏览器的用户脚本管理插件来开启,例如Tampermonk...

88740
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用OpenLiteSpeed安装WordPress

WordPress是目前世界上最受欢迎的内容管理系统(CMS)。它允许您在数据库后端轻松设置博客和网站,使用PHP执行脚本和处理动态内容。WordPress有一...

9300
来自专栏王磊的博客

CentOS安装运行NodeJS框架Express

 安装依赖包 yum -y install gcc make gcc-c++ openssl-devel wget 下载/解压NodeJs wget http:...

42090

扫码关注云+社区

领取腾讯云代金券