TS学习笔记01-基础篇

最新推荐文章于 2024-03-27 14:04:44 发布

狗狗狗狗亮

最新推荐文章于 2024-03-27 14:04:44 发布

阅读量217

点赞数

分类专栏： TS

本文链接：https://blog.csdn.net/weixin_44046951/article/details/106942555

版权

TS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

强类型与弱类型

强类型语言：不允许改变变量的数据类型，除非进行强制类型转换。
弱类型语言：变量可以被赋予不同的数据类型。

动态类型与静态类型

静态类型语言：在编辑阶段确定所有变量的类型
动态类型语言：在执行阶段确定所有变量的类型

静态类型语言	动态类型语言
对类型极度严格	对类型非常宽松
立即发现错误	BUG可能隐藏很深
运行时性能号	运行时性能差
自文档化	可读性差

在这里插入图片描述

第一个ts程序

新建 first 文件夹终端中打开输入

npm init -y

自动创建好package.json后，全局安装typescript

 npm i  typescript -g

安装完成后，就可以使用tsc命令了。查看帮助：

 tsc -h

创建这些配置项，输入下面命令会自动创建一个tsconfig.json

tsc --init

接着新建一个src目录，目录下创建一个index.ts文件并写入

let str :string = 'hello world'

终端执行

 tsc ./src/index.ts

就会自动生成一个js文件，内容为‘var str = ‘hello world’;’
接下来根目录创建一个build文件夹，并创建4个文件如下图
在这里插入图片描述
具体内容如下：

base.config :

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.ts',
  output:{
      filename:'app.js'
  },
  resolve : {
    extensions : ['.js','.ts','.tsx']
  },
  module:{
    rules:[
      {
        test:/\.tsx?$/i,
        use:[{
          loader : 'ts-loader'
        }],
        exclude: /node_modules/
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/tpl/index.html'
    })
  ]
}

config.js

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')

module.exports = (env, argv) => {
    let config = argv.mode === 'development' ? devConfig : proConfig;
    return merge(baseConfig, config);
};

dev.config.js

module.exports = {
  devtool:'cheap-module-eval-source-map'
}

pro.config.js

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

module.exports = {
  plugins:[
    new CleanWebpackPlugin()
  ]
}

分别安装上面代码中需要的插件

 npm i webpack  webpack-cli  webpack-dev-server  -D
 npm i html-webpack-plugin -D
 npm i  ts-loader typescript -D
 npm i clean-webpack-plugin   -D
 npm i webpack-merge -D

src目录下创建一个tpl文件夹，下面创建一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>type Script</title>
</head>
<body>
    <div class="app"></div>
</body>
</html>

index.ts修改

let hello : string = "hello world"
document.querySelectorAll('.app')[0].innerHTML= hello

package.json中添加编译环境

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode=development --config ./build/webpack.config.js"
  },

src目录终端运行