首先是一些ts的介绍：

js胖哥的介绍很清楚，包括本文也是根据胖哥的ts教程来做的一些相关记录，内容如下：

TypeScript是什么？

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，

TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。

其实TypeScript就是相当于JavaScript的增强版，但是最后运行时还要编译成JavaScript。

TypeScript最大的目的是让程序员更具创造性，提高生产力，它将极大增强JavaScript编写应用的开发和调试环节，

让JavaScript能够方便用于编写大型应用和进行多人协作。

TypeScript和JavaScript的对比

TypeScript 与JavaScript两者的特性对比，主要表现为以下几点：

• TypeScript是一个应用程序级的JavaScript开发语言。（这也表示TypeScript比较牛逼，可以开发大型应用，或者说更适合开发大型应用）
• TypeScript是JavaScript的超集，可以编译成纯JavaScript。这个和我们CSS离的Less或者Sass是很像的，我们用更好的代码编写方式来进行编写，最后还是有好生成原生的JavaScript语言。
• TypeScript跨浏览器、跨操作系统、跨主机、且开源。由于最后他编译成了JavaScript所以只要能运行JS的地方，都可以运行我们写的程序，设置在node.js里。
• TypeScript始于JavaScript，终于JavaScript。遵循JavaScript的语法和语义，所以对于我们前端从业者来说，学习前来得心应手，并没有太大的难度。
• TypeScript可以重用JavaScript代码，调用流行的JavaScript库。
• TypeScript提供了类、模块和接口，更易于构建组件和维护。

TypeScript的开发环境安装：

1.全局安装 typeScript

\$npm install typescript -g

在执行执行需要先编译成 js，然后再执行。不然报错

2.安装自动编译工具

\$npm install -g ts-node

eg: ts-node index.ts

1.定义静态类型 const xxx:type = value

let count: number = 123.111111;
console.log(count.toFixed(2));

 定义了静态类型后 直接使用count. 的类型方法 vsCode提供的方法

定义了静态变量 后面的值的类型不能修改、、

报错
count = "jspang";

2.interface:接口 用来声明一些变量的自定义类型

interface XiaoJieJie {
  uname: string;
  age: number;
}

const xiaohong: XiaoJieJie = {
  uname: "小红",
  age: 18,
};

同样的,自定义了变量的类型,在赋值过程中也要符合类型

如果使用了静态类型，不仅意味着变量的类型不可以改变，

还意味着类型的属性和方法也跟着确定了。

这个特点就大大提高了程序的健壮性，并且编辑器这时候也会给你很好的语法提示，加快了你的开发效率。

 3.静态基础类型和对象类型

 静态基础类型:

const count2: number = 918;
const myName: string = "bill";

对象类型

const xiaoJieJie: {
  name: string;
  age: number;
} = {
  name: "大脚",
  age: 18,
};
// console.log(xiaoJieJie.name);

// 数组类型 并指定数组内值的类型为string
const xiaoJieJies: String[] = ["谢大脚", "刘英", "小红"];

// console.log(xiaoJieJies[0]);

// 定义类型 为一个class类
class Person {}
const dajiao: Person = new Person();

// 定义类型 为一个function 并规定返回类型
const funcType: () => String = () => {
  return "funcType return String ~";
};

// console.log(funcType());

 那我们现在总结一下对象类型可以有几种形式：

 对象类型

 数组类型

 类类型

 函数类型

4.类型注解

et count3: number = 1;
// 这段代码就是类型注解，意思是显示的告诉代码，我们的count3变量就是一个数字类型，这就叫做类型注解

// 先来看一个不用写类型注解的例子：
const one = 1;
const two = 2;
const three = one + two;

// 再来看一个用写类型注解的例子：
function getTotal(one: number, two: number) {
  return one + two;
}

// total这个变量不需要加类型注解，因为当one和two两个变量加上注解后，TypeScript 就可以自动通过类型推断，分析出变量的类型。
// const total = getTotal(1, 2);

// console.log(total);

5.函数参数的返回类型 定义

const funcType2: (a: number, b: number) => number = (a, b) => {
  return a + b;
};
// console.log(funcType2(1, 2));

void:函数无返回值时的定义,void 代表没有任何返回值

function sayHello(): void {

  console.log("hello world");

}

 never:如果一个函数是永远也执行不完的，

// 就可以定义返回值为never，那什么样的函数是永远也执行不完的那?
// 我们先来写一个这样的函数(比如执行执行的时候，
// 抛出了异常，这时候就无法执行完了)。
function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}

 还有一种是一直循环，也是我们常说的死循环，这样也运行不完，比如下面的代码：

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

 函数参数为解构时,然后写类型注解

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

const sum = add({ one: 1, two: 2 });

// 第二种写法
const sum2: ({ one, two }: { one: number; two: number }) => number = ({
  one,
  two,
}) => {
  return one + two;
};
// console.log(sum2({ one: 11, two: 22 }));

 函数参数为obj时

function getString2({ a }: { a: string }) {
  return a;
}

const str = getString2({
  a: "123",
});

console.log(str);

// 函数实现重复 ts报错 是因为:编译器会把同一个文件夹中的同名变量进行警告，仅此

