2020-11-26

TypeScript

安装nvm
安装完成后有npm 和node工具

01.TypeScript开发环境安装

npm install typescript -g

vi demo.ts
function jspang() {
  let web: string = "Hello World";
  console.log(web);
}

jspang();

这时候你使用node demo.ts是执行不成功的，因为 Node 不能直接运行TypeScript文件，需要用tsc demo.ts转换一下，转换完成后typeScript代码被编译成了javaScript代码,新生成一个demo.js的文件，这时候你在命令行输入node demo.js,在终端里就可以顺利的输出jspang的字符了。

执行失败

node demo.ts

先执行

tsc demo.ts

后执行

node demo.js

但是这样操作的效率实在是太低了，你可以使用ts-node插件来解决这个问题，有了这个插件，我们就不用再编译了，而使用ts-node就可以直接看到编写结果。

npm install -g ts-node

ts-node demo.ts

02.TypeScript 的静态类型

TypeScript 的一个最主要特点就是可以定义静态类型，英文是 Static Typing。那到底是什么意思那？你可以简单的理解“静态类型”为，就是你一旦定义了，就不可以再改变了。

定义静态类型

给变量count定义number数据类型

vi demo.ts
function jspang() {
  const count: number = 1;
  console.log(count);
}

jspang();

自定义静态类型

给变量xiaohong定义了自定义的Person接口类型，变量xiaohong即有固定和属性name和age，不能变了。

vi demo.ts
interface Person {
  name: string;
  age: number;
}

const xiaohong: Person= {
  name: "小红",
  age: 18,
};

function jspang() {
  console.log(xiaohong.name+xiaohong.age);
}
jspang();

[root@test01 angular]# ts-node demo.ts
小明18

这节课你需要记住的是，如果使用了静态类型，不仅意味着变量的类型不可以改变，还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性，并且编辑器这时候也会给你很好的语法提示，加快了你的开发效率。

03.TypeScript 基础静态类型和对象类型

在 TypeScript 静态类型分为两种，一种是基础静态类型，一种是对象类型，这两种都经常使用，非常重要，我们先来看一下什么是基础静态类型。

[root@test01 angular]# vi demo.ts 
function jspang() {
   const count : number = 1;
   console.log(count);
}

jspang();

转载