TypeScript是JaveScript的超集,为JavaScript增加了很多特性,它可以编译成纯JavaScript在浏览器上运行。TypeScript已经成为各种流行框架和前端应用开发的首选。本文概要介绍使用VS Code开发TypeScript的过程。

第一个程序

在VS Code中开发TypeScript,首先要安装TypeScript,这里使用npm安装:

npm install typescript -g

安装完成后,运行下面代码看一下版本:

tsc -version

进入控制台,创建一个文件夹,进入这个文件夹,运行命令code .。这会启动VS Code,并且打开当前的文件夹。在文件夹中创建一个文件hello.ts,写几句代码:

let v="hello";
console.log(v);

进入控制台,输入 tsc hello.ts,会生成对应的hello.js,输入node hello.js,会运行代码。

配置文件tsconfig.json

现在我们创建TypeScript项目的配置文件tsconfig.json,最简单的内容如下:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs"
}
}

编辑这个文件时,VSCode的智能提示很有帮助。常用的设置还有:js代码的输出路径、是否可以包括js文件、调试时使用的代码映射等等,下面是复杂一些的配置:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"allowJs": true,
"sourceMap": true,
"outDir": "out"
}
}

这里输出路径设置为out,我们把前面编译生成的js文件删掉,重新编译一下,注意,由于有了tsconfig.json文件,在终端中只要输入tsc就可以了。



可以看到,编译的文件保存在out子目录中,并且多了map文件。

调试

现在我们看如何在VS Code中进行调试,在前面的ts代码界面,按F5调试,会出现选择环境的提示框,选择Node.js,出现下面的错误:



选择“配置任务”,然后选择“tsc: 构建 - tsconfig.json”,这时,会创建新的文件夹.vscode,在这个文件夹中创建task.json,内容如下:

{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": "build",
"label": "tsc: 构建 - tsconfig.json"
}
]
}

再次按F5,仍然出现上面的错误。选择添加配置,会创建“launch.json”文件:

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\helloworld.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/out/**/*.js"
]
}
]
}

再次按F5,仍然会出现错误,检查一下,会发现生成的两个文件中,任务的名称是不一样的,将task.json中的“tsc: 构建 - tsconfig.json”修改为“tsc: build - tsconfig.json”,再次按F5运行,这次可以了。试着加个断点,也可以:

模块化

我们希望模块化开发我们的代码,将代码分割到独立的文件中,便于分别开发与调试。我们希望显示地声明引用,避免全局变量函数等等带来的混乱。这时,我们需要使用export声明可以被其它模块使用的函数和变量,在使用这些函数和变量的模块中,使用import导入需要的函数、变量等等。我们创建一个新的文件myfunctions.ts,里面只有一个函数:

export function myName(){
return "张三";
}

修改helloworld.ts,调用这个函数:

import {myName} from './myfunctions'
let v="hello"+myName();
console.log(v);

使用Webpack打包客户端代码

前几部分针对的是服务端开发,对于客户端的代码,我们希望1)可以打包为单独的js文件进行发布;2)可以方便地运行客户端程序;3)可以方便地进行调试。这里我们使用Webpack作为打包工具,在VS Code中创建TypeScript的客户端项目骨架。

首先,为我们的测试项目创建一个目录,在控制台进入这个目录,运行code . 启动vs code。在终端中执行npm init,创建项目的packeg.json,内容如下:

