Typescript的三种运行方式(小结)

一、在线complier

这种方式最简单，不需在本地做任何配置安装，只需进入Typescript的官网，点击里面的playground就可以直接写代码了。但这种方式只适用于测试而不适用于开发。

二、本地命令行编译

1、在本地编译运行Typescript需要使用npm下载typescript

npm install -g typescript

至于npm，就是node的包管理工具，下载node后就自动带了。

2、下载完成后可以使用 tsc -v 查看版本

3、使用：如在本地创建Hello.ts

export class Hello {
}

在命令行中 tsc Hello.ts

运行后就会发现在同一文件夹下生成了Hello.js

三、使用IDE

这里以webstrom为例。

注意：使用IDE的前提是已经在全局安装了typescript（方法二），只是每次不需要用命令手动编译而是IDE自动帮我们生成js文件。

1、在webstrom中新建Typescript文件

2、这时在代码编辑区域上方就会看到

3、这里我们选择configue配置

在打开的配置项中勾选Enable TypeScript Complier

4、这样我们编写的.ts文件IDE就自动帮助我们生成了相对应的.js文件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js捆绑TypeScript声明文件的方法教程

    js捆绑TypeScript声明文件的方法教程

    前话 TypeScript是JavaScript类型的超集,这是TypeScript的文档介绍的一句话,那么他们存在联系呢? 我的理解是,TypeScript在JavaScript基础上引入强类型语言的特性.开发者使用TypeScript语法进行编程开发,最终通过转换工具将TypeScript转换成JavaScript. 使用TypeScript能够避免在原生JavaScript上开发所带来的弱类型语言的坑.(我该输入啥?调用后返回啥?哎还是看看源码吧...) 嗯!很好,强类型的JavaScri

  • 在Vue组件中使用 TypeScript的方法

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

  • 使用TypeScript开发微信小程序的方法

    使用TypeScript开发微信小程序的方法

    TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

  • 关于TypeScript模块导入的那些事

    前言 模块在其自身的作用域里执行,而不是在全局作用域里:这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export之一导出它们. 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import之一. 模块是自声明的.在TypeScript里,两个模块之间的关系是通过在文件级别上使用import和export建立的. 下面话不多说了,来一起看看详细的介绍吧 ES6 模块导入的限制 我们先来看一个具体的例子: 在 Node 项目

  • 深入理解JavaScript和TypeScript中的class

    前言 对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大多数前端开发者的一个短板. 最近在学习 Angular的过程中发现其大量的运用了 class,不得不佩服,Angular 确实是一个优秀的.值得深入研究的 框架. 本文将简单的介绍一下 JavaScript 和 TypeScript 中的 class. 基本概念 在介绍 class 之前,要先

  • TypeScript 中接口详解

    在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" }; printLabel

  • TypeScript入门-基本数据类型

    TypeScript入门-基本数据类型

    大致介绍 TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言,TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程,它相当于是JavaScript的超集 ES5.ES6和TypeScript的关系: 安装 首先需要安装npm,然后在输入 npm install -g typescript 安装完成后,因为TypeScript是以.ts结尾的,要想运行就得把他编译js文件,编译的方法特别简单就是使用tsc命令 ts

  • 详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

  • TypeScript学习之强制类型的转换

    前言 使用强类型变量常常需要从一种类型向另一种类型转换,通常使用ToString或ParseInt可以来实现一些简单的转换,但是有时候需要像.NET语言中那样将一种类型显示的转换为另一种类型,在TypeScript规范中,被称为"类型断言",它仍然是类型转换,只是语法是有些不同.下面来详细看看TypeScript的强制类型转换. TypeScript强制类型转换 在 TypeScript 中将一个 number 转换成 string ,这样做会报错: var a:number = 12

  • Typescript的三种运行方式(小结)

    Typescript的三种运行方式(小结)

    一.在线complier 这种方式最简单,不需在本地做任何配置安装,只需进入Typescript的官网,点击里面的playground就可以直接写代码了.但这种方式只适用于测试而不适用于开发. 二.本地命令行编译 1.在本地编译运行Typescript需要使用npm下载typescript npm install -g typescript 至于npm,就是node的包管理工具,下载node后就自动带了. 2.下载完成后可以使用 tsc -v 查看版本 3.使用:如在本地创建Hello.ts e

  • Window下PHP三种运行方式图文详解

    Window下PHP三种运行方式图文详解

    PHP能不能成功的在Apache服务器上运行,就看我们如何去配置PHP的运行方式. PHP运行目前为止主要有三种方式: a.以模块加载的方式运行,初学者可能不容易理解,其实就是将PHP集成到Apache服务器,以同一个进程运行. b.以CGI的方式运行,CGI英文叫做公共网关接口,就是Apache在遇到PHP脚本的时候会将PHP程序提交给CGI应用程序(php-cgi.exe)解释,解释之后的结果返回给Apache,然后再相应请求的用户. c.以FastCGI的方式运行.这种形式是CGI的加强版

  • 关于C++中定义比较函数的三种方法小结

    C++编程优与Pascal的原因之一是C++中存在STL(标准模板库).STL存在很多有用的方法. C++模板库中的许多方法都需要相关参数有序,例如Sort().显然,如果你想对一个集合进行排序,你必须要知道集合中的对象,那个在前那个在后.因此,学会如何定义比较方法是非常重要的. C++模板库的许多容器需要相关类型有序,例如set<T> 和priority_queue<T>. 这篇文章旨在告诉大家如何为一个类定义一个排序方法,以便在STL容器或者方法中使用. 作为一个C++程序员,

  • Python 循环终止语句的三种方法小结

    在Python循环终止语句有三种: 1.break break用于退出本层循环 示例如下: while True: print "123" break print "456" 2.continue continue为退出本次循环,继续下次循环 示例如下: while True: print "123" continue print "456" 3.自定义标记 Tag 自已定义一个标记为True或False 示例代码: Tag

  • Python实现矩阵相乘的三种方法小结

    问题描述 分别实现矩阵相乘的3种算法,比较三种算法在矩阵大小分别为22∗2222∗22, 23∗2323∗23, 24∗2424∗24, 25∗2525∗25, 26∗2626∗26, 27∗2727∗27, 28∗2828∗28, 29∗2929∗29时的运行时间与MATLAB自带的矩阵相乘的运行时间,绘制时间对比图. 解题方法 本文采用了以下方法进行求值:矩阵计算法.定义法.分治法和Strassen方法.这里我们使用Matlab以及Python对这个问题进行处理,比较两种语言在一样的条件下,

  • angular1.x ui-route传参的三种写法小结

    如下所示: .state('classrooms',{ url: '/classrooms/:id' }) .state('classrooms',{ url: '/classrooms/{id}' }) .state('activities',{ url: '/activities', params: { id: { value: 42} } }) localhost:3000/#/classrooms/3 function ClassroomController($stateParams){

  • python求绝对值的三种方法小结

    如下所示: 1.条件判断 2.内置函数abs() 3.内置模块 math.fabs abs() 与fabs()的区别 abs()是一个内置函数,而fabs()在math模块中定义的. fabs()函数只适用于float和integer类型,而abs()也适用于复数. abs()返回是float和int类型,math.fabs()返回是float类型 以上这篇python求绝对值的三种方法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • python 字典访问的三种方法小结

    定义字典 dic = {'a':"hello",'b':"how",'c':"you"} 方法一: for key in dic: print key,dic[key] print key + str(dic[key]) 结果: a hello ahello c you cyou b how bhow 细节: print key,dic[key],后面有个逗号,自动生成一个空格 print key + str(dic[key]),连接两个字符串,

  • Maven打jar包的三种方式(小结)

    不包含依赖jar包 该方法打包的jar,不包含依赖的jar包,也没有指定入口类. <build> <plugins> <plugin> <!-- 指定项目编译时的java版本和编码方式 --> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.7.

  • Python如何截图保存的三种方法(小结)

    本文介绍python如何进行截图保存的几种方法,在测试过程中,是有必要截图,特别是遇到错误的时候进行截图.结合Python其它模块如time ,os.path,基本能满足截图保存文件的功能需求 第一种 selenium for python get_screenshot_as_file() 相关代码如下: # coding=utf-8 import time from selenium import webdriver driver = webdriver.Chrome() driver.max

随机推荐