typescript基础(5)

最新推荐文章于 2025-10-07 17:39:40 发布

原创最新推荐文章于 2025-10-07 17:39:40 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

TypeScript 专栏收录该内容

5 篇文章

订阅专栏

本文概述了如何使用TypeScript模块组织代码，避免命名冲突，以及如何通过Webpack进行代码打包，包括设置入口文件、配置TS编译、使用命名空间和HTML插件。重点讲解了模块导出和引入，以及在实际项目中的应用和Webpack构建流程。

模块:

把公共的一些功能单独抽离成一个文件作为模块;

模块里面的变量, 函数,类等默认都是私有的,如果我们需要在外部访问模块里面的数据(函数,变量,类),我们就需要暴露模块里面的数据,然后通过import引入模块就可以使用模块内的数据;

暴露模块export:

  //  方式一
    export function a(){
        ...
    }
// 方式二
    function a(){
        ...
    }
    export { a }

导入模块import:

import { a, a as alias } from "aa.js";
    a();
    alias();

注意:模块默认导出default，一个模块只能用一次

暴露：

export default a(){
	
}

引入(不用花括号):

import a from 'aa.js'
a()

Ts命名空间:

内部模块: 主要用于组织代码,避免命名冲突;也就是说在模块里面在分出模块,

定义模块,并导出不同的命名空间;

  export namespace A{
        interface Animal{
            name: string;
            eat(): void;
        }
        export Class Dog implements Animal{
            name: string;
            constructor(name:string){
                this.name = name;
            }
            eat:void(){
                log(this.name +"在跑步")
            }
        }
    }
    export namespace B{
        interface Animal{
            name: string;
            eat(): void;
        }
        export Class Dog implements Animal{
            name: string;
            constructor(name:string){
                this.name = name;
            }
            eat:void(){
                log(this.name +"在工作")
            }
        }
    }

调用：

import {A, B} from "xxx";
    var d = new A.Dog("张三");
    d.eat();// 张三在跑步
    var dog = new B.Dog("李四");
    dog.eat(); //  张三在工作

webpack打包TS代码:

步骤:

`1.初始化项目:

进入项目根目录: 执行命令:npm init -y

他的作用:创建package.json文件

2.下载构建工具 npm i -D(安装依赖)

npm i -D webpack 构建工具webpack

npm i -D webpack-cli webpack执行命令

npm i -D webpack-dev-server webpack的开发服务器

npm i -D typescript ts编译器

npm i -D ts-loader ts加载器,用于在webpack中编译ts文件

npm i -D html-webpack-pligin webpack中html插件，用来自动创建html文件

npm i -D clean-webpack-plugin webpack中的清除插件，每次构建都会先清除目录

3.根目录下创建webpack的配置文件webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    optimization:{
        minimize: false // 关闭代码压缩，可选
    },
	//指定入口文件
    entry: "./src/index.ts",
    
    devtool: "inline-source-map",
    
    devServer: {
        contentBase: './dist'
    },
	//指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname, "dist"),
        //打包后文件的文件
        filename: "bundle.js",
        environment: {
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },

    resolve: {
        extensions: [".ts", ".js"]
    },
    //指定webpack打包时使用的模块
    module: {
        //指定加载的规则
        rules: [
            {
              //test指定的是规则生效的文件
                test: /\.ts$/,
        		//要是用的loader
                use: {
                   loader: "ts-loader"     
                },
               //要删除的文件
                exclude:/node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'TS测试'
        }),
    ]

}

4.根目录下创建tsconfig.json，配置可以根据自己需要

{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

5.修改package.json添加如下配置

{
  ...略...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open "
  },
  ...略...
}