使用 VS Code 搭建 TypeScript 开发环境
TypeScript 是 JavaScript 的超集,TypeScript 只是增强了 JavaScript 而非改变了 JavaScript,TypeScript 同样也是基于 ECMAScript 标准的编程语言。因此非常流行的 Vue 和 React 及我们常用 Jquery 等类库都可以使用 TypeScript 来编码,TypeScript 强大的智能类型分析系统,能够使你的代码更加强壮。
下载 TypeScript
TypeScript 官网(中文网)提供了多种下载方式,我们使用 NPM 来下载 TypeScript,如果你没有安装 NPM,请到 Nodejs 官网进行安装。
在 CMD(Windows 系统)或者终端(macOS 系统)中输入一下命令:
npm install -g typescript
安装完毕后我们输入 tsc -v 可以查看当前安装的 TypeScript 版本号。当前最新的版本是 2.1.5。
下载 VSCode
VSCode 是很棒的编辑器。在 VSCode 官网就可以下载相应系统的 VSCode 安装包
创建项目
mkdir typescript-demo
npm init -y //创建一个 package.json
tsc --init //创建一个 tsconfig.json
touch index.html
touch hello.ts
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TypeScript with VSCode</title>
</head>
<body>
<h1 class="text-center"></h1>
<script src="./hello.js"></script>
</body>
</html>
hello.ts
function sayHello(person: string) {
return "hello" + person;
}
console.log("object :", sayHello("monkey"));
先执行npm install -g live-server
安装 live-server 之后,修改 package.json
"scripts": {
"start": "tsc -w & live-server",
},
执行 npm start 就可以写一些 ts 的小 demo 了
使用 VS Code 搭建 TypeScript 开发环境的更多相关文章
-
使用Visual Studio Code搭建TypeScript开发环境
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
-
Vs Code搭建 TypeScript 开发环境
一.npm install -g typescript 全局安装TypeScript 二.使用Vs Code打开已创建的文件夹,使用快捷键Ctrl+~启动终端输入命令 tsc --init 创建t ...
-
使用Visual Studio Code + Node.js搭建TypeScript开发环境
Visual Studio Code搭建Typescript开发环境 —— 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...
-
Windows下visual studio code搭建golang开发环境
Windows下visual studio code搭建golang开发环境 序幕 其实环境搭建没什么难的,但是遇到一些问题,主要是有些网站资源访问不了(如:golang.org),导致一些包无法安装 ...
-
VS Code搭建.NetCore开发环境(二)
一.安装VS Code for C#的相关插件 1.C# :https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp 2 ...
-
VS Code搭建.NetCore开发环境(一)
一.使用命令创建并运行.Net Core程序 1.dotnet new xxx:创建指定类型的项目console,mvc,webapi 等 2.dotnet restore :加载依赖项 dotne ...
-
VS Code 搭建 Rust 开发环境
VS Code 搭建 Rust 开发环境 上一篇文章安装和配置好了 Rust 环境后,我们是使用的是简单的文本工具编写 Hello World 入门代码,但是为了提高我们的学习效率,下面安利大家 VS ...
-
VS Code 搭建stm32开发环境
MCU免费开发环境 一般芯片厂家会提供各种开发IDE方案,通常其中就包括其自家的集成IDE,如: 意法半导体 STM32CubeIDE NXP Codewarrior TI CCS 另外也可以用ecl ...
-
搭建typescript开发环境最详细的全过程
搭建typescript开发示例https://github.com/Microsoft/TypeScriptSamples typescript案例https://www.tslang.cn/sam ...
随机推荐
-
修改Linux默认启动级别或模式的方法
冲动的惩罚: 海阔天空: 在linux系统的7种启动级别,默认为X-Window,类似于Windows的窗口模式. 如何修改或变更linux的默认启动级别或模式呢? 以root身份进入Linux,修改 ...
-
论文ei,sci检索,JCR-SCI分区,中科院分区连接
https://jcr.incites.thomsonreuters.com/JCRJournalHomeAction.action?SID=B1-bQgax2FJ7EsyZ9muP6O5loc77S ...
-
When cloning on with git bash on Windows, getting Fatal: UriFormatException encountered
I am using git bash $ git --version git version .windows. on Windows 7. When I clone a repo, I see: ...
-
【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...
-
sql server 添加字段并且赋默认值和说明
select soct.Captcha,CreateOn,* from SceneryOrderCheckTicket soctright join (SELECT Captcha,convert(c ...
-
phpcms二次开发步骤
文件目录结构 根目录 | – api 接口文件目录 | – caches 缓存文件目录 | – configs 系统配置文件目录 | – caches_* 系统缓存目录 | – phpcms phpc ...
-
04747_Java语言程序设计(一)_第5章_图形界面设计(一)
例5.1一个用JFrame类创建窗口的Java应用程序. import javax.swing.*; public class Example5_1 { public static void main ...
-
Spark机器学习解析下集
上次我们讲过<Spark机器学习(上)>,本文是Spark机器学习的下部分,请点击回顾上部分,再更好地理解本文. 1.机器学习的常见算法 常见的机器学习算法有:l 构造条件概率:回归分 ...
-
#阿里云#云服务器部署可道云(KodExplorer)
前言:在做一些项目的时候,经常有一些文档交流,修改之后的文档在QQ或微信上发来发去,还要下载,很是不爽,有一个挺有用的东西叫做KodExplorer可道云. kodexplorer可道云是目前国内有代 ...
-
利用CNN进行多分类的文档分类
# coding: utf-8 import tensorflow as tf class TCNNConfig(object): """CNN配置参数"&qu ...