TS基础语法

安装TypeScipt

npm install typescipt -g //全局安装

TS配置编译项

//生成tsconfig.json配置文件
tsc -init
//自动编译
tsc -watch

{
 /*
  tsconfig.json是ts编译器的配置文件 ts编译器可以根据它的信息来对代码进行编译
  “include” 用来指定哪些ts文件需要被编译
  路径：** 表示任意目录
       *  表示任意文件
  “exclude” 不需要被编译的文件目录
  默认值：["node_moules,","bower_components","jspm_packages"]
 */
  "include": [
    "./src/**/*"
  ],
  /*
    compilerOptions 编译器的选项
  */
  "compilerOptions": {
    // target 用来指定ts被编译为的es版本
    "target": "ES2015",
    //module 指定要使用的模块化规范
    //'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'.
    "module": "ES2015",
    //lib 用来指定项目中要使用的库
//    "lib": ["dom"]
    //outDir 用来指定编译后的文件所在的目录
    "outDir": "./dist",

    //将代码合并成一个文件
    //设置outfile后 所有的全局作用域中的代码会合并到一个文件中
//    "outFile": "./dist/app.js",
    //是否对js编译 默认false
    "allowJs": false,
    //是否检查js代码语法是否合规 默认false
    "checkJs": false,
    //是否移除注释
    "removeComments": false,
    //不生成编译后的文件
    "noEmit": true,
    //当有错误的时候不生成编译后的文件
    "noEmitOnError": true,
    //严格检查的总开关
    "strict": false,
    // 用来设置编译后的文件是否使用严格模式
    "alwaysStrict": true,
    //不允许隐式any
    "noImplicitAny": true,
    //不允许不明确类型不明确的this
    "noImplicitThis": false,
    //检查空值
    "strictNullChecks": false,
  }
}

TS常用的类型

基元类型：string number Boolean

let str: string = 'hello'
let number : number = 100
let  bool: boolean = false

// 可以直接使用字面量进行类型声明
let a :10
a=10
//a=11

//可以使用 | 来连接多个类型（联合类型）
let b:number | boolean
// b=10
b=true

any 表示的任意类型(不建议使用)

设置类型为any后相当于对该变量关闭了ts的类型检查

let d:any
// 声明变量如果不指定类型 则ts解析器会自动判断变量的类型为any （隐式的any）
let d;
d=10
d='hello'

unknown

//unknown 表示类型未知的值
let e:unknown
e=10
e='hello'
// unknown实际上就是一个类型安全的any
// unknown 类型的变量不能直接赋值给其他变量
if (typeof e === 'string'){
    d = e
}

类型断言

//类型断言 可以用来告诉解析器变量的实际类型
/*
* 语法：
*   变量 as 类型
*   <类型>变量
* */
d = e as  string
d = <string> e

void

//void 用来表空 以函数为例 就表示没有返回的函数
function fn(num)：void{

}

never

//never 表示没有返回值
function fn2():never{
    throw new Error('报错')
}

抽象类

• 以abstract开头的类是抽象类
• 抽象类和其他类区别不大 只是不能用来创建对象
• 抽象类中可以添加抽象方法

(function (){
    /*
    * 以abstract开头的类数抽象类
    *       抽象类和其他类区别不大 只是不能用来创建对象
    *       抽象类中可以添加抽象方法
* * */
    abstract class Animal{
        name:string
        constructor(name:string){
            this.name = name
        }
        /*
        * 定义一个抽象方法
        * 抽象方法使用abstract开头没有方法体
        * 抽象方法只能定义在抽象类中 子类必须对抽象方法进行实现
        * */
       abstract bark():void
    }
    class Dog extends Animal{
        bark() {
           console.log('222')
        }
    }
    class Cat extends Animal{
        bark() {
            console.log('mmm')
        }
    }
    const dog = new Dog('w')
    dog.bark()
})()

接口

• 接口用来定义一个类结构 用来定义一个类中应该包含哪些属性和方法
• 同时接口也可以当成类型去声明

(function (){
    // type myType={
    //     name:string,
    //     age:number,
    // }
    /*
    * 接口用来定义一个类结构 用来定义一个类中应该包含哪些属性和方法
    * 同时接口也可以当成类型声明去使用
    * */
    interface myinterface {
        name:string,
        age:number
    }
    interface myinterface {
        gender:string
    }
    // const obj:myinterface={
    //     name:'1',
    //     age:2,
    //     gender:'男'
    // }
    /*
    * 接口可以在定义类的时候去限制类的解构
    * 接口中的所有属性都不能有实际的值
    * 接口指定义接口而不考虑实际值
    *   在接口中所有方法都是抽象方法
    * */
    interface myinter{
        name:string,
        sayhello():void
    }

    /*
    *   定义类时 可以使用类实现一个接口
    *   实现接口就是使类满足接口的要求
    * */
    class Myclass implements myinter{
        name:string
        constructor(name:string) {
            this.name = name
        }
        sayhello(){
            console.log('hello')
        }
    }
})()

泛型

• 在定义类或函数时遇到不确定的类型可以使用泛型
• 语法：函数名/类名<泛型名>(参数:泛型名)

 function fn<T>(val:T):T{
     return val
 }
 //可以直接调用具有泛型的函数
 let res =fn(10) //不指定泛型ts可以自动进行类型推断
 let res2 =fn<string>('hello') //指定泛型

• 泛型可以直接定义多个

 function fn2<T,K>(a:T,b:K){
     console.log(b)
     return a
 }
 fn2<string,number>('a',2)

 interface inter{
     length:number
 }
 //T extends Inter 表示泛型T必须是inter实现类(子类)
 function fn3<T extends inter>(a:T){
     return a.length
 }
console.log( fn3({length:1}))

webpack打包ts代码

const path = require('path')
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')
//webpack中的所有配置信息都应该写在module.exports中
//引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports={
    mode: "none",
    //指定入口文件
    entry:"./src/index.ts",
    //指定打包文件所在的目录
    output:{
        //指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        //打包后文件的文件
        filename:"bundle.js",
        //告诉webpack不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    //指定webpack打包时要使用的模块
    module:{
        //指定要加载的规则
        rules:[
            {
                //test指定的是规则生效的文件
                test:/.ts$/,
                //要使用的loader
                use:[
                    //配置babel
                    {
                      //指定加载器
                        loader: "babel-loader",
                        //设置babel
                        options: {
                            //设置预定义的环境
                            presets:[
                                [
                                    //指定环境的插件
                                    "@babel/preset-env",
                                    //配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            "chrome":"88"
                                        },
                                       //  指定corejs的版本
                                       "corejs":"3",
                                        // 使用corejs的方式 useage 表示按需加载
                                        "useBuiltIns":"usage"
                                    },

                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                //要排除的文件
                exclude:/node-modules/
            }
        ]
    },
//     配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin(),
    ],
    resolve: {
        extensions: ['.ts','.js']
    }
}