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";