TypeScript

简介

安装node

安装npm

安装typescript

安装命令：npm install typescript –g
校验安装结果：tsc

tsc

此时，node无法直接运行ts文件，会报错，需要先把ts文件编译成js文件才能运行
编译方式：tsc +ts文件全名
运行js方式：node +js文件全名

ts-node

专门运行ts文件的一种node组件
安装命令：npm install –g ts-node
运行方式：ts-node +ts文件全名

静态类型

一旦定义不能改变的类型

定义

let count:number = 1;
其中number是基础类型

赋值

count = 'str'; // 这样写会报错，count只能接受number类型的数据
count = 22; // 这个样子写是没有问题的，因为一旦定义类型不能改变

深层理解：变量可直接使用对应类型的方法

变量定义成了何种类型，那么这个变量对应就可以使用其类型对应的方法

console.log(typeof count.toString());

自定义静态类型

写法：接口

interface User {
   
	uname: string;
	age: number;
}
const zhangsan: User = {
   
	uname: "张三",
	age: 33,
};

同时变量zhangsan能直接使用User里的属性name和age：zhangsan.age // 输出33

基础静态类型

null underfined symbol boolean void number string

对象类型

对象类型

const person : {
   
	age:number,
	height:number,
	name:string
} = {
   
	age:1,
	height:20,
	name:'camellia'
}
console.log(person)

数组类型

let personArray:string[] = ['11','22','33'];
console.log(personArray)

一般数组类型的定义

普通定义

const numberArr = [1, 2, 3]

鼠标放上去可以看到这是个number类型数组，这个TypeScript类型推断出来的。如果不想用推断，可以写成类型注解定义

类型注解定义

const numberArr: number[] = [1, 2, 3]

字符串数组可以写成

const stringArr: string[] = ["a", "b", "c"]

undefined类型也可以

const undefinedArr: undefined[] = [undefined, undefined]

复合类型注解定义

有多种类型的数组

const arr: (number | string)[] = [1, "string", 2]

数组中对象类型的定义

正式变成中数组一般都是复杂对象，可以写成

const users: {
    name: string, age: Number }[] = [
  {
    name: "张三", age: 18 },
  {
    name: "李四", age: 19 },
];

复用性

可以用类型别名提高复用性（多个数组相同对象类型可以重用）

type lady = {
    name: string, age: Number };

const users: lady[] = [
  {
    name: "张三", age: 18 },
  {
    name: "李四", age: 19 },
];

或者用类定义

class lady {
   
  name: string;
  age: number;
}

const users: lady[] = [
  {
    name: "张三", age: 18 },
  {
    name: "李四", age: 19 },
];

元组

是JavaScript中没有的概念，并不常用，一般在CVS这种文件的时候会使用元组，可以把元组看成数组的一个加强

基本应用

先看数组的缺点

const lady: (string | number)[] = ["zhangsan", "teacher", 28]

虽然已经加了注解，但依然不能很好限制数组，比如修改成

const lady: (string | number)[] = ["zhangsan", 28, "teacher"]

TypeScrip也不会报错，即使数组已经改变了

使用元组就可以很好限制

const lady: [string, string, number] = ["zhangsan", "teacher", 28]

这时候如果数组发生改变，TypeScrip会马上报错

元组的使用

使用CSV作为数据源

“zhangsan”, “teacher”, 28;
“lisi”, “teacher”, 18;
“wangwu”, “teacher”, 25;

就可以使用元组进行严谨编程

const ladys: [string, string, number][] = [
  ["zhangsan", "teacher", 28],
  ["lisi", "teacher", 18],
  ["wangwu", "teacher", 25],
];

类类型

class persons{
   }

let personObj:persons = new persons()

函数类型

const girl: () => string = () => {
   
  return "gg";
}

函数的参数

function getTotal: (one: number, two: number) {
   
	return one + two
}

函数参数为对象时对象内部的参数类型

function getTotal: ({
   one,two }: {
    one: numer,two: number }) {
   
	return one + two
}
const one = getTotal({
   one: 1, two: 2})

函数的返回类型

基本类型

function getTotal: (one: number, two: number) {
   
 	return one + two + ‘’
}
const total = getTotal(1, 2)

以上代码返回类型是字符串，是错误的，但是编译不会报错，因为没限制返回类型

可改为

function getTotal: (one: number, two: number): number {
   
 	return one + two + ''
}

void

function getTotal: (one: number, two: number): void {
   
 	// 没有return，即使return ''程序也是会报错的
}

never

中间会抛异常，后面有语句永远都不会执行到

function errorFuntion(): never {
   
  throw new Error();
  console.log("Hello World");
}

或者死循环

function forNever(): never {
   
  while (true) {
   }
  console.log("Hello world");
}

函数参数为对象解构时

interface person{
   
    age:number,
    name:string
}
 
let one_person:person = {
   
    age:100,
    name:"zhangsanfeng"
}
 
/**
 * 函数参数为对象(解构)时
 * @param one_person 
 */
function getperson(one_person:person):string
{
   
    return one_person.age +'-'+one_person.name;
}
console.log(getperson(one_person));

类型注解

type annotation

在声明变量的时候，显性的声明他的类型

let count: number;

count = 123;

这段代码就是类型注解，显性示的告诉代码，count变量就是一个数字类型，这就叫做类型注解

类型推断

type inferrence

在声明变量的时候，不声明类型，但TypeScript也能知道代码的类型

let countInference = 123;

并没有显性的告诉代码变量countInference是一个数字类型，但是如果把鼠标放到变量上，会发现 TypeScript 自动把变量注释为了number类型，也就是说TypeScript是有某种推断能力通过你的代码自动的去尝试分析变量的类型

规则

如果 TS 能够自动分析变量类型，就不需要声明类型

如果 TS 无法分析变量类型的话， 就需要使用类型注解声明类型

接口

根据需求来定义接口，然后再定义类来实现这个接口

作用

• 接口为一个或多个类提供规范
• 接口隔离：面向对象设计原则之一：高内聚，低耦合，可是类与类之间往往会有千丝万缕的关系，比如泛化、实现、组合、聚合、关联、依赖。而接口则可以将一个类对另一个类的依赖性降到最低

普通定义

const normal = (name:string,age:number,height:number):string => {
   
    let str = "";
    if(age > 30 || height < 165)
    {
   
        str = name+"未通过审核"
    }
    else
    {
   
        str = name