当前位置：首页 > news >正文

typescript开发心得

news 来源：原创 2025/6/20 9:26:55

语法知识点

回调地狱问题

用await，或者有些库提供了sync方法

yield

用法跟python的一样。

yield只能用于生成器里，生成器是function*，例如：

export function* filter(rootNode: ts.Node, acceptedKind: ts.SyntaxKind) {
    for (const iterObj of walkTree(rootNode)) {
        if (iterObj[1].kind == acceptedKind) {
            yield iterObj;
        }
    }
}

字符串插值

ts没有format函数，用``插值，样例如下：

let s = "aaa";

// 字符串插值
console.log(`i love ${s.length}`);

写文件

流式写：

function printAst(rootNode: ts.Node, outputFile: string) {
    const wstream = fs.createWriteStream(outputFile);
    try {
        for (...) {
            ...
            wstream.write(`${new Array(path.length + 1).join('----')} ${syntaxKindToName(node.kind)} ${node.pos} ${node.end}\n`);
        }
        wstream.end();
    } finally {
        wstream.close();
    }
}

一次性写就用fs.writeFile

as

类型断言，类似java里的downcast，例如：

let node = iterObj[1] as ts.StringLiteral;
console.log(node.pos, node.text)

package.json

scripts字段含义

"scripts": {
    "build": "tsc",
    "test": "jest"
  },

用npm run执行scripts里的命令：

npm run build
npm run test

顺带说一下，要支持typescript和jest，要在package.json里配置：

"devDependencies": {
    "@types/node": "^22.14.0",
    "typescript": "^5.5.3",
    "@types/jest": "^29.5.14",    
    "jest": "^29.7.0",
    "ts-jest": "^29.3.1"
  },

UT

使用jest。

默认情况下jest只识别js文件，需要对ts进行转译让jest识别。否则报错：

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

配置jest.config.js如下：

module.exports = {
    // 预设库
    preset: 'ts-jest',
    // jest模拟的环境，可以选择node、jsdom来模拟node和浏览器环境
    testEnvironment: 'node',
    // 待测试的文件路径
    testMatch: ['<rootDir>/tests/**/*.test.ts'],
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
    // 转义插件,方便jest理解代码
    transform: {
        '^.+\\.ts$': 'ts-jest',
    },
    // 不进行匹配的目录
    transformIgnorePatterns: ['<rootDir>/node_modules/'],
    // 处理 webpack 的别名，比如：将 @ 表示 根目录
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/$1',
    },
};

要支持typescript下的UT，需在package.json里配置jest和ts-jest：

"devDependencies": {
    ...
    "@types/jest": "^29.5.14",    
    "jest": "^29.7.0",
    "ts-jest": "^29.3.1"
  },

日志打印

使用winston：

export const LOGGER = winston.createLogger({
    level: 'info',
    format: winston.format.combine(
        winston.format.timestamp({format: 'YYYY-MM-DD HH:mm:ss'}),
        winston.format.printf(({timestamp, level, message}) => {
            return `${timestamp} [${level}]: ${message}`;
        })
    ),
    transports: [
        new winston.transports.File({filename: 'website_checker.log', options: {flags: 'w'}})
    ]
});

使用combine format，打印时间戳、级别及信息。options: {flags: ‘w’}表示每次覆盖日志文件，默认是追加。

类

类的写法跟java很像，几乎不用额外学习。例子：

class StaticChecker {
    private rootDir: string;

    constructor(rootDir: string) {
        this.rootDir = rootDir;
    }

    public execute() {
        ...
    }

    ...
}

const checker = new StaticChecker("proj_path");
checker.execute();

正式代码里支持@符号

在tsconfig.json里配置paths选项：

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "dist",
    // 支持import时的@符号
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "src"
  ]
}