js-typescript记录
js-typescript记录
Sublime text3 ts提示
快速教程
TypeScript 语法教程
https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/tsconfig.json.html
https://www.gitbook.com/book/zhongsp/typescript-handbook/details
自动构建工具
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
相关文章
JavaScript、ES5和ES6的介绍和区别
vscode 的 egret 插件
问题
Q: egret 支持的的 TypeScript 版本?
sdf
Q: 修改 ts 后如何快速重新编译 生效
Q: h5、微信小游戏 分辨率
720 x 1280
Q: egret 中的 字典 的使用,如果是用 Object 作为字典,该如何获取大小?
可以使用 Map、Set
如何建立一个简单的 TS 工程,可以编译运行,并输出日志?
如何构建一个 egret 的第三方库
npm 安装 typescript
选择比较快的源
1
2
3
4
5
6
7
8
9
10
11E:\workplace_egret\TestTs>nrm ls
npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
E:\workplace_egret\TestTs>nrm use taobao安装
1
2
3
4
5
6
7E:\workplace_egret\TestTs>npm install -g typescript
C:\Users\Administrator\AppData\Roaming\npm\tsserver -> C:\Users\Administrator\AppData\Roaming\npm\no
de_modules\typescript\bin\tsserver
C:\Users\Administrator\AppData\Roaming\npm\tsc -> C:\Users\Administrator\AppData\Roaming\npm\node_mo
dules\typescript\bin\tsc
C:\Users\Administrator\AppData\Roaming\npm
`-- typescript@2.6.2
npm 安装依赖
- mode_modules 全局路径 $USER_PROFILE$\AppData\Roaming\npm\node_modules
- mode_modules 工作区路径 $WORK_PLACE$\node_modules
输入命令
npm i protobufjs --save
. ( 下载到当前项目的 mode_modules 文件夹中, 再多一个 -g 参数就下载到全局 node_modules 中)1
E:\its_h5\subproj\mock>npm i protobufjs --save
会在 package.json 中加入该依赖,别人使用
npm i
就可以安装相关的所有依赖1
2
3"dependencies": {
"protobufjs": "^6.8.4"
}
TS 语言
数组
遍历
方法
contat 连接两个数组,返回新的数组 2 every 传递一个回调,验证是否每个元素是否符合条件 3 filter 传递一个架设,用于选择符合条件的元素 4 forEach 传递回调,为每个元素执行方法 5 indexOf 返回特定元素在数组中位置,没有找到返回-1 6 join 将数组中元素进行拼接 7 lastIndexOf 反向查找特定元素的位置,没有找到返回-1 8 map 传递回调,回调方法中返回的每个元素组成新的数组,并将新数组返回 9 pop 移除最后一个元素 10 push 在末尾增加新的元素 11 reduce 依次对每个元素进行操作,前两个操作的返回与后一个进行操作 12 reduceRight 反向执行reduce的操作 13 shift 移除第一个元素 14 reverse 反转数组 15 slice 截取子数组 16 some 传递回调,任一一个元素进行操作后为true,则返回true 17 sort 对数组进行排序,也可以传参,设置排序规则 18 splice 增加或者删除元素 19 toString 返回数组的标识字符串 20 unshift 在数组头插入一个或多个元素,返回新数组的长度
字典
未定义对象undefined 和 null对象 都可以用
if (xxx == null)
来判断,也可以用if (xxx)
lambda 方法
async/await
promise
https://rexdainiel.gitbooks.io/typescript/content/docs/promise.html
泛型映射
实现类似一一映射的功能
1
2
3
4
5
6
7
8
9
10
11
12
13 private _dataMap = new Map<any, any>()
public getData<T>(dataCtor: { new(): T }): T {
let ret = this._dataMap.get(dataCtor)
if (!ret) {
ret = new dataCtor()
this._dataMap.set(dataCtor, ret)
}
return ret
}
// 使用
let data = gDataMgr.getData(CPlayerData)
常用第三方库
文件操作
- nodejs中常用文件操作API及相关API - https://blog.csdn.net/Tyro_java/article/details/54730509
路径操作
- Node.js Path 模块 - http://www.runoob.com/nodejs/nodejs-path-module.html
字符串替换
使用正则才能全局替换
1
2
3
4
5
6
7
8
9let luaPath = "logic\scene\scene_manager.lua";
// 正解, 全局替换
luaPath = luaPath.replace(/\\/g, ".").replace(/\//g, ".");
console.log("--- luaPath:", luaPath); // logic.scene.scene_manager.lua
// 错误, 只替换了第一个
luaPath = luaPath.replace("\\", ".").replace("/", ".");
console.log("--- luaPath:", luaPath); // logic.scene\scene_manager.lua
调用系统程序
时区 moment-timezone
npm 查看 库 版本
查看库最新版本
命令: npm view xxx version
1 | >npm view element-ui version |
查看库所有版本
命令: npm view xxx version
1 | >npm view element-ui version |
查看库具体信息
命令: npm info xxx
1 | >npm info element-ui |
查看项目可可升级的库
命令: npm outdated
1 | I:\workspace\vue-element-admin>npm outdated |
serve 包
- npm 包 - serve 使用 - https://blog.csdn.net/lhz_333/article/details/126361041
安装
1
$ npm install -g serve
起服务
1
2
3
4
5
6
7
8
9
10
11
12
13
14serve -s [路径] -p [端口]
---
### js 代码压缩 - uglifyjs
常用的是 uglifyjs, 官方: https://github.com/mishoo/UglifyJS
1. 安装
```json
$ npm install -g uglify-js使用
1
2
3uglifyjs conv.js -o conv.min.js -c
uglifyjs conv.js -o conv.min.js -c drop_console // 移除 console 日志
uglifyjs mylib.js -m -o mylib.min.js -c drop_console // 移除 console 日志 并混淆
html css 代码压缩 - html-minifier
安装
1
$ npm install -g html-minifier
使用
1
$ html-minifier --collapse-whitespace --remove-comments --minify-css true --minify-js true --input-dir [SrcDir] --output-dir [DstDir]
控制台颜色
在 JavaScript 中,你可以使用浏览器控制台的样式来控制 console.log
的颜色。可以通过传递 CSS 样式字符串到 console.log
来实现这一点。
基本用法
使用 %c
指定样式,并将样式字符串作为第二个参数传递给 console.log
:
1 | javascript |
以下是一些示例,展示如何使用不同的样式:
- 改变文本颜色
1 | javascript复制代码console.log('%cThis text is red', 'color: red;'); |
2. 改变背景颜色
1 | javascript复制代码console.log('%cThis text has a yellow background', 'background-color: yellow;'); |
- 使用多种样式
1 | javascript复制代码console.log('%cBold and Red', 'color: red; font-weight: bold;'); |
- 混合使用多种样式
1 | javascript |
完整示例
1 | javascript复制代码console.log('%cHello World!', 'color: green; font-size: 20px; font-weight: bold;'); |
自定义控制台日志函数
你可以创建一个自定义函数来简化日志记录并应用样式:
1 | javascript复制代码function styledLog(message, styles) { |
总结
通过使用 %c
占位符和 CSS 样式字符串,你可以轻松控制 console.log
的颜色和其他样式。这种方法可以帮助你在调试时更清晰地区分不同类型的信息。
浏览器使用正则表达式过滤日志
使用标准的 js 正则表达式即可
忽略 ts 检查
使用 @ts-ignore 注释
你可以在特定的行上方使用 @ts-ignore,它会告诉 TypeScript 忽略该行的类型检查。这样可以在特定方法或代码块中绕过类型检查。1
2
3
4
5
6
7// 使用 @ts-ignore 忽略类型检查
// @ts-ignore
function someFunction() {
// JavaScript 风格的代码
let a = someUndefinedFunction(); // 这里的错误将被忽略
console.log(a);
}在这种情况下,TypeScript 会忽略 someUndefinedFunction() 引发的错误,允许你编写没有类型检查的代码。
使用 any 类型
将代码中的变量声明为 any 类型。any 类型关闭了类型检查,使代码与原生 JavaScript 的动态特性更接近, any 类型可以让你在函数中自由地使用动态类型而不会受到 TypeScript 的约束。
1 | function someFunction() { |
- 使用 declare 声明外部的 JavaScript 函数
如果你想调用外部的 JavaScript 函数,而不让 TypeScript 对其进行类型检查,可以使用 declare 声明它。
1 | declare function someUndefinedFunction(): any; |
- 将整个文件标记为 JavaScript
如果你希望 TypeScript 文件中的所有代码都不做类型检查,你可以将整个文件的后缀改为 .js,然后通过 // @ts-nocheck 告诉 TypeScript 不对该文件做类型检查。在文件顶部加上 // @ts-nocheck:
1 | // @ts-nocheck |
踩坑记录
编译报错:
对象可能未定义
1
2
3
4
5export function getWorkspaceFolder(uri: Uri): WorkspaceFolder | undefined;
let folder = getWorkspaceFolder
console.log("--- uri", folder.uri); // 报错: 对象可能未定义
console.log("--- uri", folder!.uri); // 正确, 加多一个 ! 符号
初始化全屏报错
报错:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
原因是因为在
window.onload
调用了全屏 api解决办法, 不要在
window.onload
中调用, 在别的地方调用即可