入门 Typescirpt

介绍TS

是 Javascript 的超集

以 Javascript 为基础的语言

扩展了 Javascript，并添加了类型

TS 不能被 JS 解析器直接执行，需要编译为JS运行

类型

tsconfig.json

1、介绍

​ 是 ts 编译器的配置文件，ts 编译器会根据它的信息来对代码进行编译

{
  "compilerOptions": {
    // 编译成JS的版本
    "target": "ES6",
    // 指定使用的模块化规范
    "module": "ES6",
    // 指定编译后文件所在目录
    "outDir": "./dist",
    // 将编译后文件合并成一个文件
    "outFile": "./dist/app.js",
    // 对JS进行编译
    "allowJs": false,
    // 检查 JS语法
    "checkJs": false,
    // 移除 注释
    "removeComments": false,
    // 不生成编译后的文件
    "noEmit": false,
    // 有错误时，不生产编译后文件
    "noEmitOnError": false,
    // 设置编译后的js是否开启严格模式
    "alwaysStrict": false,

    // 开启所有的严格检查
    "strict": false,
    // 不允许隐式的Any类型
    "noImplicitAny": true,
    // 严格的检查可能的null空值
    "strictNullChecks": false
  },
  /*
    include 用来指定编译哪些ts文件
  */
  "include": [
    "./**/*" //**表示任意目录，*表示任意文件
  ],
  /*
    exclude 不需要被编译的文件目录
    默认值：["node_modules","bower_components","jspm_packages"]
  */
  "exclude": [

  ]
}

webpack

# 安装需要的依赖包
npm i -D webpack wepack-cli typescript ts-loader

// 编写webpack.config.js
const path = require('path')

module.exports = {
    entry:'./src/index.ts',// 指定入口文件
    output: {
        path:path.resolve(__dirname,'dist'),// 指定打包文件的目录
        filename:'bundle.js'//打包后的文件
    },
    
    module:{
        rules: [
            {
                test:/\.ts$/,//规则生效的文件
                use:'ts-loader',
                exclude:/node_modules/ //指定要排除的文件
            }
        ]
    }
}

// 编写ts的配置
{
	"compileOptions":{
        "module":"ES6",
        "target":"ES6",
        "strict":true
    }
}

npm i -D html-wepack-plugin

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


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

npm i -D webpack-dev-server

const webpackdevserver = require('webpackdevserver')


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

"scripts":{
    "start":"webpack serve --open chrome.exe"
}

类

class Person {
    // 实例属性[通过对象访问]
    name:string
    age:number
    // 实例只读属性
    readonly address:string='lloo'
   
    // 静态属性[通过类访问]
    static sex:number = 1
    // 静态只读属性
    static readonly email:string='lll'
    
    // 构造函数
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    // 方法
    sayHello(){}
}

const person = new Person('lisi',12);

继承

class animal {
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    // 方法
    sayHello(){
        console.log('动物')
    }
}
class Cat extends animal{
   constructor(name:string,age:number) {
     super(name,age);
   }
    // 覆盖父类方法：方法重写
    sayHello(){
        console.log('狗')
    }
}

抽象 extends

1、抽象类

• 抽象类不能创建实例

abstruct class 类名{}

2、抽象方法

• 抽象方法只能定义在抽象类中
• 抽象方法没有方法体
• 子类必须对抽象方法进行重写

abstruct sayhello():void;

接口 implements

interface 接口名 {}

• 接口用来规范一个类中应该包含哪些属性和方法

• 接口也可做类型声明使用

• 接口中的所有方法都是抽象方法【和抽象类的区别】

属性访问修饰

public：类内外随便访问

private: 只允许类内部访问

protected: 只能在当前类和子类中访问

setxx(){}

getxx(){}

当属性合法性要求高，访问限制高，可以使用get,set方法

如果属性很简单，可以不使用get set方法

class dog {
	_name:string,
    constructor(name:string){this._name=name}
    // ts中设置getter方法方式
    get name(){return this._name}
    
    set name(name:string){this._name=name}
}
dog d = new dog()
console.log(d.name)// 底层调用get name()方法
d.name = 'lisi' // 底层调用set name()方法

泛型

// 定义
function f1<T>(a:T):T {
    return a;
}

// 方式一Ts自动推断类型
f1(10);
// 方式二手动指定泛型
f1<string>('hello')

// 定义多个泛型
function f1<T,F>(a:T,b:F):T{
    return a;
}
f1(123,'123')
f1<number,string>(123,'123')

interface loginInter{
    length:number;
}
// 对未知类型添加限制
function fn2<T extends loginInter>(a:T):number {
    return a.length;
}

class mycalss<T> {
    name:T;
    constructor(name:T){this.name = name}
}
const mc = new Mycalss<st>