【Cocos TypeScript 零基础 1.1】

adminwxs

已于 2025-04-02 16:58:39 修改

阅读量530

点赞数 6

分类专栏： Cocos TypeScript 零基础文章标签： typescript javascript 前端 cocos cocos2d

于 2025-01-02 18:53:19 首次发布

本文链接：https://blog.youkuaiyun.com/adminwxs/article/details/144864886

版权

Cocos TypeScript 零基础专栏收录该内容

25 篇文章

订阅专栏

TS在线练习地址

点击跳转

https://www.typescriptlang.org/zh/play/?#code/Q

基础数据类型

入门

let str1 : string = '你好'  //  字符串
let num1 : number = 1 //  数字
let bool : boolean = true //  布尔值
let sz1 : string[] = ['你好','世界']  //  数组 字符串
let sz2 : number[] = [123,321]  //  数组 数字
const x1 : number = 3.14	//	常量	一般不能人为修改

关于数组,我之前写过一篇文章想要了解的自行跳转
数组相关_点击跳转
初级

//	枚举
enum  mj1 {Red,Green,Blue}
console.log('',mj1.Red)
enum  mj2 {Red = '#f00' , Green = '#0f0' , Blue = '#00f'} //  枚举赋值
console.log('',mj2.Red)
//	字典
let zd1 : { [key:number] : number}	//	字典定义
zd1 = {1:90 ,2:88 ,3:84}	//	字典赋值
console.log( zd1[1] )	//	字典调用
let zd1 : { [key:number] : number} = {1:90 ,2:88 ,3:84}	//	可以定义赋值一起写

注意
字典的调用时,用的是KEY值,并不是数组的排序
HarmonyOS 好像没办法用字典 IDE报错

//	对象
interface dx { name:string , age:number }	//	对象定义
let dx1 : dx = {name : '123' , age : 123}	//	对象创建并赋值
console.log('',dx1.name)	//	对象调用
//变量回调函数
let fun1 : ()=>{}

符号

加减乘除

没什么好讲的

let a : number
a = 1 + 1
a = 1 - 1
a = 1 * 1
a = 1 / 1

注意

a++
a+=1
a = a + 1

这3个运算表达式结果是一样的

注释

注释并不影响程序的运行,是给人看的,机器会跳过

//单行注释

/*
多行注释,有些IDE可能会引用来提示,比如微信小程序
*/

比较运算符

这个也简单

let a : number = 0
let b : number = 1
console.log(a < b)
console.log(a > b)
console.log(a == b)
console.log(a <= b)
console.log(a >= b)

赋值

一个等是常规赋值

a = 5

注意
一个等是赋值
两个等是比较值是否相等
三个等是值和类型都相等才返回 true
深拷贝
在实际开发中会遇见多重数组等情况
为了人便于识别会额外赋值,只做常规赋值操作会导致指针仍在原位
例如:

a : number[][] = [[99,98] , [88,87]]
b = a[0]
b[0] = 77
console.log(a)

修改 b0 会导致修改 a00
如果 b 是单独的数组,只是借用 a0 的数据
这就需要深拷贝(深复制,深赋值)

b = JSON.parse(JSON.stringify(a[0]))

逻辑运算符

//	与	&&	条件都满足返回真
//	或	||	条件满足其一返回真
//	非	!	结果取反

console.log('逻辑',a < b && a == b)
console.log('逻辑',0 < a || 0 < b)

三目运算(三元条件表达式)

let a : number = 45
let b : number = 65
a < b ? a++ : a--
console.log(a)

上面代码的意思就是
如果 a 小于 b 则执行 a+1 , 否者执行 a-1

if 语句

let a : number = 45
let b : number = 65
a < b ? a++ : a--	//	三目运算
if (a < b){a++} //  如果 a 小于 b 则执行 a++
if (a < b){a++} else {a--}	//	和三目运算的意思一样	写法不一样而已

更多分支 (其实上面的也叫分支)

if (a == 45) console.log('=45')	//	如果 a 等于 45 则打印 =45
else if (a == 46) console.log('=46') //	这是第二个判断,基于第一个判断,如果第一个判断条件成立,则后续代码不会执行
else console.log('>46')	//	else 是所有分支条件都不满足则执行 else 的内容

小技巧
if 判断条件后只有一条执行内容,可以不写大括号(花括号)
switch 语法
更多分支还有另一种写法,意思是一样的

