typeScript学习笔记

一、什么是typeScript

拥有类型系统的JavaScript的超级，可以编辑成纯JavaScript，像是一个工具

类型检查：会在编译代码时进行严格的静态类型检查，编码是发现存在的隐患

语言扩展：会包括es6和未来提案中的特性，接口抽象类型

工具属性：可以编译成标准的JavaScript，可以在任何浏览器操作系统上运行

好处：提高开发效率，降低维护成本，重塑类型思维

二、基础

1、不同类型的语言

（1）强类型语言与弱类型语言

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

（2）动态类型语言与静态类型语言

• 动态类型语言：在执行阶段确定所有的变量类型。在程序运行时，动态计算属性偏移量；对类型非常宽松；bug可能隐藏；运行性能差；可读性差。但是：性能可以改善，单元测试可以测试出隐藏bug
• 静态类型语言：在编译阶段确定所有的变量类型。编译阶段确定属性偏移量；对类型季度严格；运行性能好

2、编写一个typeScript程序

步骤：
    1、全局安装typeScript:  
        npm i typescript -g 
    2、获取帮助信息:  
        tsc -h
    3、创建tsc配置项:  
        tsc --init
    4、创建ts文件index.ts,写入:  
        let hello : string = 'Hello TypeScript'
    5、编译ts文件:   
        tsc ./src/index.ts
    6、编译ts文件后生成js文件，其内容: 
        var hello = 'Hello TypeScript';
    7、为了让工程项目跑起来，需要安装三个包: 
        npm i webpack webpack-cli webpack-dev-server -D 
    8、创建文件夹build，存放配置文件（需要区分开发环境和生成环境的配置，可以分开书写配置）
    
        //根据需要安装'ts-loader'、'typescript'、'html-webpack-plugin'
        //html-webpack-plugin可以将ts的内容映射到index文件中，因此要创建一个index.html文件。并在body标签下加入<div class="app"></div>
        //webpack.base.config.js:
        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'
                })
            ]
        }
        
        
        //webpack.dev.config.js  开发环境
        //启用source-map，以下官方推荐，cheap忽略劣质信息，
        module.exports = {重编译速度快
            devtool: 'cheap-module-eval-source-map'
        }
        
        
        
        //webpack.pro.config.js   生产环境
        //安装'clean-webpack-plugin',作用：每次成功构建之后，帮我们清空很多无用文件
        const { CleanWebpackPlugin } = require('clean-webpack-plugin')
        module.exports = {
            plugins: [
                new CleanWebpackPlugin()
            ]
        }
        
        
        //webpack.config.js  将基础配置和不同环境所需要的配置结合在一起
        //安装webpack-merge',作用：将基础配置和需要的配置合并
        const merge = require('webpack-merge')
        const baseConfig = require('./webpack.base.config')
        const devConfig = require('./webpack.dev.config')
        const proConfig = require('./webpack.pro.config')
        let config = process.NODE_ENV === 'development' ? devConfig : proConfig
        module.exports = merge(baseConfig, config)
    9、修改npm的脚本，package.json
        //webpack-dev-server 启动项目
        //mode 将当前的环境变量指定为什么
        //config 指定当前环境的配置文件
        "scripts": {
            //开发环境脚本
            "start": "webpack-dev-server --mode=development --config ./build/wbpack.config.js",
            "build": "webpack --mode=production --config ./build/webpack.pro.config.js"
        },
    10、启动项目:
        npm start
    11、打开浏览器查看项目：
        http://localhost:8080/
    

3、基本类型

（1）类型注解：

作用：相当于强类型语言中的类型声明，可以对变量起到约束作用

语法：(变量/函数): type

（2）不同的类型

//原始类型
let bool: boolean = true
let num: number = 123
let str: string = 'abc'
str = 123 ❌    //不能将类型“123”分配给类型“string”

//数组
//以下两种数组都是number类型的数组
let arr1: number[] = [1,2,3]
let arr2: Array<number> = [1,2,3]
//想要number和string类型的数组
let arr3: Array<number | string> = [1,2,3,'4']

//元组，（特殊的数组，限定的数组元素的类型和个数）
let tuple: [number, string] = [0,'1']
let tuple1: [number, string] = [0, '1', 9] ❌ //不能将类型“[number, string,number]”分配给类型“[number, string]”。属性“length”的类型不兼容。不能将类型“3”分配给类型“2” 
//ts允许往元组添加新元素，但是不能访问
tuple.push(2); console.log(tuple)  // [0, "1", 2]
tuple[2] ❌  // Tuple type '[number, string]' of length '2' has no element at index '2'

//函数
let add = (x, y) => x + y  //参数“x”,“y”隐式具有“any”类型。
let addNumber = (x: number, y: number): number => x + y  //括号后添加的类型为函数返回值的类型，通常返回值类型可以省略，ts会推断
//定义函数类型并且实现
let compute: (x: numbwe, y: number) => number; compute = (a, b) => a + b

//对象
let obj: objsct = {x: 1, y:2}
obj.x = 3 ❌     //简单指定了obj的类型是object，并没有具体定义应该包含的属性;⚠️any类型，类型“object”上不存在属性“x”
let obj2: {x: number, y: number} = {x: 1, y: 2}
obj.x = 3 ✔️

//symbol 具有唯一的值
let s1: symbol = Symbol()
let s2 = Symbol()
console.log(s1 === s2)  //false

//undefined, null
//被赋值成undefined，null的变量只能被赋值成undefined，null,不能被赋值成其他类型
let un:undefined = undefined  
let nu: null = null
//在ts的官方文档中，undefined，null是任何类型的子类型，是可以被赋值给其他类型，但需要设置！！！
num = undefined  ❌  //不能将类型“undefined”分配给类型“number”
 "strictNullChecks": false, //打开tsconfig.json
num = undefined  ✔️
//以上的方法尽量不要操作，但是必须要赋值，我们可以用联合类型
let num2: number | undefined | null = 2
num2 = null

//void 表示没有任何返回值的类型
let noReturn = () => {}

//any  和js没有什么区别,不是特别情况，不建议使用
let x
x = 1
x = []
x = () => {}

//never 永远不会有返回类型
let error = () => {
    throe new Error('error')
}
let endless = () => {  //死循环
    while(true) {}
}

三、工程

四、实战