DaZeng：TypeScript的基础使用

TS官网

TS官网传送门

初识TYPESCRIPT, ts是微软开发的一门语言，主要是用来扩展JS语言在数据类型方面的不足。一般也把TS叫做JS超集。

一般来讲，小的项目，开发周期短的项目，因为开发的初期，配置项目所有的数据类型，都需要花大量的时间。长周期的项目中，TS在公司中用得比较多。

安装

npm init -y
npm i --dev typescript

编译

编译为.js文件：

npx tsc demo1.ts

TS配置文件

在项目根目录生成： tsconfig.json文件

npx tsc --init

修改配置项：
“target”: "ES2015,
“sourceMap”: true,
“outDir”: “dist”,//编译的.js存放在dist文件夹下
“rootDir”: “src”,//当前存放ts的文件夹
“strictNullChecks”: false //不检查Null的赋值；修改配置文件

执行编译的命令：npx tsc
中文的错误信息提示：npx tsc --locale zh-CN

解决不同ts文件变量名冲突

export {} //公开一个对象； 这样sayHi就是当前模块中的变量，而非全局的变量。

函数自执行前一行代码，必须以";"结束；
(function(){
// 在函数内部的变量，就是局部变量，避免在团队开中，变量的重名。
const sayHi = function (){
console.log(‘变量被重复声明的问题’)
}
})()

TS的具体使用

export {}

//普通类型
const str:string = 'string'
const num:number = 99
let bool:boolean = true
let n1:void = null
let n2:null = null
let un1:void = undefined
let un2:undefined = undefined
let s:Symbol = Symbol();

//对象
let obj1:object = {}
let obj2:object = []
let obj3:object = function(){}
let obj4:{name:string,age:number}={name:'zz',age:18}

//数组
let arr1:Array<number>=[1,2,3]
let arr2:number[] = [4,5,6];


//元祖类型 就是明确元素的数量和每个元素的类型的数组
const arr3:[number,string] = [123,'zzz']


//枚举类型
enum mei {  
    state=0,
    id=1,
    msg='我是obj',
    code=200
}
// 枚举类型的值，默认都是从0开始的； 后面的值都会累加。
//  如果你初始化了一个值； ，初始化后面的值，会递增一个1
//  如果枚举的值是字符串，则需要给每个枚举赋值。
console.log(mei[0]);//state
console.log(mei.msg);//我是obj


//函数
function fn1(num:number):string{
    return '我是返回的string'
}
fn1(1)

//定义可选参数,必须位于参数列表的末尾
function fn2(num:number,bool?:boolean):number{
    return num
}
fn2(1,true)
fn2(2)

//设置默认参数值
function fn3(num:number,b:boolean = true):boolean{
    return b
}
fn3(1)
fn3(1,false)

//任意个参数
function fn4(a:number,b:number,...args:number[]):object{
    console.log(a,b,args);
    console.log(arguments);
    return args
}
fn4(1,2,3,4,5,6,7)

//函数表达式
const fn5 = (a:number,b?:string):string =>{
    return b
}

//函数表达式，左边的变量用来引用右侧的函数；
const fn6:(a:number,b?:string)=>string = function(a:number,b?:string):string{
    return b
}

// 赋值表达式左边的函数类型，主要是约束=右边的函数的数据结构。
const fn7:(a:number,b?:string)=>string = (a:number,b?:string):string=>{
    return b
}

//泛型 声明函数不指定具体类型，调用时再传递一个具体的类型
function fan<T>(len:number,val:T):T[]{
    let arr = Array<T>(len).fill(val)
    return arr
}

console.log( fan<number>(5,10) );
console.log( fan<string>(5,'wqeewqe') );


//任意类型
function fany(v:any):any{
    return v
}
fany(1)
fany('xxx')
fany(true)
fany([])


//类型断言 辅助TS进行编译
let duan = 777
let duan2 = duan as number //断言 duan一定是number
let duan3 = <number>duan //断言 duan一定是number
console.log(duan2,duan3);


//接口
interface Login{
    user:string
    pass:string
    token?:string //可选
    readonly state:boolean  // readonly,表示这个属性是只读的，一但初始化后，不可以修改； 
}

interface MyCache {
    //动态
    [key:string]:string
}

function login(obj:Login){
    //...axios({})
    console.log(obj);
}

let uobj ={
    user:'zz',
    pass:'123',
    state:true
}

login(uobj)
const cache:MyCache = {}
cache.str = '1111'
cache.name = 'aaaa'
console.log(cache);


//类
//修饰符：
/*
(1) private 表示这个属性是私有的属性，只能是class中访问；
(2) public 默认的，表示公共的属性，class,实例对象，子类都可以访问； 
(3) protected 只允许类内部和子类访问
(4) static 表示这个属性，只能被当前CLASS自已调用
(5) readonly ,表示只读属性，readonly 写在前面几个属性的后面； 
*/

class People {
    constructor(name:string,age:number){
        this.name = name
        this.age = age
        this.pmsg = 'People msg'
        this.bool = true
    }
    private name:string
    public age:number
    protected pmsg:string
    readonly bool:boolean
    fn(msg:string):void{
        console.log(this.name+msg);
    }
}

class Child extends People{
    private constructor(name:string,age:number){
        super(name,age)
        console.log(this.pmsg);
    }
    static create(name:string,age:number){
        return new Child(name,age)
    }
}

let p = new People('z',9)
p.fn('哈哈哈');
console.log(p.age);
let child = Child.create('o',20)

//类和接口 
interface Eat{
    eat(food:string):void
}
//abstract：抽象类不能new只能继承
abstract class Dog implements Eat{
    eat(food:string){
        console.log('Dog eat '+food);
    }
    //抽象方法必须在子类中实现
    abstract run():void
}

class Dog2 extends Dog{
    constructor(){
        super()
    }
    run(){}
}