switch (a){
    case 45 : console.log('=45')
    break;	//	跳出判断
    case 46 : console.log('=46')
    break;
    default : console.log('>46')
}

循环

for 循环

for (let x : number = 0 ; x < 5 ; x++ ) { console.log( x ) }

运行步骤

创建变量并赋值
判断条件
为真执行花括号代码 ( 为假则结束循环 )
再执行自增
再次条件判断

我习惯使用 for 循环,所以我觉得 for 使用更多
for of
历遍数组内的值,语法更简洁
break 跳出循环
continue 跳出当前循环

for (let item of sz1){
    if ( item == '小芳') break
}

练习
这个练习很有意思,SiKi老师有讲解
点击跳转_原视频讲解
水仙花数 : 个位立方 + 十位立方 + 百位立方 = 水仙花数

for ( let num : number = 100 ; num < 1000 ; num++ ) {
    let sum : number = 0
    let n1 = num % 10 //    得到个位数
    let n2 = (num - n1) / 10 % 10   //   得到十位数
    let n3 = (num - n2*10 - n1) / 100 // 得到百位数
    sum = n1*n1*n1 + n2*n2*n2 + n3*n3*n3
    if (num == sum) console.log('水仙花数',num)
}

九九乘法表
我自己写的方法,花了丢丢时间

let txt : string = `\n`
for (let a : number = 1 ; a < 10 ; a++){
    for (let b : number = 1 ; b < 10 ; b++){
        let c = a * b
        if (a<b) continue	//	我在这里剔除多余数	老师的方法在 for 循环中就剔除了
        txt += ` ${b}*${a}=${c}`
        if (a == b)txt += `\n`
    }
}
console.log(txt)

SiKi老师方法

let s : string = `\n`
for (let hang : number = 1 ; hang < 10 ; hang++){
    for (let lie : number = 1 ; lie <= hang ; lie++){
        s += `${lie}*${hang}=${hang*lie} `
    }
    s += `\n`
}
console.log(s)

while 循环

let x : number = 0
while ( x < 5 ) {
    console.log(x)
    x++
}

上面这段代码和 for 循环代码意思是一样的
但需特别注意最后的自增
因为不搞好就会弄成死循环 (一般情况下避免出现死循环)

函数

function fun1 () {}	//	常规函数创建方式
let fun1 : () => {}	//	变量回调函数
class lei {
    chu1 : string = ''
    hd = ()=>{}	//	类变量回调函数
    constructor () {}	//	类初始化函数
    fun1 () {}	//	类函数
}

类

类是重点,我之前的文章有写过
点击跳转_查看类

练习

用对象的方式
用类的方式都是可以实现的
但需要自己根据实际情况进行使用

//	创建对象	下面代码并未使用
interface gw {
    name : string
    damage : number
    hp_max : number
    hp : number
}
//	创建类
class guai{
    name : string
    damage : number
    hp_max : number
    hp : number
    constructor (name:string , damage:number , hp_max:number , hp:number){
        this.name = name
        this.damage = damage
        this.hp_max = hp_max
        this.hp = hp
    }
    gongji (dx:guai){
        dx.hp = dx.hp - this.damage
        console.log(`${this.name} 攻击了 ${dx.name} 造成了 ${this.damage} 点伤害\n${dx.name} 当前血量 ${dx.hp}`)
    }
    fanji (dx:guai){
        dx.hp = dx.hp - this.damage/2
        console.log(`${this.name} 反击了 ${dx.name} 造成了 ${this.damage/2} 点伤害\n${dx.name} 当前血量 ${dx.hp}`)
    }
}
//	创建实例类
let bgj = new guai ('白骨精', 15, 100, 100)
let nmw = new guai ('牛魔王', 30, 200, 100)
let hxf = new guai ('虎先锋', 20, 200, 100)
//	函数
function gongji (g1:guai , g2:guai){
    g2.hp = g2.hp - g1.damage
    console.log(`${g1.name} 率先攻击了 ${g2.name} 造成了 ${g1.damage} 点伤害\n${g2.name} 当前血量 ${g2.hp}`)
    g1.hp = g1.hp - g2.damage
    console.log(`${g2.name} 还击了 ${g1.name} 造成了 ${g2.damage/2} 点伤害\n${g1.name} 当前血量 ${g1.hp}`)
}
//	调用函数
gongji (hxf , nmw)
//	调用类函数
nmw.gongji(hxf)
hxf.fanji(nmw)