项目实战 TS
通用技巧
-
新手先 any 再填坑，老手先定义数据结构写逻辑
-
遇到新场景，没把握快速，先用 any 再填坑，填坑的过程也是 TS 技能满满提升的过程。
-
TS 发现潜在问题
1）复杂逻辑，JS 一口气写完，调试没找到毛病，加上 TS 可以找到。
2）提测质量，提测前建议 review 一下，为避免枯燥可以完善下 TS 的使用。
- 提前定义好 TS，优势明显，有智能提示。
实用技巧
[1]公共数据结构，不想在每个文件中引来引去
- 编辑 tsconfig.json 的 include 字段，引入该 ts 文件。
[2]声明语句，声明全局对象，扩展全局对象 windows 的类型，以添加一个名为 add 的方法，接受两个数字类型的参数，返回一个数字类型的结果。
优点：
-
这种声明帮助 TS 开发中进行类型检查，确保你在调用 window.add 方法时传递正确类型的参数，并且能够正确处理返回值。
-
开发一些需要扩展全局对象功能的情况下，特别有用，
缺点：
- 但需要小心确保不会与现有的全局变量或方法发生冲突。
注意：
- 不会进行类型检查，而且 TypeScript 编译器也不会对此进行警告或错误提示。
这就提现了 TS 的优势：
-
在 TS 中使用 window.add 时，编译器会进行类型检查，确保你传递正确类型的参数，并能正确处理返回值。
-
JS 是动态类型语言，不会进行静态类型检查；因此，虽然可以在 JS 中给 window 对象添加新的属性或方法，但是编译器不会对这些扩展进行类型检查，需要自行确保。
-
通过 TS 的类型声明，可以获得更严格的类型检查，而 JS 则更灵活但不会进行类型检查。
代码
// 利用 interface 重复声明 扩展 window，该文件需要配置到 tsconfig.json 中的 includes 字段
declare interface Window {
add(a: number, b: number): number;
}
// 声明全局变量
declare const wx: any;
// 全局扩展
export class Observable<T> {
// ... still no implementation ...
}
declare global {
interface Array<T> {
toObservable(): Observable<T>;
}
}
// 使用
[].toObservable();
我的实践
tsconfig.json
{
"include": ["xxx1", "xxx2", "src/test.ts"],
}
src/test.ts
declare interface Window {
add(a: number, b: number): number;
}
使用：
test.vue
<template> </template>
<script>
const calculate = () => {
// 使用 inject 访问全局的 window 对象
window.add = (a, b) => a + b;
if (window) {
console.log(window.add(3, 4)); // 调用全局的 add 方法，输出: 7
}
};
</script>
