typescript 之一

我们开始来学习typescript ，它作为JavaScript的超集，使用起来还是很方便的，所谓的超集，听起来是不是很高大上，实际上也没啥的，不过，用起来还是超级舒服的，它弥补了JavaScript的弱类型，事实上与后端语言.net类似，使编程起来更加爽。其拥有

• 可选的静态类型
• 枚举、接口和类
• 命名空间
• 模块
• Lambda表达式
• 编译时类型检查

安装TypeScript

有两种主要的方式来获取TypeScript工具：

• 通过npm（Node.js包管理器）
• 安装Visual Studio的TypeScript插件

一般使用npm管理来下载typescript，npm install -g typescript 我一般会使用npm淘宝镜像，使用nrm来管理npm镜像，“nrm”是专门用于管理npm的一个小工具，可以使用它来快速的切换npm镜像。安装完成typescript后通过tsc -v来查看安装的版本，若提示tsc命令无效，则安装失败

我们还需要新建一个tsconfing.json的文件来进行编译时的配置说明

{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "commonjs",
"removeComments": true,
"sourceMap": false,
"outDir": "js"
},
"include": [
"ts"
],
"exclude": [
"js"
]
}

简要说明下

• target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
• noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
• module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。
• removeComments：编译生成的JavaScript文件是否移除注释。
• sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
• outDir：编译输出JavaScript文件存放的文件夹。
• include、exclude：编译时需要包含/剔除的文件夹。

以上是编译ts文件需要用到的配置文件，直接调试ts单文件时需要task.json文件，ts-node

{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "always",
"problemMatcher": "$tsc"
}

还需要安装ts-node,可以直接通过npm install ts-node来安装，ts同样也是需要node环境来运行的，即便是需要编译，编译也是需要用到node的，现在知道node的强大了吧☺。

我们使用vscode来学习调试它，当然环境是依赖nodejs，接下来我们新建ts文件夹，ts/models文件夹及app.ts文件，ts/models/demo.ts文件

demo.ts文件

/**
* Demo
*/
class Demo {
name: string;

constructor(name: string) {
this.name = name;
}

outName() {
return this.name;
}
}

export { Demo };

app.ts文件

/**
* app.ts
*/
import { Demo } from './models/demo';
const demo = new Demo('jack');
console.log(demo.outName());

然后我们直接在vscode 上选择调试当前ts文件，出现编辑launch.json文件，vscode调试主要也就是依赖这个文件。主要代码：

说明下：${workspaceRoot}当前工作路径，需要编译ts文件时，我们需要在工程目录下新建文件夹来存放ts编译后的js文件，如js文件夹，js/models文件夹；outFiles：ts文件编译后输出的路径，${workspaceFolder}/js/*/.js当前工作路径下的文件夹对应的js文件

"configurations": [
{
"type": "node",
"request": "launch",
"name": "编译ts文件",
"program": "${workspaceRoot}/js/app.js",
"preLaunchTask": null,
"outFiles": [
"${workspaceFolder}/js/**/*.js"
],
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal",
"sourceMaps": false,
},
{
"name": "运行调试当前ts文件",
"type": "node",
"request": "launch",
"args": [
"${relativeFile}"
],
"runtimeArgs": [
"--nolazy",
"-r",
"ts-node/register"
],
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}

直接调试ts文件将会出现

编译ts文件，我们按ctrl+shift+b，提示构建tsconfig.json进行编译ts文件

控制台不会有任何输出，但是我们去看js文件夹你会发现对应的js文件已经生成

demo.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Demo = (function () {
function Demo(name) {
this.name = name;
}
Demo.prototype.outName = function () {
return this.name;
};
return Demo;
}());
exports.Demo = Demo;

app.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var demo_1 = require("./models/demo");
var demo = new demo_1.Demo('jack');
console.log(demo.outName());

直接运行app.js(直接按f5)

结果与直接调试app.ts文件一致。

PHP Warning: curl_exec() has been disabled for security reasons in /home/ftp/f/free49568/wwwroot/wp-content/themes/Variant/functions.php on line 490 百度已收录