5.数组类型注解的方法

const Numer: number[] = [1, 2, 3, 4, 5];
const Sta: string[] = ["1", "2", "3", "4", "5"];
const undefinedArr: undefined[] = [undefined, undefined, undefined];
const moreArr: (string | number)[] = [1, 2, 3, 4, 5, "sdsddsd", "dsdsd"];
const anyArr: any[] = [
  1,
  2,
  3,
  45,
  "dsdsds",
  null,
  undefined,
  {},
  [],
  new Date(),
];

// 注解数组里面的对象
const arrObj: {
  name: string;
  age: string;
}[] = [
  {
    name: "bill",
    age: "18",
  },
];
// 可以试用type或者interface来进行简化(别名简化)，就是把一些繁琐的类型注解拆分出来
// type：
type MyInfo = {
  name: string;
  age: number;
};

//拆出来之后 MyInfo就可以直接用了
const arrObj2: MyInfo[] = [
  {
    name: "bill",
    age: 18,
  },
];

// interface
interface MyInfo2 {
  name: string;
  age: number;
}

const arrObj3: MyInfo2[] = [
  {
    name: "bill",
    age: 18,
  },
];

6.元组的使用和类型约束

场景：类型注解定义了一个 值可以为number或string的数组。

const arr: (number | string)[] = ["bill", 18, "man"];

假如我们通过这个arr 去取值渲染页面：姓名-年龄-性别

如果我们把源数据的循序改了，就会直接导致程序错误。

元组的出现就是为了解决此类的问题。

（胖哥的解释是这样的，但是我不太苟同，哪有取arr下标取固定值的呢，最好的还是用obj的key来取值，就不用关心这个顺序的问题了）

下面是元组的写法：

const arr2: [string, string, number] = ["1", "2", 3];

这样写就是每个索引的值的类型定死了，但是如果有数组长度9999..那岂不是要定义9999个元组类型，所以这个不常见也不常用，只在一些特殊场景下，可能用得到

特殊的场景比如csv 返回的格式为，就可以用元组了

// "dajiao", "teacher", 28;
// "liuying", "teacher", 18;
// "cuihua", "teacher", 25;
const arr3: [string, string, number][] = [
  ["dajiao", "teacher", 28],
  ["liuying", "teacher", 18],
  ["cuihua", "teacher", 25],
];

 7.interface 和type

interface和type的作用主要是用于声明一个公用的类型注解，减少一些代码重复使用

// 举例：写一个方法
// 定义我们的类型注解,用type和interface两种方法
type eatType1 = {
  time: number;
  name: string;
  // 添加有或者没有都可以的属性 属性名后面加一个?即可
  mood?: string;
  // 定于任意类型
  //  [propname: string]: any;propname为一个变量的占位符， key为string类型，value为任意类型
  [propname: string]: any;
};

interface eatType2 {
  time: number;
  name: string;
  mood?: string;
  [propname: string]: any;
}

// 使用interface来实现继承和在注解中，声明方法和方法的返回类型
interface eatType3 extends eatType1 {
  say(): string;
}

// 定于传递的参数也为obj类型 为了好去做对应,
const eatArgument = {
  time: 9,
  name: "bill",
  mood: "很饿很饿很饿！",
  six: "男",
  say: () => {
    return "吃完这顿，我就减肥";
  },
};

const eat = (eatArgument: eatType3) => {
  // 早餐
  if (eatArgument.time < 10) {
    return `${eatArgument.name}，要吃早餐了，心情：${
      eatArgument.mood || "无"
    }，性别：${eatArgument.six || "未提供"}，并说：${eatArgument.say()}`;

    // 午餐
  } else if (eatArgument.time < 13) {
    return `${eatArgument.name}，要吃午餐了,心情：${
      eatArgument.mood || "无"
    }，性别：${eatArgument.six || "未提供"}，并说：${eatArgument.say()}`;
    // 晚餐
  } else if (eatArgument.time < 19) {
    if (eatArgument.name === "美玉") {
      return `${eatArgument.name}，要吃晚餐了,心情：${
        eatArgument.mood || "无"
      }，性别：${eatArgument.six || "未提供"}，并说：${eatArgument.say()}`;
    } else {
      return `${eatArgument.name}，不减肥了？还想吃晚餐？,心情：${
        eatArgument.mood || "无"
      }，性别：${eatArgument.six || "未提供"}，并说：${eatArgument.say()}`;
    }

    // 加餐
  } else {
    if (eatArgument.name === "美玉") {
      return `${eatArgument.name}，晚上要加餐了,心情：${
        eatArgument.mood || "无"
      }，性别：${eatArgument.six || "未提供"}，并说：${eatArgument.say()}`;
    } else {
      return `${eatArgument.name}，你疯了，竟然还想加餐？,心情：${
        eatArgument.mood || "无"
      }，性别：${eatArgument.six || "未提供"}，并说：${eatArgument.say()}`;
    }
  }
};
console.log(eat(eatArgument));

还没学完..未完..待更新..

胖哥的ts博客教程地址：https://www.jspang.com/detailed?id=63#toc34