时间戳

首页 > 解决方案 > TypeScript 和 typescript-eslint 有重叠的目的吗？

javascript - TypeScript 和 typescript-eslint 有重叠的目的吗？

问题描述

我正在阅读typescript-eslint文档，然后进入本节：

TypeScript 和 ESLint 具有相似的目的
，这意味着在某些情况下，TypeScript 会真正为我们解决我们以前依赖 ESLint 解决的问题。

考虑到它们的定义，一种是静态类型语言，另一种是解析代码并放置一些断言以确保考虑一些规则和模式的工具，这是完全不同的东西。我想知道这部分可以举出哪些例子solves a problem for us that we previously relied on ESLint for。这两件事有什么共同点吗？它们的相似目的是什么？

标签： javascripttypescript

解决方案

由于 JavaScript 是一种动态类型语言，因此与使用能够解决常见问题的编译器的静态语言相比，程序员可以更容易地引入在运行时失败的细微错误和错误。

以下面的代码为例：

console.log(someUndefinedVariable)

const constant = 0
constant = 3

const addOne = n => {
  if (typeof n !== 'nubmer') {
    throw new Error('n must be an number')
    console.log('This will never be executed')
  }
  if (n < 0) console.log('negative number')
  else return n + 1
}
console.log(addOne(-3) * 2)

const symbol = new Symbol()

此代码将在运行时失败，并且还有一些可能导致意外结果的其他问题。

诸如 ESLint 之类的 Linter通过诸如 no-undef 和 no const-assign 之类的规则来解决其中的一些问题：

 1:13  error  'someUndefinedVariable' is not defined      no-undef
 4:1   error  'constant' is constant                      no-const-assign
 7:20  error  Invalid typeof comparison value             valid-typeof
 9:3   error  Unreachable code                            no-unreachable
16:20  error  `Symbol` cannot be called as a constructor  no-new-symbol

同样，TypeScript 的编译器也会警告你这些问题：

Cannot find name 'someUndefinedVariable'.

Cannot assign to 'constant' because it is a constant.

This condition will always return 'true' since the types
'"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"'
and '"nubmer"' have no overlap.

Unreachable code detected.

'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.

从这个意义上说，ESLint 和 TypeScript 具有相同的目标：通过事先警告来防止可能的程序员错误。对于这些问题，您可以关闭相应的 ESLint 规则并改用 TypeScript 编译器。

然而，TypeScript 最重要的特性是它为 JavaScript 添加了静态类型。通过将类型注释添加到addOne：

const addOne = (n: number): number => { /* ... */ }

TS 告诉我们，因为如果是负数Function lacks ending return statement and return type does not include 'undefined'.，函数将返回而不是数字。的结果将是，而不是像预期的那样。undefinednaddOne(-3) * 2NaN-4

另一个例子，ESLint 完全可以使用但在运行时失败：

const foo = 0
const bar = foo()
//          ~~~
// This expression is not callable.
//   Type 'Number' has no call signatures.

这些是 TypeScript 由于其类型系统而可以帮助识别的众多问题中的一部分。

另一方面，包括 ESLint 和 typescript-eslint 插件在内的 linter 可以强制执行最佳实践，例如使用严格的相等运算符和正确处理 promise。它们还可以强制执行样式约定，例如缩进、要求或禁止分号或一致的类型断言样式。

TypeScript 和 ESLint 具有相似的目标，即防止程序员出现错误和错误。然而，由于其类型系统，TypeScript 可以处理更多的运行时和编程错误，而 ESLint 可以强制执行风格约定和最佳实践。

推荐阅读