上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

【翻译】以ES5/ES3为目标时,Typescript会转译什么

[复制链接]
  • TA的每日心情
    擦汗
    昨天 09:20
  • 签到天数: 192 天

    [LV.7]常住居民III

    687

    主题

    5428

    回帖

    6365

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6365

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-9-17 20:56:30 | 显示全部楼层 | 阅读模式

    今天写代码的时候突然发现
    即使设置target为ES5的时候replaceAll没有转移
    但是其他语法可以转移
    其中target为目标转译
    lib为ts文件的时候的推断dts文件
    图片.png
    写一个index.ts
    图片.png
    编译之后可以发现replaceAll没转译
    而其他语法进行转译了
    图片.png
    经过查阅发现了
    https://stackoverflow.com/questions/69118243/typescript-replaceall-not-transpiled-in-es5

    TypeScript will transpile modern JS syntax to ES5 but not do the polyfilling (runtime apis).
    
    TypeScript将转译现代js语法到ts5,但不会进行ployfill(运行时的api)

    找到了问题所在,只翻译语法,而不翻译api
    关于更具体的可以找到
    https://stackoverflow.com/questions/42564130/what-will-typescript-transpile-when-targeting-es5-es3

    以ES5/ES3为目标时,Typescript会转译什么

    提问

    I'm trying to understand when the Typescript compiler will transpile code to make it compatible with my specified target ECMAScript version (ES5 or ES3).
    我试图理解typescript编译将将转译代码兼容到我指定的ecam版本(es5/es3)

    For example, TSC will transpile for(var int of intArray) fine, but it doesn't transpile Number.isInteger() (which is an ES6 feature, according to w3schools).
    例如,ESC将很好的转译for(var int of intArray),但是他不能转译 Number.isInteger() ,而这是一个ES6特性,根据W3C的说法

    Number.isInteger() isn't supported in IE < 11.0, so this is a problem. Visual Studio (and VS Code) don't provide warnings of incompatibility, and it doesn't get transpiled.

    Number.isInteger() 在ie11下不支持,这是一个问题,Vscode不提供不兼容的警告以及没有进行转译操作

    What can I expect to get transpiled, and what won't? I initially expected that everything would be transpiled, so that I wouldn't have to keep track of things like this, but that doesn't seem to be the case.
    为什么我期待转译操作,而他没有执行,我最初期望所有的代码都将正确转译,这样我不需要研究这个问题。

    解答

    TypeScript transpiles but does not polyfill. So one way to think of it is that anything that is not valid syntax in your target will be transpiled to a valid syntax. For example, when using the class keyword with your target set to ES5, it will transpile this:
    TypeScript转译但是不会plyfill,一种想法是,他会将在目标浏览器无效的语法转为一个有效的语法,例如当你同时class关键字同时设置es5,他将进行转译
    class Greeter {
    }
    被处理为

    var Greeter = /** @class */ (function () {
        function Greeter() {
        }
        return Greeter;
    }());

    On the other hand, it does not add missing functionality, which you'll have to polyfill yourself. Number.isInteger() is valid ES5 syntax, it's just not functionality that exists in ES5. You can polyfill this yourself by importing babel-polyfill (which uses core-js under the hood) or using a service like polyfill.io.

    另一方面,他不会添加缺失的函数功能,你必须自己进行ployfill,Number.isInteger()是一个合法的ES5语法,他只是不在Es5的环境内,你可以通过自己导入playfill或使用ployfill.io等服务进行处理

    Note: don't confuse the lib option with polyfills. This does not polyfill features. It simply tells TypeScript to act as if features from those ES versions are present, so it will type check them appropriately. You still need to handle the polyfill piece yourself for browsers that you support. If you don't specify the appropriate libs, TypeScript will complain that it doesn't know what Number.isInteger() represents.

    提示,不要混淆lib选项与ployfill,这不能进行ployfill,他只是告诉TS就像那些ES特性实际存在一样,所以他会适当的进行类型检查,你依然需要处理ployfill部分对于你要支持的浏览器,如果你不明确指定适当的libs,TS会抱怨他不知道Number.isInteger()表达的是什么意思

    I'm not aware of a comprehensive list of which features TypeScript transpiles, but you can see a table for TypeScript+core-js polyfills here. More reading on polyfills vs transpilation here.
    我不知道TS转移特性的全部里列表,但是你可以在这里看TS+Core-js表格
    http://kangax.github.io/compat-table/es6/
    具有更多的ployfill和转移的内容

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表