webstorm 创建运行纯Typescript项目

news2024/11/15 7:00:59

创建一个空项目，在项目根目录创建一个tsconfig.json文件
自动配置：
打开终端输入tsc --init，即可自动生成tsconfig.json文件
手动配置：
在项目根目录下新建一个tsconfig.json文件,并配置如下内容
具体配置可以直接使用下面的配置，详细配置可以去官网查考每一个属性对应的作用

官网地址：https://www.tslang.cn/docs/handbook/compiler-options.html

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "noLib": false,
    "sourceMap": true,
    "resolveJsonModule": true,  // JSON模块导入允许
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "allowJs": true,  //编译JS
  /*  "paths": {
      "@*//*": ["src*//*"]
    },*/
    "types": ["vite/client", "unplugin-icons/types/vue", "element-plus/global"],
    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
    "allowSyntheticDefaultImports": true /* 允许默认导入 */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/typings/**/*.d.ts",
    "mock/**/*.ts",
    "vite.config.ts",
    "vite.config.ts",
    "types/**/*.ts"
  ],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

配置TS

配置TS文件监控

创建一个TS

class Student {
  fullName: string;

  constructor(public firstName: any, public middleInitial: any, public lastName: any) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");
console.log(greeter(user));

编译生成JS

tsc src/classGreeter