typescript安装何编译运行及基础知识

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

首先确保电脑里已经有了node,如果没有的话要先安装node，见相关CSDN博客

Visual Studio Code安装及小知识汇总
如何安装 npm 并管理 npm 版本

个人浅谈：TypeScript 增加了代码的可读性和可维护性，在编译阶段就可以发现大部分错误，增强了编辑器和 IDE 的功能。TypeScript 环境的安装，需要使用到npm工具安装。推荐使用VS Code开发工具。

安装及使用原理：

1.ts-node，typescript需要安装成全局的,这样就可以在任何地方执行 tsc 命令了。在cmd控制台中执行下面命令。

npm install -g ts-node

npm install -g typescript

 

2.TypeScript 转换为 JavaScript 过程如下图：

hello.ts——>tsc E:\TSTest\hello.ts(在cmd控制台中执行后，hello.ts同一目录就会生成一个hello.js文件)——>hello.js

或者找到hello.ts文件所在目录，直接打开cmd,再执行tsc hello.ts

 

3.html中正常引入js文件。我们只需要在TypeScript环境中编写逻辑，最后在cmd控制台中执行ts文件（tsc E:\TSTest\hello.ts命令），同一目录就会生成一个同名称的js文件。其他正常运行项目即可。

 

4.保存文件时就自动编译运行ts文件

在ts文件所在目录下直接输入—cmd—回车—打开控制台后执行tsc -init或cmd打开当前目录下输入tsc -init,回车，会生成tsconfig.json 文件

 

tsconfig.json 文件配置如下

{

  "compilerOptions": {

   "target": "es5",

   "noImplicitAny": false,

   "module": "amd",

   "removeComments": false,

   "sourceMap": false,

   "outDir": "./js"//你要生成js的目录

  }

}

vscode–> 终端–>运行任务 选择tsc:监视-tsconfig.json 文件，然后会生成一个js文件夹，编译后的hello.js就在这个目录下。

 

这样以后对hello.ts文件进行修改，保存后hello.js会自动更新。

 

基础类型：any,number,string,boolean,enum,void,undefined,never，null

变量申明： var 变量名:类型 = 值；全局作用域，类作用域，局部作用域。

 

在TypeScript中：

（1）可以用void表示没有任何返回值的函数。

function alertName(): void {

    alert('My name is Tom');

}

（2）可以使用null和undefined来定义两个原始数据类型。

（3）Any 用来表示允许赋值为任意类型。

（4）如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被。类型检查。如果定义的时候赋值，后面类型不一致会报错。

（5）联合类型，可以将变量和数组设置多种类型。

var val:string|number

var arr:number[]|string[];

（6）类型别名，用来给类型起一个新名字，常用语联合类型，

type Name = string;

type NameResolver = () => string;

type NameOrResolver = Name | NameResolver;

（7）字符串字面量类型，用来约束取值只能是某几个字符串中的一个。

type EventNames = 'click' | 'scroll' | 'mousemove';

function handleEvent(ele: Element, event: EventNames) {

    // do something

}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题

handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'

（8）元组

 数组合并了相同类型的对象，而元组合并了不同类型的对象。不允许越界元素。

let tom: [string, number] = ['Tom', 25];

也可以只赋值其中一项

let tom: [string, number];

tom[0] = 'Tom';