TypeScript基础

01.全局安装ts

• npm i -g typescript
• 检查版本tsc -V

02.引入ts代码

• 编写ts代码

(()=>{
    function sayHi(str:string){
        return '你好'+str
    }
    let text='haha'
    console.log(sayHi(text))
})()

• 在html中引入

<script src="./第一个ts代码.ts"></script>

• 运行到浏览器
  Uncaught SyntaxError: Unexpected token ':'

报错原因：ts代码不能直接运行到浏览器，要编译成js代码才能运行

03.vscode编译ts代码

• 终端中运行命令
  tsc ts文件路径.ts
• 执行命令后会生成js文件

(function () {
    function sayHi(str) {
        return '你好' + str;
    }
    var text = 'haha';
    console.log(sayHi(text));
})();

• html加载编译后的js文件

<script src="./index.js"></script>

• 运行到浏览器
  

04.vscode自动将ts代码编译为js代码

• 生成配置文件tsconfig.json
  tsc --init
• 修改tsconfig.json配置

/*
"outDir": "./",  //输出js路径
"strict": false    //严格模式
*/ 
"outDir": "./js",  //输出js路径
"strict": true    //严格模式

• 启动监视任务:
  终端 -> 运行任务 -> 监视tsconfig.json
• 编写ts代码vscode就会自动编译为js
  

05.接口

接口：一种能力，一种约束

(()=>{
	//定义接口
    interface IPerson{
        firstName:string,
        lastName:string
    }
    function showFullName(person:IPerson){
        return person.firstName+'-'+person.lastName
    }
    const person={
        firstName:'姓',
        lastName:'名'
    }
    console.log(showFullName(person))
})()

接口规定了必须要有一个字符串类型的firstName和lastName
如果接口定义了相应的规则，传参的时候没有相应的属性就会报错(但js会正常编译，值为undefined)

06.webpack打包ts

• 新建pubilc目录，再新建index.html文件
• 新建src目录，再新建main.ts文件
  main.ts:document.write('哈哈')
• 新建build目录，新建webpack.config.js文件
  webpack.config.js

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

function resolve (dir) {
  return path.resolve(__dirname, '..', dir)
}

module.exports = {
    //开发模式/生产模式
  mode: isProd ? 'production' : 'development',
  //主入口目录
  entry: {
    app: './src/main.ts'
  },
  //打包后输出目录
  output: {
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js'//命名方式
  },

  module: {
    rules: [
        //针对src目录里的ts或者tsx文件编译处理
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')]
      }
    ]
  },
  plugins: [
      //把之前打包的js目录清掉
    new CleanWebpackPlugin({
    }),

    //针对当前pubilc里的index.html打包
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  //引入文件扩展名处理
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },

  //错误代码提示信息
  devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

  //服务配置，主域名localhost,端口8081,在浏览器自动打开
  devServer: {
    host: 'localhost', // 主机名
    stats: 'errors-only', // 打包日志输出输出错误信息
    port: 8081,
    open: true
  },
}

• 运行命令npm init -y，生产package.json
• 下载对应依赖(指定版本)

"devDependencies": {
  "clean-webpack-plugin": "^3.0.0",
  "cross-env": "^7.0.2",
  "html-webpack-plugin": "^4.5.0",
  "ts-loader": "^8.0.11",
  "typescript": "^4.0.5",
  "webpack": "^4.41.5",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.10.2"
}

• 配置命令

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
  "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
}

• 运行npm run dev
  
• 运行npm run build