【TypeScript】安装、基本类型、任意值Any、类型推断、联合类型、接口

【TypeScript】学习笔记（一）

一、TypeScript的安装与编译

1、安装

通过npm install typescript -g进行安装TypeScript

2、编译

新建一个index.ts文件

//index.ts
let a:number = 1 

在命令行输入tsc index.ts就可以在同级目录下编译出一个index.js文件。
如果想在其他目录下输出文件：tsc --outFile 其他目录路径 index.ts

---

二、TypeScript的基本类型

1、布尔值boolean

//index.ts
let isDone:boolean = false;

//index.js
var idDone = true;

2、数值类型number

//index.ts
let num:boolean = 1;

//index.js
var num = 1;

3、字符串类型string

//index.ts
let name:string = 'Tome';

//index.js
var name = 'Tom';

4、空值void

//index.ts
function alterName():void{
  alert('My name is Tome')
}

//index.js
function alterName() {
    alert('My name is Tom');
}

---

三、任意值Any

任意值（Any）用来表示允许被赋值任意类型。
如果是一个普通类型，在赋值过程中改变类型是不被允许的。

如果是一个任意类型，就可以被赋值成任意类型

在任意值上访问任何属性都是允许的：

let anyThing:any = 'hello';
console.log(anyThing.myName);

也允许调用任何方法：

let anyThing:any = 'Tom';
anyThing.setName('Jerry')

---

四、类型推断

如果没有明确指明类型，那么TS会依照类型推论(Type Inference)的规则推出一个类型。

let myname = 'tom';
myname = 7;
//会报错，TS会认定myname为string类型

实际上他等价于：

let myname:string = 'tom';
myname = 7;

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检查：

let myname;
myname = 7;
myname = 'Tom';
//没问题，不会报错

---

五、联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种：

 let name:string | number;
 name = 7;
 name = 'Tom'

访问联合类型的属性或方法

当TS不确定一个联合类型的变量到底是哪个类型的时候，只能访问此联合类型的所有类型里共有的属性或方法

function getLength(something: string | number):number{
  return something.length;
}

上述的例子中: length不是string和number的共有属性，所有会报错。
访问string和number的共有属性是可以的：

function getLength(something: string | number):number{
  return something.toString()
}

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：

let myName:string|number;
myName = 'Tom';
console.log(myName.length)//3
myName = 7;
console.log(myName.length)//编译时报错，类型“number”上不存在属性“length”。

六、接口

在TypeScript中，使用Interfaces来定义一个接口类型的对象。

TypeScript的核心原则之一是对值所具有的机构进行类型检查。它有时被称作“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些命名和为你的代码或第三方代码定义契约。

interface Person{
  name:string;
  age:number;
}

let tom:Person={
   name:"Tom",
   age:25
}

此时，实例化对象的属性必须对接口内的属性完全一致，不能多也不能少。但如果想实例化对象不完全与接口相等呢？

1、可选属性

在接口中的属性名后面加个?，这样就可以使得实例化对象的属性少于接口属性

interface Person{
  name:string;
  age?:number; //可选属性
}

let tom:Person={
   name:"Tom",
}

2、任意属性

接口属性添加一个[propName:string]:any，使得实例化对象中任意添加属性名是string类型，属性值为any类型的属性

interface Person{
	name:string;
  	age?:number; //可选属性
    [propName:string]:any;
  }
  
  let tom:Person={
     id:1145117,
     name:"Tom",
     age:25,
  }

3、只读属性

定义一个只读属性，不可被修改

interface Person{
    readonly id :number;
    name:string;
    age?:number;
  }
  
  let tom:Person={
     id:1145117,
     name:"Tom",
     age:25,
  }

tom.id = 11234//报错