TypeScript--路径映射

本文主要是介绍TypeScript--路径映射，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Configure the path mapping（路径映射） in jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
      "t/*": ["./test/*"]
     }
  }
}

文件结构

- src
	- pages
		- home
			- home.ts
			- detail.ts
		- mine
			- mine.ts
			- setting.ts
		- login
			- login.ts
			- register.ts
	- components
		- label
			- index.ts
		- button
			- index.ts
	- app.ts

- test
	- module
		- a.ts
	- test.ts

test.ts

<!-- 非 path mapping -->
import {a} from "./module/a";
import {app} from "../src/app";
import {home} from "../src/pages/home/home";
import {button} from "../src/components/button";


<!-- path mapping -->
import {a} from "t/module/a";
import {app} from "@/app";
import {home} from "@/pages/home/home";
import {button} from "@/components/button";

app.ts

<!-- 非 path mapping -->
import {a} from "../test/module/a";
import {test} from "../test/test";
import {home} from "./pages/home/home";
import {button} from "./components/button";

<!-- path mapping -->
import {a} from "t/module/a";
import {test} from "t/test";
import {home} from "@/pages/home/home";
import {button} from "@/components/button";

login.ts

<!-- 非 path mapping -->
import {a} from "../../../test/module/a";
import {test} from "../../../test/test";
import {app} from "../../app";
import {home} from "../home/home";
import {button} from "../../components/button";


<!-- path mapping -->
import {a} from "t/module/a";
import {test} from "t/test";
import {app} from "@/app";
import {home} from "@/pages/home/home";
import {button} from "@/components/button";

这篇关于TypeScript--路径映射的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！