面向对象-Java 换 TypeScript 笔记
2021-09-27 42
临时入门用
-
开发工具中配置typescirpt自动编译
vscode:- 创建tsconfig.json文件 tsc --init 生成配置文件
扩展: tsconfig.json配置项详解 - tsconfig.json配置文件中，修改outDir配置项，取消注释然后修改为.js
- vscode中，点击上方栏位run task，选择ts监听
- 创建tsconfig.json文件 tsc --init 生成配置文件
-
TS 需要指定类型，ES5 不用
-
int，float，double都算为number 类型
-
TS类型：
- boolean
- number
- string
- array数组：
方式1：var arr:number[] = [1,2,3]//制定arr里面全是数字
方式2：var arr:Array= [1,2,3]
-
元组类型（tuple）
方式1：属于数组的一种，即数组中每一个元素指定类型
方式2：var arr:[number, string]=[123,“this is ts”]; -
枚举类型 （enum）
// 常用来标识状态码
enum Err{
'undefined'=-1,
'null'=-2,
} -
（最有特色的一个关键词）any 任意类型
var num:any = 123; nmu = true;
- 接口
用法：定义对象的类型（结构体用法）或是对类部分行为的抽象
习惯：接口一般首字母大写。有的编程语言中会建议接口的名称加上I前缀。
例如：定义对象的类型）
interface Person {
readonly id: number; // 只能在创建的时候被赋值，后续单独赋值也不行
name : string;
age? : number; // 问号为可选属性
[proppName: string] : any; // 一旦定义了任意属性，那么 确定属性和可选属性 的类型都必须是它的类型的子集：
}
错误例子：
interface Person {
name: string;
age?: number;
[propName: string]: string;
}
let tom: Person = {
name: 'Tom',
age: 25, // Error: Property 'age' of type 'number' is not assignable to string index type 'string'.
gender: 'male'
};
https://blog.csdn.net/weixin_42199131/article/details/114398264
https://blog.csdn.net/z591391960/article/details/105667767
https://zhuanlan.zhihu.com/p/72323250
https://blog.csdn.net/sunxiaoju/article/details/98622352
https://www.tslang.cn/docs/handbook/decorators.html
https://www.cnblogs.com/rongfengliang/p/11637595.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
https://www.tslang.cn/docs/handbook/decorators.html#class-decorators
https://blog.csdn.net/zsd0819qwq/article/details/105321897
https://gitee.com/xu-maolin/tt-autotest
https://www.cnblogs.com/cheryshi/p/10431268.html
https://www.cnblogs.com/miracle77hp/articles/11163532.html
https://blog.csdn.net/qq_42469247/article/details/88831155
https://blog.csdn.net/weixin_43664308/article/details/100083246
https://blog.csdn.net/weixin_34090643/article/details/91501975
https://blog.csdn.net/qq2942713658/article/details/114240485
https://blog.csdn.net/ruanrunxue/article/details/103109956?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162518784016780261929816%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=162518784016780261929816&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-2-103109956.pc_v2_rank_blog_default&utm_term=typescript&spm=1018.2226.3001.4450
UMD 模块
- 历史
对象模块
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
改进后：
var MyModule = {
add: function (a, b) {
return a + b;
},
multiply: function (a, b) {
return a * b;
}
}
IIFE（immediately invoked function expression 立即执行函数）
(function(global) {
var default_option = {
color: 'blue'
}
global.setColor = function(id, colorValue) {
document.getElementById(id).style.color = colorValue || default_option.color
}
})(this)
CommonJS
一个 JS 就是一个模块。接下来介绍关键的几个模块。
- module
- exports
- require
// a.js
module.exports.add = function (a, b) {
return a + b;
}// b.js
var a = require('./a.js');var result = a.add(1, 2);
console.log(result); // 输出3
module
- id：一般默认为模块的路径
- exports：模块对外导出对象
- parent：指向首次加载本模块的模块
- filename：绝对路径
- loaded：是否加载完成
- children：引用的其它模块
- path：加载模块的搜索路径。找不到会逐级往回查，直到盘符根目录。
exports
- Node.js 在初始化时执行了 exports = module.exports
module.exports = {
add: function (a, b) {
return a + b
}
}
require
- 如果没指定 main 字段，nodejs 会默认去加载 index.js 或者 index.node
- require.resolve()：将模块名解析，得到该模块的绝对路径
- require.main：当前执行的主模块
- require.cache：所有缓存的模块
- require.extensions：根据文件的后缀名，调用不同的执行函数
缓存
require() 加载后会有缓存。
清理缓存：delete require.cache
由于 CommonJS 适合服务器端的同步加载，不适合天生异步的浏览器端 -> AMD（Asynchronous Module Definition，异步模块定义），require.js 开始出现。
require.js
定义模块
define([name], [deps], callback)
简单模块
define() 直接定义这些键值对
define({
name: 'simpleModule',
version: '1.0.0',
add: function(a, b) {
return a + b;
}
})
函数式模块
function add(a, b) { }
存在依赖的模块
在define 方法中声明
define(['jquery'], function($) { }
sea.js 不阻塞的同步写法
// 定义一个模块
define(function(require, exports, module) {
// 加载 jquery 模块
var $ = require('jquery');
// 直接使用模块里的方法
$('#header').hide();
});
require.js
// 加载完 jquery.js 后，得到的执行结果$作为参数传入了回调函数
define(['jquery'], function($) {
$('#header').hide();
});
sea.js
// 预加载了 jquery.js
define(function(require, exports, module) {
// 执行 jquery.js 模块，并得到结果赋值给$
var $ = require('jquery');
// 调用 jquery.js 模块提供的方法
$('#header').hide();
});
require.js 和 sea.js 都是在执行模块前预加载了依赖的模块。require.js加载时执行，而 sea.js 是使用时执行。
懒加载
网页性能优化，按需使用（下滑到一定程度再更新数据）
UMD
概念
UMD (Universal Module Definition)
实现
TS 导包
- 三种 CommonJS（CJS） 和 AMD：运行时确定这些东西。
require语法 - ES Modules（ESM） ：静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
import/export语法
从 CJS 改成 ESM 操作
如果在 @type 里有 （npm i --save-dev @types/XXX 不会报 404 错误 ）
- tsconfig.json : "module" : "CommonJS” 改为"module": "ES6",
- 修改导包语法
就跟报错看到的最后两行一样，改成那样
SyntaxError: The requested module 'rrule' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'rrule';
const { RRule } = pkg;
如果没有，在 src 下面新建一个 XXXX.d.ts
declare module XXXX {
// typing module default export as any will allow you to access its members without compiler warning
var YYYY : any;
export default YYYY ;
}
扩展链接: Modules .d.ts
参考链接：Import/Require nodejs modules without @types in Typescript in 2018
参考链接：The requested module 'XXX' is expected to be of type CommonJS
自建 ESM 操作
声明 .mjs 后缀的文件或在 package.json 里指定 type 为 module ( 这样使用commonJS的话就需要把commonJS的后缀改为cjs) 两种方式
ES Modules 使用入门讲解
导出操作 默认导出是对象，普通导出是固定语法固定搭配
从 CJS 改成 ESM遇到的报错
'ERR_MODULE_NOT_FOUND' Cannot find module XXX export class
本来是一个类，导成函数了
(node:33552) ExperimentalWarning: The ESM module loader is experimental.
Node 版本低于 V13.2 并且使用 ESM 导包方法，就会有这个 warning
获取 SyntaxError：请求的模块“rrule”应为 CommonJS 类型
风格问题
为什么 CommonJS 和 ES Module 不能共存
改造 ESM 失败 ，package.json