TypeScript--介绍、安装

简介: TypeScript--介绍、安装

介绍


TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括:

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await


JavaScript 与 TypeScript 的区别


TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。


安装


需要先安装 node.js ,安装了 node.js 才会有 npm 命令

npm install -g typescript

查看版本

tsc -v


vscode 自动编译 ts 文件


typescript 脚本文件的后缀为 .ts ,新建一个 index.ts 文件,写入如下代码

var message:string = "Hello World" 
console.log(message)

目前 typescript 不能直接被浏览器解析,需要转为 javascript 文件才能被解析。

执行以下命令将 TypeScript 转换为 JavaScript 代码(和文件在同一级):

tsc index.ts  // index.ts 为文件名

执行完成之后会生成一个 index.js 的文件,代码如下

var message = "Hello World";
console.log(message);

使用 node 命令来执行 index.js 文件:

$ node index.js 
Hello World

上面当我们每改一次 ts 文件,都要手动重新编译,太麻烦了,我们可以配置 vscode ,让它自动编译

首先在vsCode中将打开终端切换终端到需要的目录下

执行 tsc --init 生成一个tsconfig.json文件

tsconfig.json 文件中的 outDir 注释打开,路径改成自己的

新建一个 ts 文件,当前还没有自动更新。打开 vscode 选择,终端 -》运行任务

选择 typeScript

选择监视当前目录下的

ctrl+s后就会自动更新 js 目录下的 js 文件


相关文章
|
11月前
|
JavaScript
TypeScript-声明安装和TypeScript-命名空间补充
TypeScript-声明安装和TypeScript-命名空间补充
39 0
|
30天前
|
JavaScript
TypeScript——使用npm安装和编译
TypeScript——使用npm安装和编译
27 0
|
2月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
3月前
|
JavaScript Shell 资源调度
1.【TypeScript 教程】TypeScript 安装与使用
1.【TypeScript 教程】TypeScript 安装与使用
42 4
|
4月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
101 0
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
4月前
|
资源调度 JavaScript 编译器
2024 年 3 月 1 日安装 Composable Storefront 2211 遇到 Angular 和 TypeScript 版本不匹配的错误
2024 年 3 月 1 日安装 Composable Storefront 2211 遇到 Angular 和 TypeScript 版本不匹配的错误
|
4月前
|
JavaScript 前端开发 编译器
TypeScript【什么是TypeScript、安装并编译TypeScript、变量声明、原始数据类型、数组、元组、任意值】(一)-全面详解(学习总结---从入门到深化)
TypeScript【什么是TypeScript、安装并编译TypeScript、变量声明、原始数据类型、数组、元组、任意值】(一)-全面详解(学习总结---从入门到深化)
39 0
|
4月前
|
JavaScript 前端开发 IDE
如何安装 TypeScript,并配置开发环境以便开始使用
如何安装 TypeScript,并配置开发环境以便开始使用
66 0
|
10月前
|
JavaScript 前端开发
TypeScript入门笔记(一):安装和自动编译
TypeScript入门笔记(一):安装和自动编译
25 0
|
JavaScript
TypeScript 安装(简单对比 JS)
TypeScript 安装(简单对比 JS)
61 0