Ts 学习记录

Myth丶恋晨 2022-10-13 01:56 198阅读 0赞

[https://blog.csdn.net/THcoding\_Cat/article/details/115421754][https_blog.csdn.net_THcoding_Cat_article_details_115421754]

[https://www.tslang.cn/docs/handbook/tsconfig-json.html][https_www.tslang.cn_docs_handbook_tsconfig-json.html]

[https://www.cnblogs.com/fangsmile/p/14239529.html][https_www.cnblogs.com_fangsmile_p_14239529.html]    tsconfig.json

[https://blog.csdn.net/u012987546/article/details/96482774][https_blog.csdn.net_u012987546_article_details_96482774] Webpack4 配置TS Loader

[https://blog.csdn.net/qq\_34979346/article/details/99840181][https_blog.csdn.net_qq_34979346_article_details_99840181] webpack4.0-解决webpack 报The 'mode' option has not been set, webpack will fallback to 'production' for this value.

[https://blog.csdn.net/qq\_43653522/article/details/115112986][https_blog.csdn.net_qq_43653522_article_details_115112986]

### 1.全局安装 ###

npm install -g typescript
    
    //单独安装
    npm install typescript  //推荐
    
    npm i ts-loader

![20210705213151797.png][]

# [在浏览器运行 TS][TS] #

![2f9555608cea7b87bcfe21d25f642a6d.png][]

![ec6cc33c5ea7d2d63a1b74dcf7f9695e.png][]

![e0e90299926a83c624dee9bcec5d9817.png][]

安装自动生成HTML的插件

1.先npm run build 执行打包命令 生成dist文件 
    2.npm run start 执行 浏览器 http://localhost:8080/ 查看页面实时更新 热更新
    3.先npm run build 最后打包
    npm i -D html-webpack-plugin
    
    引入在webpack.config.js里面
    //path下面
    const  HTMLWebpackPlugin = require('html-webpack-plugin');
    //再注册
    //module 下面写入
        plugins:[
           new HtmlWebpackPlugin({
                title:'自定义title',
                template:'./src/index.html',//自定义html模板
            }),
        ],
    
    //下载热更新插件
    npm i -D webpack-dev-server
    //配置 package.json
    
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode development",
        "build": "webpack --mode production",
        "start": "webpack serve" //这个
      },
    可以在控制台中输入指令：npm run build执行打包命令，npm run start执行 dev-server。
    
    //安装babel 把ts打包成兼容不同版本的IE的工具
     npm i -D @babel/core @babel/preset-env babel-loader core-js

//直接  开启所有的ts文件监视  必须要ts的配置文件
    tsc  //生成
    tsc -w //监视所有ts文件
    
    tsconfig.json 文件
    
    里面写个{} 就行了
    
    //实时监视index.ts文件  只能单个有弊端
    tsc --watch index.ts
    
    
    tsconfig.json
    {
      "compilerOptions": {
        "allowUnreachableCode": true, // 不报告执行不到的代码错误。
        "allowUnusedLabels": false,	// 不报告未使用的标签错误
        "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
        "baseUrl": ".", // 工作根目录
        "experimentalDecorators": true, // 启用实验性的ES装饰器
        "jsx": "react", //指定jsx代码用于的开发环境: 'preserve', 'react-native', or 'react'
        "sourceMap": true, // 是否生成map文件
        "module": "commonjs", //用来指定编译后的js要使用的模块标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        "noImplicitAny": false, // 是否默认禁用 any
        "removeComments": true, // 是否移除注释
        "types": [ //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
          "node", // 引入 node 的类型声明
        ],
        "paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
          "src": [ //指定后可以在文件之直接 import * from 'src';
            "./src"
          ],
        },
        //target用于指定编译后js文件里的语法应该遵循哪个JavaScript的版本的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
        "target": "ESNext", // 编译的目标是什么版本的
        "outDir": "./dist", // 输出目录
        "declaration": true, // 是否自动创建类型声明文件
        "declarationDir": "./lib", // 类型声明文件的输出目录
        "allowJs": true, // 允许编译javascript文件。
        "lib": [ // 编译过程中需要引入的库文件的列表
          "es5",
          "es2015",
          "es2016",
          "es2017",
          "es2018",
          "dom"
        ]
      },
      // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
      "include": [
        "src/**/*"
      ],
      // 指定一个排除列表（include的反向操作）
      "exclude": [
        "demo.ts",
        "./node_modules",
        "./bower_components",
        "./jspm_packages",
      ],
      // 指定哪些文件使用该配置（属于手动一个个指定文件）
      "files": [
        "demo.ts"
      ]
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

联合类型：可以使用 | 来连接多个类型 联合数据类型
    
    let c:boolean | string;
    
    let c:boolean | string = false;
    c = true;
    c = "hello";
    
    let b:"male" | "false";
    b = "male";
    b = "false";

//any 表示的是任意类型，一个变量设置类型为any后相当于对改变量关闭了TS的类型检测
    //如果声明变量不指定类型，则TS解析器会自动判断变量的类型为any
    //它可以赋值给任意变量
    let n:any;
    let n = 1;
    let n = "world"
    let n = true;
    let n = null;
    
    //表示未知类型,不能将类型“unknown”分配给类型“string”以及其它类型
    let e:unknown;
    e = 10;
    e = "hello";
    e = true;
    
    let s:string ='a';
    //类型断言，告诉解析器变量的实际类型
    s = e as string;
    s = <string> e;

//void 用来表示空，以函数为例，就表示没有返回值的函数(就是没有return)
    function fn1():void{
        return null;
    }
    //never 表示永远不会返回结果 (什么都没有返回)  了解一下！
    function fn3():never{
        throw new Error('报错');
    }

//object 只能表示对象
    let a:object;
    a = {};
    a = function(){}
    //{}用来指定对象中可以包含那些属性
    //语法：{属性名：属性值，属性名：属性值}
    //在属性名后面加上一个问号，表示属性是可选的
    let b:{name:string,age:number,salary?:number};
    b = {
        name:"du",
        age:20,
    }
    
    // 必须包含name:"string",[propName:string]:any 表示任意类型的属性
    let c:{name:string,[propName:string]:any}
    c = {name:"who",age:22,other:"no"}
    
    
    //函数
    /*
        语法：(形参：类型，形参：类型,...)=>返回值
    */
    let d:(a:string,b:string)=>number
    d = (n1:number,n2:number)=>{
        return n1+n2
    } 
    
    //数组类型声明 
    //类型[]  Array<类型> 两种
    let e:string[];
    e = ["a","b","c"]
    
    let f:number[] 
    //let f:Array<number>;  两个写法一样
    f = [1,2,3,4]
    
    //元组语法： [类型,类型，类型]
    //元组，元组就是固定类型和长度的数组(对应)
    let h:[string,number];
    h = ["a",123]
    
    //enum 枚举
    enum Gender{
        Male = 0,
        Female = 1
    }
    let i:{name:string,gender:Gender}
    i ={
        name:"du",
        gender:Gender.Female
    }
    console.log(i.gender == Gender.Female)//true
    
    //别名
    type myType = string;
    let m:myType;
    m = "a"
    
    type myType2 = 1 | 2 | 3 | 4;
    let u:myType2;
    u = 3
    console.log(u) //3

[https_blog.csdn.net_THcoding_Cat_article_details_115421754]: https://blog.csdn.net/THcoding_Cat/article/details/115421754
[https_www.tslang.cn_docs_handbook_tsconfig-json.html]: https://www.tslang.cn/docs/handbook/tsconfig-json.html
[https_www.cnblogs.com_fangsmile_p_14239529.html]: https://www.cnblogs.com/fangsmile/p/14239529.html
[https_blog.csdn.net_u012987546_article_details_96482774]: https://blog.csdn.net/u012987546/article/details/96482774
[https_blog.csdn.net_qq_34979346_article_details_99840181]: https://blog.csdn.net/qq_34979346/article/details/99840181
[https_blog.csdn.net_qq_43653522_article_details_115112986]: https://blog.csdn.net/qq_43653522/article/details/115112986
[20210705213151797.png]: /images/20221005/34cdb0781f234c4d81d060afbde41546.png
[TS]: https://www.cnblogs.com/eric-share/p/14311499.html
[2f9555608cea7b87bcfe21d25f642a6d.png]: /images/20221005/0b70765ef7094f33963c9db90b84fa52.png
[ec6cc33c5ea7d2d63a1b74dcf7f9695e.png]: /images/20221005/0817c8ec64bc4e36ba79c13f7f8bd461.png
[e0e90299926a83c624dee9bcec5d9817.png]: /images/20221005/084ac1264c3c493493143b63561ef498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20221005/2ec634375c654ca58c581146f9da5fdc.png