入门 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值