首先是一些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为任意类型
};
interface eatType2 {
time: number;
name: string;
mood?: string;
}
// 使用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
作者: Bill 本文地址: http://biaoblog.cn/info?id=1626772599065
版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
