js-typescript记录

分类于

js-typescript记录

Sublime text3 ts提示

https://github.com/Microsoft/TypeScript-Sublime-Plugin

快速教程

http://web.jobbole.com/87535/

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的介绍和区别

http://caibaojian.com/toutiao/6864

vscode 的 egret 插件

http://bbs.egret.com/thread-24635-1-1.html

问题

  • Q: egret 支持的的 TypeScript 版本？

    sdf

  • Q: 修改 ts 后如何快速重新编译 生效

  • Q: h5、微信小游戏 分辨率

    720 x 1280

  • Q: egret 中的 字典 的使用，如果是用 Object 作为字典，该如何获取大小？

    可以使用 Map、Set

    http://bbs.egret.com/thread-27855-1-1.html

  • 如何建立一个简单的 TS 工程，可以编译运行，并输出日志？

  • 如何构建一个 egret 的第三方库

    http://edn.egret.com/cn/docs/page/172

npm 安装 typescript

  1. 选择比较快的源

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    E:\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

  2. 安装

    1
    2
    3
    4
    5
    6
    7
    E:\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 语言

数组

  • 遍历

    http://blog.csdn.net/alvachien/article/details/52475745

  • 方法

    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 方法

http://www.cnblogs.com/h82258652/p/4609074.html

async/await

https://loveky.github.io/2017/04/09/translate-6-reasons-why-javascripts-async-await-blows-promises-away/

promise

https://rexdainiel.gitbooks.io/typescript/content/docs/promise.html

http://www.cnblogs.com/brookshi/p/6422353.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)

常用第三方库

文件操作

路径操作

字符串替换

  • 使用正则才能全局替换

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let 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
2
>npm view element-ui version
2.12.0

查看库所有版本

命令: npm view xxx version

1
2
3
4
>npm view element-ui version
  ...
  '2.11.1',
  '2.12.0' ]

查看库具体信息

命令: npm info xxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
>npm info element-ui

element-ui@2.12.0 | MIT | deps: 6 | versions: 144
A Component Library for Vue.js.
http://element.eleme.io

keywords: eleme, vue, components

dist
.tarball: https://registry.npmjs.org/element-ui/-/element-ui-2.12.0.tgz
.shasum: a893bc11ae4f7dbb7e9d541606f23e643f131ee4
.integrity: sha512-DapyT0PW4i/1ETPHk8K8Qbe8B6hj10+dXsRTrOTFryV9wAs6e9mCxbV65awokyR2/v/KuIHJmqX+mH3wUa4rOQ==
.unpackedSize: 7.4 MB
...

查看项目可可升级的库

命令: npm outdated

1
2
3
4
I:\workspace\vue-element-admin>npm outdated
Package                                Current          Wanted      Latest  Location
@babel/core                              7.0.0           7.0.0       7.6.0  vue-element-admin
@babel/register                          7.0.0           7.0.0       7.6.0  vue-element-admin

serve 包

  1. 安装

    1
    $ npm install -g serve

  2. 起服务

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
        serve -s [路径] -p [端口]



    ---

    ### js 代码压缩 - uglifyjs

    常用的是 uglifyjs, 官方: https://github.com/mishoo/UglifyJS

    1. 安装

        ```json
        $ npm install -g uglify-js

  3. 使用

    1
    2
    3
    uglifyjs 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. 安装

    1
    $ npm install -g html-minifier

  2. 使用

    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
2
3
javascript
复制代码
console.log('%cThis is a colored log', 'color: green; font-weight: bold;');

以下是一些示例，展示如何使用不同的样式：

  1. 改变文本颜色
1
2
javascript复制代码console.log('%cThis text is red', 'color: red;');
console.log('%cThis text is blue', 'color: blue;');
2. 改变背景颜色
1
2
javascript复制代码console.log('%cThis text has a yellow background', 'background-color: yellow;');
console.log('%cThis text has a black background and white text', 'background-color: black; color: white;');
  1. 使用多种样式
1
2
3
javascript复制代码console.log('%cBold and Red', 'color: red; font-weight: bold;');
console.log('%cItalic and Blue', 'color: blue; font-style: italic;');
console.log('%cLarge Text', 'font-size: 20px;');
  1. 混合使用多种样式
1
2
3
javascript
复制代码
console.log('%cThis is a %ccolored %ctext', 'color: black;', 'color: red;', 'color: blue;');

完整示例

1
2
3
javascript复制代码console.log('%cHello World!', 'color: green; font-size: 20px; font-weight: bold;');
console.log('%cWarning: Something went wrong!', 'color: orange; font-size: 16px; background-color: yellow;');
console.log('%cError: This is an error message', 'color: white; background-color: red; font-size: 14px; padding: 2px;');

自定义控制台日志函数

你可以创建一个自定义函数来简化日志记录并应用样式：

1
2
3
4
5
6
javascript复制代码function styledLog(message, styles) {
    console.log('%c' + message, styles);
}

styledLog('This is a green text', 'color: green;');
styledLog('This is a bold and blue text', 'color: blue; font-weight: bold;');

总结

通过使用 %c 占位符和 CSS 样式字符串，你可以轻松控制 console.log 的颜色和其他样式。这种方法可以帮助你在调试时更清晰地区分不同类型的信息。

浏览器使用正则表达式过滤日志

  • 使用标准的 js 正则表达式即可

    image-20240825113558773

忽略 ts 检查

  1. 使用 @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() 引发的错误，允许你编写没有类型检查的代码。

  2. 使用 any 类型
    将代码中的变量声明为 any 类型。any 类型关闭了类型检查，使代码与原生 JavaScript 的动态特性更接近, any 类型可以让你在函数中自由地使用动态类型而不会受到 TypeScript 的约束。

1
2
3
4
function someFunction() {
  let someVar: any = someUndefinedFunction(); // 使用 any 类型
  console.log(someVar);
}
  1. 使用 declare 声明外部的 JavaScript 函数
    如果你想调用外部的 JavaScript 函数，而不让 TypeScript 对其进行类型检查，可以使用 declare 声明它。
1
2
3
4
5
6
declare function someUndefinedFunction(): any;

function someFunction() {
  let result = someUndefinedFunction(); // 不会进行类型检查
  console.log(result);
}
  1. 将整个文件标记为 JavaScript

如果你希望 TypeScript 文件中的所有代码都不做类型检查，你可以将整个文件的后缀改为 .js，然后通过 // @ts-nocheck 告诉 TypeScript 不对该文件做类型检查。在文件顶部加上 // @ts-nocheck：

1
2
3
4
5
6
// @ts-nocheck

function someFunction() {
  let a = someUndefinedFunction(); // 整个文件不做类型检查
  console.log(a);
}

踩坑记录

  • 编译报错: 对象可能未定义

    1
    2
    3
    4
    5
    export 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 中调用, 在别的地方调用即可