ts学习笔记

ts介绍及安装

Typescript是由微软开发的开源，跨平台的编程语言。- 它是javascript的超集，主要提供了类型系统和对ES6+的支持，最终也会被编译成javascript。
它主要为大型应用的开发设计的，并且最终会编译成javascript。
它对javascript语法进行了扩展，所有原来的JavaScript程序都可以运行在typescript的环境中。

ts的特点：

始于javascript，又归于js
强大的类型系统
先进的javascript：TypeScript 提供最新的和不断发展的 JavaScript 特性

安装ts命令：

npm install typescript -g

检查ts是否安装成功命令(查看ts版本)：

tsc -v

手动编译ts

// 01.第一个ts.ts
(() => {
   
    function sayHi(str: string) {
   
        return `hello ${
     str}`;
    }
    let str = 'lily';
    console.log(sayHi(str));
})();

该文件需要通过tsc 01.第一个ts.ts命令编译成对应的01.第一个ts.js文件，然后可以在index.html文件中引入查看执行结果。

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./01.第一次的ts.js"></script>
</body>
</html>

注意：

直接在html文件中引入ts代码会报错，需要使用tsc ts文件名命令编译ts为js，然后引入编译后的js文件。
ts文件中的函数中的形参如果使用了某个类型进行修饰，那么最终在编译的js文件中是没有这个类型的。
在ts中使用let声明变量，但是编译成js后会用var来声明变量。

vscode自动编译ts

首先在vscode的终端中执行tsc --init命令,此时会生成一个tsconfig.json文件
打开该文件可以修改其中的配置，比如

// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
"outDir": "./js",                                   /* 最终编译的js文件自动放到js文件夹中 */

// "strict": true,                                      /* Enable all strict type-checking options. */
"strict": false,                                      /* 不使用严格模式 */

启动vscode中的监视任务：终端–》运行任务–》显示所有任务–》tsc:监视-*******/config.json

通过上述操作就能在vscode中自动将ts文件编译成js文件。

类型注解

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式。TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

(() => {
   
    function showMsg(str: string) {
   
        return `hello ${
     str}`;
    }
    let msg = [1, 2, 3];
    // let msg = 'lily';
    console.log(showMsg(msg));
})();
// 此时将函数 参数msg变为数组时编译ts文件会报错，但是依然编译成了js文件，但是可能会出现一些无法预期的错误
01_Typescript/02.ts在vscode中自动编译/01.类型注解.ts:8:25 - error TS2345: Argument of type 'number[]' is not assignable to 
parameter of type 'string'.

8     console.log(showMsg(msg));
                          ~~~

[上午9:37:41] Found 1 error. Watching for file changes.

ts中的类

// 下面这个例子只是将上面例子中的函数参数由对象换成了类的实例
(() => {
   
    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 = `${
     firstName} ${
     lastName}`;
        }
    }
    function showFullName (person: IPerson) {
   
        return `${
     person.firstName}_${
     person.lastName}`;
    }
    let person = new Person('欧阳', '夏丹');
    console.log(showFullName(person));
})();

webpack打包ts

在指定的文件夹下执行npm init -y命令来初始化当前文件夹下的package.json文件。
下载相关依赖：
- npm install --save typescript
- npm install --save [email protected] [email protected] [email protected]
- npm install --save [email protected] clean-webpack-plugin
- npm install --save [email protected] cross-env
创建入口文件src/main.js
创建打包后的html模板public/index.html
配置build/webpack.config.js文件

// clean-webpack-plugin这个插件会在打包前删除原来打包的文件
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
// html-webpack-plugin这个插件会帮助我们在 webpack 打包结束后，自动生成一个 html 文件，并把打包产生文件引入到这个 html 文件中去。
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' // 指定以这个目录下的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
  },
}

配置webpack打包命令在package.json文件中

"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"

基础类型

(() => {
   
    // 布尔类型
    let flag: boolean;
    flag = true;
    console.log(flag);

    // 数字类型
    let n1: number = 1; // 十进制
    let n2: number = 0b01; // 以0b开头是二进制
    let n3: number = 0o12; // 以0o开头是八进制
    let n4: number = 0xa; // 以0x开头是十六进制
    console.log(n1, n2, n3, n4);

    // 字符串类型
    let str1: string = '床前明月光';
    let str2: string = '疑是地上霜';
    console.log(`${
     str1},${
     str2