第一课 typescript简介

RexMenGame

已于 2022-01-26 13:45:07 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CocosCreator 文章标签： typescript javascript 前端

于 2022-01-26 13:08:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46192491/article/details/122699597

CocosCreator 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了TypeScript，一种JavaScript的超集，重点讲解了TypeScript的环境搭建过程，包括安装Node.js和typescript，以及如何编译和运行TS文件。此外，还详细阐述了TS中的变量作用域、数据类型，包括数字、字符串、布尔值、数组、元组、枚举、空类型等，并提及了对象的声明和访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.计算机语言

c++:强类型语言,是c语言的超集
typescript:强类型脚本语言,是javascript语言的超集,由变量,常量,运算符,程序结构,函数,类与对象组成.
CocosCreator游戏开发可以使用JavaScript与TypeScript,建议使用TypeScript.

2.ts环境搭建

①安装nodejs
https://nodejs.org/
http://nodejs.cn/
下载LTS长期维护版本
②检查是否安装成功
win+r打开系统控制台CMD输入node -v 查看node版本

C:\Users\Administrator>node -v
v10.16.0

③在windows上打开powershell
在文件夹窗口按住shift键并点击鼠标右键
④使用npm安装typescript

npm i -g typescript

控制台输入tsc检测是否安装成功

PS E:\SixStar\cocosCreator\notes> tsc
Version 4.5.4
tsc: The TypeScript Compiler - Version 4.5.4

⑤编译ts文件

第一步写ts代码文件:test01

console.log("这是一个ts文件");

第二步将test01.ts文件编译成test01.js文件

PS E:\SixStar\cocosCreator\notes> tsc test01.ts

第三步执行test01.js

PS E:\SixStar\cocosCreator\notes> node test01.js
这是一个ts文件
PS E:\SixStar\cocosCreator\notes>

3.IDE软件安装

vs code

4.ts变量

①变量作用域

全局作用域:整个ts文件整个全局
类作用域:通过类的对象访问普通的变量,类的静态变量通过类名直接访问.
局部作用域:声明在代码块{}

②变量的声明

let:当前块作用域
var:全局环境
const:声明常量,拥有和let一样的作用域

console.log("第一个程序");
let a=10;
var b=12;
let c:string="lakdjflk";
const data ="fffff";

③typescript语法特点

区分大小写

单条语句结尾分号可省略

注释同c++

5.ts数据类型

在变量后加冒号跟变量类型

①任意类型:any

②数字:number 只有一种双精度64位浮点值

③字符串:string 单引号双引号都代表字符串

④布尔值:boolean true false

⑤数组类型:[]

⑥元组:

有一定限制的数组

⑦枚举:enum 枚举变量必须大写

⑧空类型:void 用来标识方法返回值

⑨空类型:null

⑩undefined

⑪never 父类为null和undefined

6.对象

①对象声明:对象是包含一组键值对得实例.值可以使标量,函数,数组,对象等

//var声明全局对象objcet01
var object01={
key1:"value1",
key2:function(){return "这是一个函数"},
key3:["string1","string2"]
};

②对象访问

//声明
var mysite={
site1:"www.rexmen.cn",
site2:"www.baidu.com"
};
//访问
console.log(mysite.site1);
console.log(mysite.site2);

③为对象添加方法

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp1 extends cc.Component {
    start() {
        //声明
        var mysite = {
            site1: "www.rexmen.cn",
            site2: "www.baidu.com",
            sayHello: function () { }//类模板
        };
        //为对象添加方法必须有实例
        mysite.sayHello = function () {
            return "hello"
        }
        //访问
        console.log(mysite.sayHello(), mysite.site1);
        console.log(mysite.sayHello(), mysite.site2);
    }
}