速学TypeScript-精简划重点手册-上册

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣 ！！！
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎私我，交流群让学习不再孤单。

👉前提

非小白文，作者拥有几年编程经验，开发Android和Unity，因当下想开发小游戏学习CocosCreator需要用的TypeScript，所以需要了解下该语言知识。小空会挑重点，简单的回带过甚至不提。

适合做成手册，没事翻翻。

👉实践过程

😜TypeScript介绍

TypeScript 是 JavaScript 的一个超集，由微软开发的开源语言，目标是开发大型应用。

😜基础类型

1. 基本是和JS相同的数据类型，但小空在此提出几个不同的：
2. TS拥有枚举类型，JS没有
3. 所有数字都是浮点型，用number表示，却支持二，八，十，十六共四种进制
4. 字符串可用双引号或单引号
5. 元组可以是混合类型，其实单个的变量也可以是混合类型用 | 符号
6. 数字枚举符合自增原则
   真实的实例代码如下：

//没赋初始值 从0开始 这=0，是=1，枚=2，举=3
enum MeiJuOne {这, 是, 枚, 举};
//赋初始值 从5开始 这=5，是=6，枚=7，举=8
enum MeiJuTwo {这 = 5, 是, 枚, 举};
//字符串枚举
enum MeiJuThree {字 = "字", 符 = "符", 串 = "串", 枚 = "枚", 举 = "举"};
@ccclass("ScriptLieXing")
export class ScriptLieXing extends Component {
    renYiNum: any = 1;
    renYiStr: any = "任意类型";
    renYiBool: any = false;
hexLeiXing: number = 0xf00a;  //十六进制

//声明为只读类型

  readonly  binaryLeiXing: number = 0b1010; // 二进制
    octalLeiXing: number = 0o744;    // 八进制
    decLeiXing: number = 6;    // 十进制
    years: number = 2;
    myName: string = "小空"; //字符串类型  双引号
    words: string = `小芝`; //字符串类型 单引号
    //数组类型
    myNumberOneNum: number[] = [1, 2, 3, 4];
    myNumberOneStr: string[] = ["1", "2", "3", "4"];
    //Arrray可以是任意类型，和List相似
    myNumberTwo: Array<number> = [1, 2, 3, 4];
    myNumberThree: Array<string> = ["1", "2", "3", "4"];
    //元组类型 []里面数量可以随意，但是后面赋值对应位置类型要一致
    myGroup: [string, number, boolean] = ["1", 1, true];

    start() {
        this.words = `您好，今年是 ${this.myName} 更文 ${this.years + 1} 周年`;
        let flag: boolean = true; //布尔类型
        let myGroup: [string, number, boolean];
        myGroup = ["2", 2, false];
        //当然也可以根据数组index来赋值
        myGroup[0] = "芝麻粒儿";
        myGroup[1] = 3;
        myGroup[2] = true;
        console.log(MeiJu.枚);
        // let nullAndUnOne: number;
        // nullAndUnOne = 1; // 运行正确
        // nullAndUnOne = undefined;    // 运行错误-可以看到有红色底线提示错误
        // nullAndUnOne = null;    // 运行错误-可以看到有红色底线提示错误
        // let nullAndUnTwo: number | null | undefined;
        // nullAndUnTwo = 1; // 运行正确
        // nullAndUnTwo = undefined;    // 运行正确
        // nullAndUnTwo = null;    // 运行正确
    }

    //没有返回值的方法  也可以不用void methodTwo() {}
    methodOne(): void {
    }
    methodTwo() {
    }
}

注意：

1. 声明变量，如果是基础类型，则建议必须赋初始值，否则编译器检查出错，这也是考虑健壮性。
2. 注意null和undefined是类型，和Java或c#有些许区别，当你是指定的基础类型后无法再赋值null或undefined，如果需要你要在创建变量的时候就要加上!
3. 可用 | 来支持多种类型，如上图所示。如果想初始变量可为null，则：_jumpStep: number | null = null;

😜变量声明

和小空进行实际操作过的小伙伴可能发现了上面是用let来声明的变量，这和var有什么区别呢？

其一是作用域奇怪（比如if里面声明的变量，在下方if的外面竟然还能访问），作为Android和Unity开发，使用习惯了Java和C#，突然来这么一出特别容易让人抓狂，稍不留意就死在这了。

其二是同一个变量声明多次一点事没有？闹呢？这稍有不留意下面引用不就乱套了？咋？想搅屎棍儿一样？在哪都插那么两下？

总之，就是特别容易让人上头。所以let就是解决这些问题的，她能明确的区分变量的作用域，{}花括号内声明的变量外部不能访问。这和Java及C#就一致了。

哎，这个时候有的小伙伴又要问了，我记着还看见了const，那又是干啥的？

别急，小空接着说，const作用域和let一样，他主要有一个特点就是后续无法再重新赋值了。我记着C#好像也有这么一回事，之前还用过，现在想不起来了。

😜作用域

和多数编程语言一样，全局变量，局部变量，静态变量，分文不差。注意，小空说的是TypeScript，不是JavaScript。经过上面变量声明的解释，了解到原因后，以后写代码就会发现，啊，真是太爽了。

😜运算符

都是编程里面通用的基础知识。

算数运算符（+，-，*，/，%，++，–）

逻辑运算符（&&，||，!）

关系运算符（==，!=，>，<，>=，<=）

按位运算符（&，|，~，^，<<，>>，>>>）

赋值运算符（=，+=，-=，*=，/=）

三元/条件运算符（？：）

😜typeof 运算符

她是一元运算符，返回操作数的数据类型。

let typeOfOne: number = 1;

console.log(typeof typeOfOne); //输出结果：number

😜判断条件/循环

仍然是编程老鸟的基础内容。

if 语句 - 只有当指定条件为 true 时，执行if里面的代码代码

if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行else里面的代码

if…else if…else 语句- 使用该语句来选择多个代码块之一来执行

switch 语句 - 使用该语句来选择多个代码块之一来执行

for 循环语句 for…in 循环语句 while 循环 for…of 、forEach、every 和 some 循环 break continue

for…of是ES6引入的循环，来替代for…in和forEach，允许遍历Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构，所以她遍历出来的是键对应的值。更新详情看目录 Map对象 里面的代码

//数组类型-for…in 和for…of的区别

myNumberOneNum: number[] = [7, 2, 6, 4];
  for (const num in this.myNumberOneNum) {
            console.log(num); //输出结果：0 1 2 3
        }
        for (const num of this.myNumberOneNum) {
            console.log(num); //输出结果：7  2  6  4
        }

👉其他

📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima.blog.csdn.net/
📢欢迎点赞👍收藏🌟留言📝