TypeScript入门教程（一）

原创

前端林子

发布于 2018-10-14 13:05:59

5.5K0

发布于 2018-10-14 13:05:59

文章被收录于专栏：前端技术总结前端技术总结

本文是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作为说明。如有问题，欢迎指正。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

npm

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度