typescript简介

javascript的缺点

1. es5以及之前的使用var关键字有关于作用域的问题
2. 数据类型并不是连续的内存空间
3. javaScript没有加入类型检测

类型错误: javascript没有对传入的参数进行任何的限制, 只能到运行期间才发现这个错误.
类型思维的缺失: javascript设计出就没有考虑类型约束的问题, 导致前端开发人员通常不关心变量或者参数是什么类型, 当在必须确定类型的时候,必须使用各种判断验证.

TypeScript是什么

TypeScript是拥有类型的javaScript超集, 它可以编译成普通, 干净, 完整的JavaScript代码.
可以理解为javascript的加强版.

TypeScript的特点

TypeScript始于JavaScript, 归于JavaScript::
      ts使用js相似的语法和语义,使用js现有的代码,包括流行的js的库.

TypeScript是一个强大的工具,用于构建大项目:
      ts允许在开发js应用程序时使用高效的开发工具,比如静态检查和代码重构.

拥有先进的JavaScript:
      ts提供最新的和不断发展的js特性,如异步和Decorators, 以帮助建立健壮的组件.
      高可信应用程序开发时是可用的.但会被编译成简洁的es3的javascript.

TypeScript编译成JavaScript

使用npm工具,安装工具,

	npm install typescript -g

使用命令编译Hello_TypeScript.ts

	tsc ./Hello_TypeScript.ts

TypeScript使用ts-node

使用npm工具安装ts-node即依赖

	npm install tslib @type/node -g

TypeScript中使用WebPack

1.npm初始化，生成package.json文件

	npm init

2.利用npm安装webpack和webpack-cli

	npm install webpack webpack-cli -D

3.在项目中创建webpack的配置文件（webpack.config.js）

4.webpack解析ts代码，需要安装ts-loader 和 typescript

	npm install ts-loader typescript -D

5.创建ts的配置文件（tsconfig.json）

	tsc --init

6.安装服务器内运行环境

	npm install webpack-dev-server -D

7.在webpack.config.js中配置内容

const path = require("path");

module.exports = {
    //设置开发者模式
    mode: "development",
    //typescript代码的入口
    entry: "./src/main.ts",
    //typescript代码的出口
    output: {
        //输出路径(文件夹)
        path: path.resolve(__dirname, "./dist"),
        //输出文件名
        filename: "bundle.js",
    },

    //
    resolve: {
        //配置文件后缀
        extensions: [".ts", ".js"],
    },

    //配置模块
    module: {
        //配置规则
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
            }
        ]
    }

8.在package.json中添加脚本

9.如果需要打包文件，命令台运行：

	npm run build

10.如果需要开启服务器运行，命令台运行：

	npm run serve