TypeScript是一种由微软开发的开源，跨平台的编程语言，它是JavaScript的超集。最终被编译为JavaScript代码。

特点

1.始于JavaScript，归于JavaScript
2.类型系统允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。
3.先进的JavaScript

浏览器不认ts语法，ts文件如果只含js语法，浏览器可以识别

ts文件中的函数的形参，如果使用了某个类型进行修饰，那么最终在编译的js文件中是没有这个类型的
ts文件中的变量用let,编译的js文件用var
ts在vscode自动编译
新建文件，在集成终端打开它，输入tsc –init,自动生成tsconfig.json文件
更改tsconfig.json的配置，outDir//输出目录。strict//严格模式：false
启动监视任务，终端–》任务运行–》显示所有任务

类型注解 ：是一种轻量级的为函数或者变量添加的约束

接口

是一种能力，一种约束而已

(()=>{
    interface IPerson {
        firstName: string //姓氏  
        lastName: string //名字
    }  
    // 输出姓名  
    function showFullName(person: IPerson){
        return person.firstName + '_' + person.lastName
    }  
    //定义的一个对象
    const person = {
        firstName: "东方",
        lastName: "不败"
    }
    console.log(showFullName(person))
})()

函数

(()=>{
    interface IPerson {
        firstName: string //姓氏  
        lastName: string //名字 
    }  
    //定义一个类型  
    class Person {
        //定义公共的字段（属性）  
        firstName:string //姓氏 
        lastName:string //名字  
        fullName:string //姓名  
        //定义一个构造器函数 
        constructor (firstName:string,lastName:string){
            //更新属性数  
            this.firstName = firstName  
            this.lastName = lastName
            this.fullName = this.firstName + '_' +this.lastName
        }
    }  
    //定义一个函数  
    function showFullName(person:IPerson){
        return person.firstName+'_'+person.lastName
    }
    //实例化函数对象  
    const person = new Person('诸葛','孔明')  
    console.log(showFullName(person))
})()

webpack打包ts

建public/index.html和src/main.ts以及build/webpack.config.js
build/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: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')]
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin({
    }),

    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },

  devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

  devServer: {
    host: 'localhost', // 主机名
    stats: 'errors-only', // 打包日志输出输出错误信息
    port: 8081,
    open: true
  },}

终端打开根文件夹，输入npm init -y，会自动生成package.json。输入tsc –init,会自动生成tsconfig.json
下载依赖
1
2
3
4
5
6
yarn add -D typescript
yarn add -D webpack webpack-cli
yarn add -D webpack-dev-server
yarn add -D html-webpack-plugin clean-webpack-plugin
yarn add -D ts-loader
yarn add -D cross-env
终端依次输入npm install -D typescript npm install -D webpack@4.41.5webpack-cli@3.3.10 webpack-dev-server@3.10.2 npm install -D html-webpack-plugin clean-webpack-plugin ts-loader cross-env
配置打包目录package.json

1
2
3

 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

ts在vscode自动编译

接口

函数

webpack打包ts