分享好友 编程语言首页 频道列表

安装 TypeScript 并编译成JS

typescript文章/教程  2023-03-08 11:010

官网: https://github.com/microsoft/TypeScript
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。
TypeScript是一种应用级JavaScript语言。TypeScript为JavaScript添加了可选类型,支持针对任何浏览器、任何主机、任何操作系统的大规模JavaScript应用的工具。TypeScript编译成可读的、基于标准的JavaScript
特点:

  • 始于JavaScript,归于JavaScript
  • 强大的类型系统
  • 先进的 JavaScript

安装

命令行运行如下命令,全局安装 TypeScript:

npm install -g typescript


下载每日构建版本(最新)

npm install -g typescript@next

ps: 可能会失败 最好还是不要加@next
检查安装是否成功

tsc -V 

安装成功

构建第一个文件

我们写一个JS程序

(() => {
  function sayHi(str) {
    return "hello" + str
  }

  let text = "world"
  console.log(sayHi(text))
})()

然后运行

发现可以运行
然后我们直接使用类型注解(ts的语法)

(() => {
    function sayHi(str: string) {
        return "hello" + str
    }

    let text = "world"
    console.log(sayHi(text))
})()

然后运行

会发现这样会报错

编译代码

所以我们需要把ts代码转换成JS 不然就运行不成功,当然 ts文件里都是js代码的话是可以运行的
所以我们可以使用命令把它编译成JS
tsc .\helloworld.ts

这样再同级目录下就会生成一个js代码
以下是JS代码

(function () {
    function sayHi(str) {
        return "hello" + str;
    }
    var text = "world";
    console.log(sayHi(text));
})();

可以发现 类型注解自动的去掉了 并且 let 改成了var

vscode自动编译

我们可以在vscode中让他自动编译成js
直接使用命令

tsc --init

这样会生成一个tsconfig.json的文件

修改tsconfig.json配置

在文件中增加如下内容

{
  // 把ts文件最终编译后放到js的目录中 指定存放的路径
  "outDir": "./js",
  // 不使用严格模式
  "strict": false,
   ...
}

启动监视

我们还需要配置一下监视任务



点击上图标红的地方 这样的话 只要一保存就会自动的把ts编译成JS
然后我们新建一个test文件
然后就会发现 自动的多出了一个test.js的文件了

查看更多关于【typescript文章/教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
electron教程(一): electron的安装和项目的创建electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLintelectron

0评论2023-03-08610

使用TypeScript,AngularJs和Web API构建基本的CRUD Web 应用
原文地址:using typescript with angularjs and web api 版权归其作者所有.在这篇文章中我将向大家展示如何使用TypeScript,Angular Js 和Asp.net Web API 来构建一个基本的实现CRUD功能的Web应用程序. Typescript提供了一系列的功能来方便程序员构造和组织更

0评论2023-02-10391

Typescript 中类的继承
Typescript中类的定义与继承与后端开发语言java/C#等非常像,实现起来非常方便,而且代码便于阅读。用Typescript写较大项目时是非常有优势的。/** * BaseClass */class BaseClass {constructor(name:string,age:number) {this.name=name;this.age=age;}name:s

0评论2023-02-09350

TypeScript实现设计模式——工厂模式
上回用typescript实现了单例模式,这回来实现工厂模式。工厂模式又分为简单工厂模式、工厂方法模式以及抽象工厂模式。简单工厂模式简单工厂模式通常在业务比较简单的情况下使用,它有三个部分组成:工厂类、抽象产品类、具体产品类。抽象产品类abstract class

0评论2023-02-09907

使用Visual Studio Code和typescript 开发调试React Native项目
关于React Native的详细介绍我就不叙述了,他是使用js构建原生app的开发框架。一次变编码多平台运行,非常强大。但是个人不喜欢js的过于灵活(弱类型)的语法。强大的强类型语言Typescript(简称TS)是我的首选,他可以编译成JavaScript,编译成的JavaScript代

0评论2023-02-09391

TypeScript的安装、使用及配置
JS是一种弱类型语言,对于代码的维护和重构是非常困难的。TypeScript是一个编译到纯JS的有类型定义的JS超集,可以极大的提升代码的健壮性。使用TS后,能够方便的查看函数定义、默认参数及类型、变量结构体等,同时对于IDE的参数类型提示也是非常友好的。优点

0评论2023-02-09713

vue-type-check: Vue 模板中的 Typescript 类型检查
越来越多人开始尝试使用 Typescript 编写他们的 vue 项目,vue 本身也在不断加强对 Typescript 的支持(官方提供 vue-class-component 库、使用 Typescript 编写 Vue 3.0 等),但是对于组件中模板部分的类型检查仍然有很大的局限性。为此我们开源了一个易

0评论2023-02-09756

JavaScript面向对象轻松入门之抽象(demo by ES5、ES6、TypeScript)
抽象的概念  狭义的抽象,也就是代码里的抽象,就是把一些相关联的业务逻辑分离成属性和方法(行为),这些属性和方法就可以构成一个对象。  这种抽象是为了把难以理解的代码归纳成与现实世界关联的概念,比如小狗这样一个对象:属性可以归纳出“毛色”、

0评论2023-02-09777

Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)
Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loading就没法搞了。因此我使用了webpack2,webpack2自带tree shaking,只要将tsconfig中的module设置成es201

0评论2023-02-09811

Typescript学习笔记 TYPESCRIPT
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。 安装 TypeScript命令行工具安装:npm install -g typescript编译一个 TypeScript 文件:tsc hello.ts  原始数据类型/ 任意值为每一个变量提前申明该类型,则该变量取值只能为申明的

0评论2023-02-09688

typescript结合three.js
import * as THREE from "three";// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.tsclass Game{private _scene: THREE.Scene;//private _canvas: HTMLCanvasElement;private _camera: THREE.PerspectiveCamera;private _ren

0评论2023-02-09748

更多推荐