{
"name": "mydevnew",
"version": "1.0.0",
"description": "my new typescript project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

然后,安装必要的程序包,在终端中执行:

npm install --save-dev webpack webpack-cli typescript ts-loader  webpack-dev-server source-map-loader

接下来,添加typescript的配置文件tsconfig.json:

{
"compilerOptions": {
"module": "es6",
"target": "es5",
"sourceMap": true,
"declaration": true,
"declarationDir": "./dist/typing",
"lib": [
"webworker",
"es6",
"es5",
"dom"
]
}, "exclude": [
"node_moudles",
"dist"
]
}

还要添加webpack.config.js:

const path = require('path');
module.exports = {
mode: 'development',
entry: './src/main.ts',//入口文件
output: {
filename: 'main.js',//编译出来的文件名
path: path.resolve(__dirname, 'dist'),//编译文件所在目录
publicPath: '/dist/',//静态资源目录,可以设为“编译文件所在目录”, 代码自动编译,网页自动刷新
},
module: {
rules: [
{
// For our normal typescript
test: /\.ts?$/,
use: [
{
loader: 'ts-loader'
}
],
exclude: /(?:node_modules)/,
},
]
},
resolve: {
modules: [
'src',
'node_modules'
],
extensions: [
'.js',
'.ts'
]
},
devServer: {
static: {
directory: path.join(__dirname, ''),
},
hot: true,
compress: true,
host: 'localhost',
port: 8888
},
devtool:'source-map',
};

修改package.json,在scritps中增加:

    "build": "webpack",
"dev": "webpack-dev-server",

到此,配置环境基本完成,可以写代码了,创建src目录用来保存代码,在src中创建main.ts和hello.ts,代码如下:

import {myName} from "hello"
console.log("TypeScript测试项目");
console.log(myName());
document.body.innerHTML="你好!"+myName();

hello.ts是一个小的模块:

export function myName(){
return "张三";
}

在根目录创建一个引导页面index.html:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>TypeScript测试项目</title>
</head> <body>
<script src="dist/main.js"></script>
</body> </html>

这时,我们可以在终端中运行 npm run dev,启动webpack 的web server,在浏览器中,输入http://localhost:8888,可以看到,已经可以运行了:



如果只是希望编译,运行npm run build,生成js文件保存在dist目录中,index.html是引导页面。

VS Code开发TypeScript的更多相关文章

  1. [Tool] 使用Visual Studio Code开发TypeScript

    [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在「Windows」.「OS X」操作系统上,使用Visual Studio Code ...

  2. Visual Studio Code开发TypeScript

    [Tool] 使用Visual Studio Code开发TypeScript   [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在 ...

  3. 使用Visual Studio Code搭建TypeScript开发环境

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  4. 打造TypeScript的Visual Studio Code开发环境

    打造TypeScript的Visual Studio Code开发环境 本文转自:https://zhuanlan.zhihu.com/p/21611724 作者: 2gua TypeScript是由 ...

  5. 使用 VS Code 搭建 TypeScript 开发环境

    使用 VS Code 搭建 TypeScript 开发环境 TypeScript 是 JavaScript 的超集,TypeScript 只是增强了 JavaScript 而非改变了 JavaScri ...

  6. 使用VS Code开发Angular 2应用程序所需配置文件的解析

    目录 package.json typings.json tsconfig.json launch.json settings.json tasks.json package.json: 这是项目的基 ...

  7. 使用VS Code开发AngularJS 2 第一个应用程序

    使用VS Code开发AngularJS 2 第一个应用程序 目录 运行环境 创建项目 安装依赖包 创建TypeScript应用程序 配置应用程序 运行应用程序 运行环境 运行环境: Windows ...

  8. 使用VS Code开发TypeScript--定义变量推荐使用let

    使用VS Code开发TypeScript--定义变量推荐使用let 目录 作用域规则 JavaScript的严格模式 let与var的区别 作用域规则 一直以来我们都是通过var关键字定义JavaS ...

  9. 解决VS Code开发Python3语言自动补全功能不带括号的问题

    Visual Studio Code(以下简称VS Code)用来开发Python3,还是很便利的,本身这个IDE就是轻量级的,才几十兆大小,通过安装插件的方式支持各种语言的开发.界面也美美哒,可以在 ...

随机推荐

  1. .Net 线程安全集合

    .Net 提供了基于生产-消费模式的集合类,这些集合对多线程访问安全,定义在System.Collections.Concurrent名称空间中.这个名称空间中包括基础接口IProduceConsum ...

  2. mybatis(CRUD)

    3.mybatis(CRUD) 有了mybatis,我们要对数据库进行增删改查只需要操作接口和mapper.xml文件,然后进行测试就可以了. 实例代码如下: 接口 public interface ...

  3. DEEP LEARNING WITH PYTORCH: A 60 MINUTE BLITZ | TENSORS

    Tensor是一种特殊的数据结构,非常类似于数组和矩阵.在PyTorch中,我们使用tensor编码模型的输入和输出,以及模型的参数. Tensor类似于Numpy的数组,除了tensor可以在GPU ...

  4. 在Excel VBA中写SQL,是一种什么体验

    每每提到Excel办公自动化,我们脑海里能想到的就是公式.数据透视表.宏.VBA,这也是我们大部分人数据分析的进阶之路.当我们对于常用VBA技巧已经相当熟练后,往往会有一种"我的VBA知识够 ...

  5. 二进制方式搭建Kubernetes高可用集群

    转:https://jiangxl.blog.csdn.net/article/details/120428703 详细:https://developer.aliyun.com/article/78 ...

  6. MySQL OOM

    问题 前几天遇到一个奇怪的问题,服务器内存明明够用,结果在对 MySQL 进行测压的时候却出现了 OOM,是 Linux 内核出错了吗? 具体现象如下:使用 sysbench 对 mysql 进行压测 ...

  7. 中文分词,自然语言处理器NLP。 六月份版本已上线。

    一,  没有对比,就没有伤害,我们分词的优势在哪里?走一波测试. 跑一下CaCl2,看看效果. 二   想要分什么词汇,自己自定义即可. 目前每个月都会出一个新的版本,主要是和金融相关的词汇. 这是6 ...

  8. Vue之 watch、computed、filter之间的区别与使用场景

    computed  计算属性: 当页面中需要使用大量的表达式处理数据时,为了页面维护更加简单,所以使用 计算属性 来出来复杂的逻辑运算 watch 侦听器 当需要在数据变化时执行异步或开销较大的操作时 ...

  9. debian老版本下载地址

    https://cdimage.debian.org/cdimage/archive/

  10. oeasy教您玩转python - 006 - # hello world

    ​ Hello World! 回忆上次内容 python3 的程序是一个 5.3M 的可执行文件 python3 里面全都是 cpu 指令 可以执行的那种指令 我们可以把指令对应的汇编找到 objdu ...