webstorm 创建运行纯Typescript项目

news/2024/7/16 7:27:55 标签: webstorm, typescript, ide

创建一个空项目,在项目根目录创建一个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

运行: node .\src\classGreeter.js

直接右键run命令

run这个命令,这个时候进行如下操作:
①安装直接运行所需依赖包: npm install -g ts-node

2.安装插件:Run Configuration for TypeScript

 在插件里安装失败

直接去网页: Run Configuration for TypeScript - IntelliJ IDEs Plugin | Marketplace下载jar包,然后导入插件也可以用

右键运行效果


http://www.niftyadmin.cn/n/5401561.html

相关文章

使用Python进行Sentinel-2 图像聚类

聚类或无监督分类是根据统计相似性将图像的像素值分组或聚合到一定数量的自然类(组)的过程。在本教程中,我们将使用rasterio进行sentinel-2图像处理,并使用功能强大的完整scikit-learn python 包在jupyter Notebook中进行聚类。 Scikit-learn是一个用于 Python 编程语言的…

List<Object>集合对象属性拷贝工具类

目录 问题现象: 问题分析: 解决方法: 问题现象: 最近在项目中经常会使用到BeanUtils工具类来作对象的属性字段拷贝,但如果应用到List集合的话就需要遍历去操作了,如下: 打印结果: …

UE5基于RumtimeFBXImport插件使用C++加载服务器上fbx文件方法

UE5的RumtimeFBXImport插件其实只能加载本机的fbx文件,要加载服务器上的fbx文件的话,需要先将该fbx文件下载到本地,然后再使用RumtimeFBXImport插件加载。 示例文件如下: #include "Loader/WebLoader.h" #include &quo…

Kotlin MutliPatform Demo NoteApp

简单用Kotlin实现个记录app,主要实现本地数据保存。支持多端运行 使用的库: voyagernapiercoroutinesktorserializationkotlinx-datetimekoinmultiplatform-settingssqldelightMVI 项目: MyNote

javascript中的class基础入门(1)

javascript中的class start 最近在学习:cocos ,准备自己制作小游戏。过程中遇到不少疑问,我计划将这些疑问写成一个系列博客,用以记录。这篇文章来了解 class 1. 前言 1. 前言 本文对应版本 Cocos Creator 3.8。Cocos Creato…

【小尘送书-第十一期】编程的基石,开发的核心:《算法秘籍》

大家好,我是小尘,欢迎你的关注!大家可以一起交流学习!欢迎大家在CSDN后台私信我!一起讨论学习,讨论如何找到满意的工作! 👨‍💻博主主页:小尘要自信 &#x1…

【QT】QTableView或QTableWidget 搭配QLineEdit实现数据的搜索显示

在 Qt 中,QTableView 和 QTableWidget 都可以用来实现数据的搜索和显示,但它们的适用场景和实现方式有所不同: QTableView 适用场景:QTableView 适用于更复杂的场景,尤其是当需要处理大量数据或需要高度定制化的表格时…

精读服务器默认rsyslog的配置文件

rsyslog的配置文件 rsyslog.conf #### MODULES ####$ModLoad imuxsock # provides support for local system logging (e.g. via logger command) $ModLoad imjournal # provides access to the systemd journal #$ModLoad imklog # reads kernel messages (the same are read…