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命令无效,则安装失败

typescript 之一

我们还需要新建一个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文件

typescript 之一

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文件将会出现

typescript 之一

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

typescript 之一
typescript 之一

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

typescript 之一

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)

typescript 之一

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

百度已收录
分享