javascript - Har TypeScript och ESLint överlappande syften?

Jag läste typescript-eslint-dokumentationen och jag stötte på denna sektion:

TypeScript och ESLint har liknande syften
Det betyder att det kommer att finnas fall där TypeScript faktiskt löser ett problem för oss som vi tidigare förlitade oss på ESLint för.

Med deras definition i åtanke är det ena ett statiskt typat språk och det andra ett verktyg som analyserar kod och sätter in vissa påståenden för att säkerställa att vissa regler och mönster följs, vilket är helt olika saker. Jag ville veta vilka exempel som kan ges för delen ”löser ett problem åt oss som vi tidigare förlitade oss på ESLint för”. Har dessa två saker något gemensamt? Vilka är deras liknande syften?

Svar #1

Eftersom JavaScript är ett dynamiskt typat språk, kan programmerare lättare introducera subtila buggar och fel som misslyckas vid körning jämfört med statiska språk med en kompilator som upptäcker vanliga problem.

Ta följande kod som exempel:

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()

Den här koden kommer att misslyckas vid körning och har också några andra problem som kan leda till oförväntade resultat.

Linters som ESLint upptäcker några av dessa problem med regler som no-undef och 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

På samma sätt kommer TypeScripts kompilator också att varna dig för många av dessa problem:

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.

I den här meningen har ESLint och TypeScript samma mål: att förebygga sannolika programmeringsfel genom att varna dig i förväg. För dessa problem kan du stänga av respektive ESLint-regler och istället använda TypeScript-kompilatorn.

Det mest viktiga med TypeScript är dock dess tillägg av statiska typer till JavaScript. Genom att lägga till typannoteringar till addOne:

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

TS berättar för oss att Funktionen saknar ett avslutande return-uttryck och returtypen inkluderar inte 'undefined'. eftersom funktionen kommer att returnera undefined istället för ett nummer om n är ett negativt tal. Resultatet av addOne(-3) * 2 skulle bli NaN, istället för -4 som förväntat.

Ett annat exempel, som ESLint skulle ha fullständigt okej med men som misslyckas vid körning:

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

Detta är några av de många problem som TypeScript kan hjälpa till att identifiera på grund av dess typsystem.

Å andra sidan kan linters, inklusive ESLint och typescript-eslint-plugin, upprätthålla bästa praxis såsom att använda strikt likhetsoperatorer och korrekt hantera promises. De kan också upprätthålla stilistiska konventioner såsom indentering, krav på eller förbud mot semikolon, eller konsekventa stiltyper av typförklaring.

TypeScript och ESLint har liknande mål att förebygga programmeringsfel och misstag. Men på grund av sitt typeringssystem kan TypeScript upptäcka fler kör- och programmeringsfel, medan ESLint kan upprätthålla stilkonventioner och bästa praxis.

Relaterade artiklar