TypeScript入门笔记(一):安装和自动编译

简介: TypeScript入门笔记(一):安装和自动编译

TypeScript是一种由微软开发的自由和开源的编程语言。是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。随着vue3.0开源以来,学会typescript语言语言已经迫在眉睫,不然就会被这个时代所淘汰。


开发typescript需要的准备工作就不说了

1:安装Node.js

2:nodejs的版本管理工具npm

今天来从零开始,记录一下TypeScript入门笔记

1:全局安装


打开cmd,右键管理员身份运行,输入以下命令

npm  install  -g  typescript

 

 

安装成功之后,开始写ts代码了,因为有些浏览器无法解析es6代码。

能解析es5代码。所以需要一边写代码,一边编译成浏览器能识别的js代码,就像写sass一样。那么

怎么在vscode里面配置自动解析?打开vscode编辑器,导入刚刚在d盘新建一个项目

1:tsc --init

在编辑器Visual Studio Code打开一个终端

 

 


进入项目,执行命令tsc --init,这个时候可以看到生成了一个ts的配置文件

 

打开ts的配置文件 (生成tsconfig.json ),将改 "outDir": "./js", 表示index.js要输出到根目录的js里面,修改保存。

 

 

 

2:任务-运行任务 选择监视tsconfig.json

在编辑器里面找到任务-运行任务 选择监视tsconfig.json ,操作完成之后会发现这个时候,生成了一个js文件了。


ok,现在已经可以在编写代码的时候实现vscode自动编译ts了


现在来写一段TypeScript语法测试一下,在ts文件里面写一段定义变量的指定类型代码,var str:string="你好ts",打开js/index.js,可以看到,已经将这句代码解析为浏览器能够识别的javascript的代码了。


 

console.log('你好ts')
function  getData(){
}
var str:string="你好ts";

继续,在根目录里面新建一个index.html,引入js,需要查看ts写出来的语法代码之后,打开这个index,在浏览器里面查看即可,所写的代码测试都可以打印在浏览器了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="js/index.js"></script>
</html>
相关文章
|
1月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
25 3
|
22天前
|
JavaScript Shell 资源调度
1.【TypeScript 教程】TypeScript 安装与使用
1.【TypeScript 教程】TypeScript 安装与使用
25 4
|
22天前
|
JavaScript 编译器
35.【TypeScript 教程】编译选项
35.【TypeScript 教程】编译选项
14 2
|
1月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
1月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
37 4
|
1月前
|
JavaScript 前端开发 编译器
【TypeScript技术专栏】深入理解TypeScript编译过程
【4月更文挑战第30天】TypeScript编译过程包括解析、类型检查、语义分析和代码生成四个步骤。解析阶段将源代码转为AST;类型检查确保代码符合类型规则,捕获类型错误;语义分析检查代码逻辑一致性;最后生成JavaScript代码。这一过程保证了代码的语法、类型和语义正确性,提升开发效率和代码质量。了解此过程有助于开发者更好地理解和解决问题。
|
1月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
37 0
|
1月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
49 0
|
1月前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
71 0
|
1月前
|
JavaScript 前端开发 编译器
如何编译Typescript文件?
如何编译Typescript文件?