nodemon typescript?

最新推荐文章于 2024-05-15 11:02:24 发布

今天也要笑214

最新推荐文章于 2024-05-15 11:02:24 发布

阅读量185

点赞数

文章标签： javascript typescript node.js

本文链接：https://blog.csdn.net/qq_64157187/article/details/134389389

版权

1.在vscode中安装typescript

2.typescript编译成JavaScript

3.tsconfig.json 的配置

4.vscode对typescript的检测功能

在写api接口的时候，觉得没有提示很不爽，想用typescript把js'文件全部重写一遍

我默认你使用vscode开发

1.在vscode中安装typescript

npm i typescript -g

-g的意思是全局安装，这样就不用每次写ts文件都要安装了

如果控制台报错npm不可用，请安装node再使用

检查ts的版本信息以确保安装正确

tsc --version

出现和我这样的版本信息就代表可以正确使用ts了！

由于*.ts文件最终的运行需要依靠js。所以必须先将ts编译成js才能运行。

我给出示例如上

2.typescript编译成JavaScript

但细心的朋友可能发现了，10年的javascript代码跟现在的js代码是不一样的。

以前javascript没有class的语法。只能采用原型链条。为了方便理解，加深印象，我给出例子。

这是采用类的写法

        class Father {
            move = () => console.log('我在走路');
            constructor(age, assets) {
                this.age = age;
                this.assets = assets;
            }
        }
        class Son extends Father {
            constructor(age, assets) {
                this.name = '张三'
                this.wife = '右手'
                super(age, assets);
            }
        }

而另一种方法则需要这么多代码，使用原型链的方法实现。

 function Father(age, assets) {
            Father.prototype.move = function () {
                console.log('我在走路')
            }
            Object.defineProperty(Father.prototype.__proto__, 'age', {
                value: age,
                writable: true,
            })
            Object.defineProperty(Father.prototype.__proto__, 'assets', {
                value: assets,
                writable: true
            })
        }
        function Son(age, assets) {

            Son.prototype.name = "张三"
            Son.prototype.wife = '右手'
            Son.prototype.__proto__.__proto__ = new Father(age, assets).__proto__.__proto__
        }

那么… typescript怎么知道我想要什么样子的代码呢？我到底是要原型链还是要class。到底是要require还是要import。typescript不知道，但是它知道。

它是谁？他就是 tsconfig.json

3.tsconfig.json 的配置

在根目录下新建 tsconfig.json 文件
配置相关信息

{
"compilerOptions": {
"target": "es5", // 指定 ECMAScript 版本
"module":"CommonJS", // 当前编写的module类型。
"outDir": "./dist",
"rootDir": "./src",
"lib": [
"dom",
"dom.iterable",
"esnext"
], // 要包含在编译中的依赖库文件列表
"allowJs": true, // 允许编译 JavaScript 文件
"skipLibCheck": true, // 跳过所有声明文件的类型检查
"esModuleInterop": true, // 禁用命名空间引用 (import * as fs from "fs") 启用 CJS/AMD/UMD 风格引用 (import fs from "fs")
"allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入
"strict": true, // 启用所有严格类型检查选项
"forceConsistentCasingInFileNames": true, // 不允许对同一个文件使用不一致格式的引用
"module": "esnext", // 指定模块代码生成
"moduleResolution": "node", // 使用 Node.js 风格解析模块
"resolveJsonModule": true, // 允许使用 .json 扩展名导入的模块
"noEmit": true, // 不输出(意思是不编译代码，只执行类型检查
"jsx": "react", // 在.tsx文件中支持JSX
"sourceMap": true, // 生成相应的.map文件
"declaration": true, // 生成相应的.d.ts文件
"noUnusedLocals": false, // 报告未使用的本地变量的错误
"noUnusedParameters": false, // 报告未使用参数的错误
"experimentalDecorators": true, // 启用对ES装饰器的实验性支持
"incremental": true, // 通过从以前的编译中读取/写入信息到磁盘上的文件来启用增量编译
"noFallthroughCasesInSwitch": true
},
"include": [
"src/**/*" // *** TypeScript文件应该进行类型检查 ***
],
"exclude": ["node_modules", "build"] // *** 不进行类型检查的文件 ***
}