Typtscript

ts类型

let a:number;
// a必须是number
a = 10; 
// b必须是string类型
let b:string;
b = "typescript"
let c:boolean = false
let c = false
// ts会自动检测类型
c = true
// 函数形参类型和返回值设置
function sum(a:number,b:number):number{
    return a + b;
}
sum(123,345)//ok
sum("123",345) //no
// 字面量
let e = unknown;
// unknown 实际上是个安全的any
// unknown 不能直接赋值给其他类型
if(typeof e === 'string'){
    s = e
}
// 类型断言:告诉解析器变量的实际类型
// 语法：变量 as 类型
//      <类型> 变量
s = e as string;
s = <string>e;
// 联合类型
let c：boolean | string;
c = true
c = "hello"
// void
function fn():void{
    return;
}
// never
function fn():never{
    throw new Error('报错了！')
}
// 对象
let a:object;
a = {}
a = function(){}
// 设置对象类型
//{ }对象包含哪些属性,在属性名后面加？,表示属性是可选的
let b:{name:string}
b = {name:'suwukong'}
let b:{name:string, age?:number}
b = {name:"小潘",age:18}
b = {name:"小刘"}//ok
// [propName:string]:any 表示任意类型的属性
let c:{name:string,[propName:string]:any};
c = {name:"Jim",age:17,gender:"male"}
c = {name:'jim',age:19}
// 设置函数结构的类型（箭头函数）
/*语法：
    (形参：类型，形参：类型，...)=>返回值类型
*/
let d:(a:number,b:number)=>number
d = function(a,b){
    return a+b 
}
// 数组类型
/*
    语法:
    属性名：类型[]
    属性名：Array<类型>
*/
let arr:string[]//字符串数组
let arr:Array<string>
arr = ['1','2','3']
// 元组 tuple:固定长度的数组
let h:[number,number]
h = [1,2]
// 枚举类型:enum
enum Gender{
    Male,
    Famale
}
let i:{name:string,gender:Gender};
i = {
    name:"孙悟空",
    gender:Gender.Male
}
console.log(i.gender === Gender.Male)// true
// &
let obj:{name:string} & {age:number};
obj = {
    name:"xiao",
    age:20
}
// 类型别名
type MyType = 1|2|3|4|5
let i:MyType
i=1,i=2,i=3,i=4,i=5//都可以

ts编译选项

tsconfig.json

tsconfig.json是ts编译器的配置文件，ts编译器可以根据他的信息来对代码进行编译

• include用来指定哪些文件需要被编译

  • 路径 ** 表示任意目录

    *表示任意文件

{
    "include":[
        "./src/**/*"
    ]
}

• exclude:不需要被编译的文件目录

  • 默认值：["node_modules","brower_components","jsmp_package"]

{
    "include":[
        "./src/**/*"
    ],
    "exclude":[
        "./src/hello/**/*"
    ]
}

tsc -w 
// 对文件进行监视和编译命令

• files:指定被编译文件的列表，只有需要编译的文件少时，才会用到

"file":[
    "core.ts",
    "sys.ts",
    "types.ts"
]

• compilerOptions

  • target:用来指定ts被编译为ES的版本
  • module:指定要使用的模块化的规范
  • lib:用于指定使用的库
  • outDir:用来指定编译后文件所在的目录
  • outFile:将代码合并为一个文件，所有的全局作用域中的代码会合并到同一个文件。
  • allowJs:是否对js文件进行编译
  • checkJs：是否检查Js代码符合语法规范，默认false
  • removeComments:true，移除注释
  • noEmit : false，不生成编译后文件
  • noEmitOnError : true：当有错误时不生成编译后的文件

• compilerOptions中的编译配置

  • 🌮strict : true，所有严格检查总开关
  • 🌮alwaysStrict : true，用来设置编译后的文件是否使用严格模式，default：false
  • 🌮noImplicitAny : true，不许隐式的any类型
  • 🌮noImplicitThis : true，不允许不明确的类型this
  • 🌮strictNullChecks : true，严格的检查空值

{
    "compilerOptions":{
        "target":"es2015",
        "module":"es2015",
        "lib":["dom","es6"],
        "outDir":"./dist",
        "outFile":"./dist/app.js",
        "allowJs": true,
        "checkJs":true,
        "removeComments": true,
        "noEmit":false,
        "noEmitOnError":true,
        "strict" : true,
        "alwaysStrict" : true,
        "alwaysStrict" : true,
        "noImplicitAny" : true,
        "noImplicitAny" : true,
        "strictNullChecks" : true
    }
}

let box = document.getElementById('box')
box?.addEventListener('click',function(){alert('hello')})

?.表示如果box存在，是es6以后的语法

类Class

构造函数 constructor

class Dog{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    back(){
        console.log('汪汪汪~~')
    }
}
const dog = new Dog('小黑',3)

继承 extends

class Animal{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    back(){
        console.log('在叫~~~~');
    }
}
​
class Dog extends Animal{
    run(){
        console.log(`${this.name}在跑~~~`);
    }
    back(){
        console.log('汪汪汪~~~');
    }
}
const dog = new Dog('旺财',3);
dog.run();
dog.back();

super 关键字

// super调用父类的构造函数
class Animal{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    back(){
        console.log('在叫~~~~');
    }
}
​
class Dog extends Animal{
    gender:string;
    constructor(name:string,age:number,gender:string){
        super(name,age);
        this.gender = gender
    }
    run(){
        console.log(`${this.name}在跑~~~`);
    }
    back(){
        console.log('汪汪汪~~~');
    }
}
const dog = new Dog('旺财',3,'male')

abstract 抽象类

// 抽象类：专门被其他类所继承的类，没有办法创建实例对象，里面可以添加抽象方法，抽象方法没有实体，必须被继承的类所实例化。抽象方法只能添加在抽象类中
abstract class Animal{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    // 抽象方法，无方法体，只能定义在抽象类中,子类必须对抽象方法重写
    abstract sayHello():void;
}
class Dog extends Animal{
    sayHelo(){
        console.log('汪汪汪~~')
    }
}
const dog = new Dog('WC')

接口interface(TS独有的)

// 接口的所有属性都不能有实际的值，接口只定义对象的结构，不考虑实际的值，在接口中的方法都是抽象方法。
interface myInter{
    name:string;
    sayHello():void;
}
// 定义类时，可以使用类去实现一个接口，实现接口就是使类满足接口的要求
class MyClass implements myInter{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    sayHello(){
        console.log('Welcome!!')
    }
}

属性的封装

• public 共有的
• private 私有的
• protected 受保护的，子类中可以访问父类的私有属性
• get 方法
• set 方法

泛型

// any跳过类型检查
function fn(a:any):any{
    return a
}
// 定义函数或者类的类型不确定的时候，可以使用泛型
function fn<T>(a:T):T{
    return a;
}
// 类型的自动推断
fn(10);
fn<string>('hello')
// 泛型可以同时指定多个
function fn2<T,K>(a:T,b:K):T{
    console.log(b);
    return a;
}
fn2<number,string>(124,'hello');
// 接口：interface
interface Inter{
    length:number;
}
function fn3<T extends Inter>(a:T):number{
    return a.length;
}
fn3("123")
fn3({length:10})
// 在类中使用泛型
class MyClass<T>{
    name:T;
    constructor(name:T){
        this.name = name;
    }
}
const mc = new MyClass<string>('孙悟空')