This document discusses TypeScript, including: - An example of using TypeScript with classes, interfaces, and type checking - How TypeScript adds types to JavaScript and catches errors - Tools for using TypeScript like Visual Studio Code and Webpack for bundling TypeScript code

1. TypeScript
- -
CASAREAL,Inc.

2. ➤
➤
➤
➤

5. ➤
➤
➤
➤
➤

6. ➤
➤
➤
➤
➤
➤

7. JavaScript

9. TS

10. TypeScript Demo
script.ts
import Item from ‘./item';
var elem = document.getElementById('output');
var aBook = new Item(' TypeScript',1980);
aBook.say(elem);
item.ts
class Item {
constructor(private name:string, private price:number){}
public say(elem:HTMLElement) : void {
elem.innerHTML = ` :${this.name} :${this.price} `;
}
}
export default Item;

11. TypeScript
➤
➤
➤
➤
➤
➤
➤
➤

12. ➤
➤
➤
➤
➤
➤
➤
➤
TypeScript

13. TypeScript - -
let c_name:string = ' ';
c_name = 3456;
Type '3456' is not assignable to type 'string'.

14. TypeScript - -

15. TypeScript - -

16. TypeScript - -
➤
➤
➤
➤
➤
➤

17. TypeScript - -

18. TypeScript - -
Scala Swift Kotlin ?!

19. TypeScript - & -

20. TypeScript - -
➤
➤
TypeScript

22. ➤
➤

23. ➤
➤
➤

24. Visual Studio Code
➤
➤
➤
➤
➤
➤

25. ➤
➤
➤
➤
➤
npm install typescript -g

26. ➤
➤
➤
tsc sample.ts

27. ➤
➤
npm install typescript ts-loader
webpack webpack-cli
webpack-dev-server
—save-dev
typescript TypeScript
ts-loader TypeScript Webpack TypeScript
webpack JavaScript
webpack-cli Webpack Webpack 4.0
webpack-dev-
server
Webpack Web

28. Webpack
const path = require('path');
module.exports = {
//
//
entry: {
bundle: './src/app.ts'
},
output: {
//
// "__dirname" node.js
path: path.join(__dirname,'dist'),
filename: '[name].js'
},
//
// import Foo from './foo'
// "foo.ts" .
// [".js", ".json"]
resolve: {
extensions:['.ts','.js']
},
devServer: {
contentBase: path.join(__dirname,'dist') // webpack-dev-server
},
//
module: {
rules: [
{
// .ts TypeScript
test:/.ts$/,loader:'ts-loader'
}
]
}
}

29. ➤
➤
➤

30. TypeScript
➤
➤
➤
➤