Scribd
Upload
161 views

《TypeScript开发实战》课件

TypeScript is a superset of JavaScript that adds static typing and class-based object-oriented programming to the language. It allows developers to convert JavaScript code into TypeScript code with static type checking and error prevention. TypeScript code can be compiled to plain JavaScript code that runs in any browser or Node.js environment. TypeScript supports the latest ECMAScript features and helps catch errors early in development. Many popular IDEs have built-in TypeScript support to provide features like auto-completion and refactoring tools. TypeScript has gained popularity due to its ability to reduce bugs and improve developer productivity when building large JavaScript applications.

Uploaded by

Wang Wendy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
161 views

《TypeScript开发实战》课件

TypeScript is a superset of JavaScript that adds static typing and class-based object-oriented programming to the language. It allows developers to convert JavaScript code into TypeScript code with static type checking and error prevention. TypeScript code can be compiled to plain JavaScript code that runs in any browser or Node.js environment. TypeScript supports the latest ECMAScript features and helps catch errors early in development. Many popular IDEs have built-in TypeScript support to provide features like auto-completion and refactoring tools. TypeScript has gained popularity due to its ability to reduce bugs and improve developer productivity when building large JavaScript applications.

Uploaded by

Wang Wendy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 74

JavaScript

ES

TypeScript
TypeScript JavaScript

JavaScript

•
TypeScript

• IDE

•
TypeScript

JavaScript
TypeScript

TypeScript
ES6 TypeScript

TypeScript
•

•
—— Liskov, Zilles 1974
JavaScript C++
JavaScript C++

a b a b class C

a b a b C
x 1 x 3 1 3 x
y 2 y 4 2 4 y +4
__proto__ __proto__

• •
• •
• •
Bug

• V8
•
•
C/C++
Python Java C#

C C++

JavaScript

PHP
TypeScript
• Boolean • Boolean • void
• Number • Number • any
• String • String • never
• Array • Array •
• Function • Function •
• Object • Object •
• Symbol • Symbol
• undefined • undefined
• null • null
( / ): type
1
2
13 x-xxxx-xxxx

18 x-xxxx-xxxx
extends extends
implements
public

interface class

extends
public, private, protected)
any
1

3
•
•
•
•
•
•
AMD | System | ES2015

/root/src/moduleA.ts /root/src/moduleA.ts
import { b } from "./moduleB" import { b } from "moduleB"
1. /root/src/moduleB.ts 1. /root/src/node_modules/moduleB.ts
2. /root/src/moduleB.d.ts 2. /root/src/node_modules/moduleB.d.ts

3. /root/node_modules/moduleB.ts
4. /root/node_modules/moduleB.d.ts

5. /node_modules/moduleB.ts
6. /node_modules/moduleB.d.ts
/root/src/moduleA.ts /root/src/moduleA.ts
import { b } from "./moduleB" import { b } from "moduleB"
1. /root/src/moduleB.ts 1. /root/src/node_modules/moduleB.ts
2. /root/src/node_modules/moduleB.tsx
2. /root/src/moduleB.tsx 3. /root/src/node_modules/moduleB.d.ts
3. /root/src/moduleB.d.ts 4. /root/src/node_modules/moduleB/package.json ("types" )
4. /root/src/moduleB/package.json ("types" ) 5. /root/src/node_modules/moduleB/index.ts
5. /root/src/moduleB/index.ts 6. /root/src/node_modules/moduleB/index.tsx
7. /root/src/node_modules/moduleB/index.d.ts
6. /root/src/moduleB/index.tsx
7. /root/src/moduleB/index.d.ts 8. /root/node_modules/moduleB.ts
9. /root/node_modules/moduleB.tsx
10. /root/node_modules/moduleB.d.ts
11. /root/node_modules/moduleB/package.json ("types" )
12. /root/node_modules/moduleB/index.ts
13. /root/node_modules/moduleB/index.tsx
14. /root/node_modules/moduleB/index.d.ts

15. /node_modules/moduleB.ts
16. /node_modules/moduleB.tsx
17. /node_modules/moduleB.d.ts
18. /node_modules/moduleB/package.json ("types" )
19. /node_modules/moduleB/index.ts
20. /node_modules/moduleB/index.tsx
21. /node_modules/moduleB/index.d.ts
loader transpileOnly transpileOnly +

ts-loader 1600+ 500+ 3000+

awesome-typescript-loader 2200+ 1600+ 1600+


TypeScript Babel

TSC ts(x) js(x) → es3/5/6/...

Babel ts(x) js(x) → es3/5/6/...


TS → tsc(ts-loader/awesome-typescript-loader) → JS → Babel → JS

TS → Babel → JS

tsc(type checking)
TypeScript ESLint
1. TSLint

2. ESLint
ESLint
React Vue
TSLint
TypeScript ESLint

TypeScript ESLint
TSLint

TypeScript
AST JS

typescript-eslint
Code ESTree

AST
ESLint

ESLint
…
• babel-eslint TypeScript TypeScript

• typescript-eslint TypeScript AST tsconfig.json

Babel babel-eslint typescript-eslint


ts-loader

@babel/preset-typescript

eslint + typescript-eslint

babel-eslint

ts-jest

babel-jest
class

Mixin

HOC props

class Hooks
Hooks React
•
•
•
•

•
•

•
•
1. TypeScript

2. TypeScript ROI
> >

Google Trends
> >

NPM Trends
> >

GitHub
> >

2016 2017 2018

Stackoverflow
TypeScript ……

• JavaScript

• TypeScript -> -> ES


ROI
1. J
2.
3.
4.
……

1.
2.
3.
4.
Time
……

You might also like