TypeScript项目中的JavaScript文件类型检查指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01160/article/details/148464725

TypeScript项目中的JavaScript文件类型检查指南

TypeScript TypeScript 使用手册（中文版）翻译。http://www.typescriptlang.org 项目地址: https://gitcode.com/gh_mirrors/typ/TypeScript

TypeScript作为JavaScript的超集，不仅支持.ts文件，还提供了对.js文件的类型检查能力。本文将深入探讨如何在TypeScript项目中充分利用这一特性，提升JavaScript代码的类型安全性。

启用JavaScript文件类型检查

从TypeScript 2.3版本开始，开发者可以通过--checkJs编译器选项为.js文件启用类型检查功能。这一特性为大型项目中逐步迁移到TypeScript提供了平滑过渡的可能。

控制检查范围

在实际项目中，我们通常需要灵活控制类型检查的范围：

全局启用：在tsconfig.json中设置"checkJs": true，对所有.js文件进行类型检查
局部禁用：在特定.js文件顶部添加// @ts-nocheck注释，跳过该文件检查
选择性启用：在未全局启用checkJs时，可在单个.js文件顶部添加// @ts-check注释，仅检查该文件

类型推断机制

TypeScript对.js文件的类型检查采用了特殊的推断规则，与.ts文件有所不同，开发者需要了解这些差异以避免意外情况。

基于赋值的类型推断

对于未明确指定类型的变量，TypeScript会根据赋值操作推断类型：

let x = 1;     // 推断为number类型
x = "string";  // 报错：不能将string赋值给number

类属性推断

在ES2015类中，属性类型根据构造函数或方法中的赋值来推断：

class Example {
  constructor() {
    this.count = 0;  // 推断为number类型
  }
  
  update() {
    this.count = "zero";  // 报错：类型不匹配
  }
}

函数参数处理

.js文件中的函数参数默认被视为可选参数，这与.ts文件的行为不同：

function greet(name) {
  console.log(`Hello, ${name || 'stranger'}`);
}

greet();       // 允许
greet("Alice");
greet("Bob", "extra");  // 报错：参数过多

JSDoc注解的强大功能

JSDoc注释是.js文件中添加类型信息的主要方式，TypeScript支持丰富的JSDoc标签。

基本类型标注

/** @type {number} */
let age;

/** @type {string[]} */
let names;

复杂类型定义

/**
 * @typedef {Object} User
 * @property {string} name
 * @property {number} [age]  // 可选属性
 */

/** @type {User} */
const currentUser = { name: "Alice" };

函数类型标注

/**
 * 计算两个数的和
 * @param {number} a 第一个加数
 * @param {number} b 第二个加数
 * @returns {number} 两数之和
 */
function add(a, b) {
  return a + b;
}

常见场景处理

处理CommonJS模块

TypeScript能自动识别CommonJS模块语法：

const fs = require('fs');  // 识别为模块导入

module.exports = {
  readFile: function(path) {
    return fs.readFileSync(path);
  }
};

泛型支持

通过@template标签可以在.js文件中使用泛型：

/**
 * @template T
 * @param {T} value
 * @returns {T}
 */
function identity(value) {
  return value;
}

React组件处理

对于React组件，可以明确指定props和state类型：

/**
 * @typedef {Object} Props
 * @property {string} name
 */

/**
 * @extends {React.Component<Props>}
 */
class Greeting extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}