一 、Typescript 介绍
1.、TypeScript 是由微软开发的一款开源的编程语言。 TypeScript 是 Javascript 的超级,遵循最新的 ES6、Es5 规范。TypeScript 扩展了 JavaScript 的语法。
2、TypeScript 更像后端 java、C#这样的面向对象语言可以让 js 开发大型企业项目。
3、谷歌也在大力支持 Typescript 的推广,谷歌的 angular2.x+就是基于 Typescript 语法。
4、最新的 Vue 、React 也可以集成 TypeScript。
最明显的好处就是 会减少很多人为的bug,每一个变量都有类型约束,防止了我们申明了一个变量,在其他地方赋值时出现类型不同导致的问题。
ts要比js严格规范得多,一个语言越严谨,那么可以实现的功能就越强大
二、Typescript安装 编译
TypeScript 的命令行工具安装方法如下:
npm install -g typescript
以上命令会在全局环境下安装 `tsc` 命令,安装完成之后,我们就可以在任何地方执行 `tsc` 命令了。
编译一个 TypeScript 文件很简单:
tsc hello.ts
我们约定使用 TypeScript 编写的文件以 `.ts` 为后缀,用 TypeScript 编写 React 时,以 `.tsx` 为后缀。
TypeScript开发⼯具Vscode⾃动编译 .ts⽂件
第一步:使用cmd到达指定的项目下, 使用下列命令进行初始化,创建tsconfig.json 文件
kotlin
tsc -init
”target” : 编译为何种规范,一般设置为 ES5 或者 ES2016/2017
“outdir” : 输出目录
“alwaysStrict” : 打开严格模式 (‘use strict’)
第二步:打开tsconfig.json文件修改和删除相应配置(如果想快速修改配置,可以复制下列配置)
json
{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "commonjs",
"removeComments": false,
"sourceMap": false,
"outDir": "js"//你要生成js的目录
}
}
第三步:打开VSCode进入该目录,按下 Ctrl+shift+B 快捷键会进行编译,初次编译会选择编译模式(自行编写.ts文件测试)
注意:
监视模式 是每当TS文件有变动就会自动编译,构建模式是手动命令编译时才会去编译,这里选择监视模式,进行监控的时候出现问题
安装完成后报错:无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本
解决:管理员身份运行power shell,再输入:
set-ExecutionPolicy RemoteSigned
输入A,回车
总体就是
使用流程
全局安装 typescript
版本检测 tsc -v
新建文件后缀以 .ts即可
ts ==> js 执行命令tsc **.ts ==> **.js
随时更改,随时转 tsc **.ts -w
多个文件处理 需要配置 typescript.json ==> tsc init
typescript.json
配置 files
在Hbuilder中自动编译ts文件**----就是ts文件转化为浏览器能够识别的js文件;
1:下载安装插件 ts编译 ts语言服务
2:package.json onDidSaveExecution默认值是false ----true
3:重启浏览器