Typescript 从入门到放弃系列(一)-环境配置和搭建一.什么是Typescript Typescript更像后端

一.什么是Typescript

TypeScript是Javascript的超集，遵循最新的ES5/ES6规范。Typescript扩展了Javascript语法。

Typescript更像后端JAVA,让JS可以开发大型企业应用
TS提供的类型系统可以帮助我们在写代码时提供丰富的语法提示
在编写代码时会对代码进行类型检查从而避免很多线上错误

TypeScript不会取代JS, 尤雨溪： 我认为将类型添加到JS本身是一个漫长的过程。让委员会设计一个类型系统是（根据TC39的经历来判断）不切实际的。

二.环境配置

1.全局编译TS文件

全局安装typescript对TS进行编译

npm install typescript -g
tsc --init # 生成tsconfig.json

tsc # 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件

2.配置`webpack`环境

安装依赖

npm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D

初始化TS配置文件

npx tsc --init

注意⚠️：将ts配置文件tsconfig.json中修改 "module": "ES2015",

webpack配置操作

// rollup.config.js
import ts from 'rollup-plugin-typescript2'
import {nodeResolve} from '@rollup/plugin-node-resolve';
import serve from 'rollup-plugin-serve';
import path from 'path'
export default {
    input:'src/index.ts',
    output:{
        format:'iife',
        file:path.resolve('dist/bundle.js'), 
        sourcemap:true
    },
    plugins:[
        nodeResolve({
            extensions:['.js','.ts']
        }),
        ts({
            tsconfig:path.resolve(__dirname,'tsconfig.json')
        }),
        serve({
            open:true,
            openPage:'/public/index.html',
            port:3000,
            contentBase:''
        })
    ]
}

src/index.ts

const hello: string = "hello world";
console.log(hello);
console.log("lalal123");

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深度学习Typescript</title>
</head>
<body>
    <div id="app"></div>
    <script src="../dist/bundle.js"></script>
</body>
</html>

package.json配置

"scripts": {
      "dev": "rollup -c -w"
}

我们可以通过npm run dev启动服务来使用typescript啦~

Typescript 从入门到放弃系列(一)-环境配置和搭建

一.什么是Typescript

二.环境配置

1.全局编译TS文件

2.配置webpack环境

2.配置`webpack`环境