快速了解typescript

97 阅读5分钟

什么是typescript

typescript的历史和原理什么的问度娘,简单复习就是让自己快速的掌握最简单的东西,我的目标是最短的时候感受那一丝丝的愉悦,所以让我们在typescript的外面蹭蹭,喜欢的朋友自己深入。

typescript就是JavaScript的超级,对变量进行一种限制。

菜鸡:anyscript!!!。

高手:typescript更加严谨,方便重构和减少bug等等。

大佬:任何东西都要根据具体的情况而来,需要考虑公司和团队的具体情况,没有完美的编程语言但是有最合适的编程语言。

安装和使用

安装

使用命令行

npm i typescript -g

查看是否安装好,运行命令行

tsc -v

出现版本号就ok

使用

1.创建文件first.ts,并写入如下代码

(()=>{
    let girl: String = 'linghua';
    console.log(girl);
})()

2.运行命令行

tsc ./first.ts

会生成first.js文件,然后运行first.js文件,ts的运行方式很多,大多数会选择vscode自带的运行方式。自己百度。

但无论什么方式,本质就是先把ts编译为js再进行运行

类型限制方式

typescript重点就是加了类型限制,书写方式是这样的

let girl: string = 'linghua';

格式为 变量名 :变量类型

当赋值的类型和标注的类型不一样时就会报错

基础类型

  1. 布尔

     let boo: boolean = true
    
  2. undefined

    let und: undeefined = undefined
    
  3. null

    let un: null = null
    
  4. 数字

    let nub: number = 1
    
  5. 字符串

    let str: string = '找富婆'
    
  6. any

    任意类型,就是当你不知道用什么类型的时候就用any,是初学者不二的法门,也是anyscript的由来,只要不被老大打,全部用any。

  7. void 当函数返回没用值的时候使用

    function voi():void{
      console.log('要找对象,先变帅,胆子大,讲礼貌')
    }
    
  8. 对象

    let obj: object ={ name: '胡桃' }
    

    我对象的名字叫胡桃

  9. 数组 第一种方式

    let arr:[] = [1,2,3]
    

    可以对数组内的元素进行类型限制

    let arr: number[] = [1,2,3]
    

    第二种方式

    let arr: Array<number> = [1,2,3]
    
  10. 元组 就是长度数据类型确定的素组

    let tup:[number,string,boolean] = [18,'胡桃',true]
    
  11. 枚举

    enum Day{
    	SUM,
    	TUE,
    	WED,
    	THU,
    	FRI,
    	SAT,
    	SUN
    }
    
    console.log(Day.SUM)  //值为0
    console.log(Day.TUE)  //值为1
    
    // 枚举每一个数据对应一个编号,从0开始依次递增
    
    enum Day{
    	SUM = 2,
    	TUE,
    	WED,
    	THU,
    	FRI,
    	SAT,
    	SUN
    }
    
    console.log(Day.SUM)  //值为2
    console.log(Day.TUE)  //值为3
    // 可以直接赋值,后面的编号在赋值后的值依次递增
    

    因为我是学JavaScript来的,对枚举和元组使用较少,不做评价,靠自己感受

  12. 联合类型 就像有些人喜欢萝莉有些人喜欢御姐,有些人喜欢萝莉和御姐。所以让你多选几个,就有了联合类型

```ty
let unite: number|string = 1
```

格式     *变量类型 | 变量类型*

这种形式将可以使用多个变量类型

断言和类型推断

先讲类型推断

 let nub = 1111
 //像此时没有自己编写对应的数据类型时,会自动将nub推断为number

断言这个词都很少见,一般断言的造句是,我在这里断言,无论各位靓仔做什么,坚持下去就能赢

所以断言中文的简单理解就是提前确定,还是百分百的那种十分的确定

第一种方式

 str as string

格式为 变量 as 变量类型

第二种方式

<string>str

格式为 <变量类型>变量

这里推荐第一种,作用一般是定义变量类型或者判断变量类型,具体使用请百度。

接口

主要是对象内部数据进行类型限制

interface Girl{
    readonly name: string,  //只读属性
    age: number,
    sex?: string,  //可选属性
    [prop: string]: any;  // 添加未知属性,字段名为string,数据为any
}

let girl: Girl={
    name: 'linghua',
    age: 18,
    height: 180,
}

限制函数

interface Add{
	(a:number, b:number): number
}

let all:Add = function(a:number,b:number):unmber{
  return a + b
}

限制类

interface Girl{
	sayHi()
}

class woman implements Girl{
	sayJi(){
		console.log('你好')
	}
}

类中的修饰符

类中加了一些东西,有些东西在es6中也有,简单理一下,需要加难度的自己研究,我这里浅浅的感受一下

 class Woman {
        public name:string   //公共属性,默认状态
        private age: number  //私有属性,外部和子类无法访问
        protected height:number //保护属性,外部无法访问,子类可以访问
        readonly sex:string = '女' //只读属性,外部,内部普通方法不能修改,构造函数中可以修改
        constructor(name:string,age:number){
            this.name = name;
            this.age = age;
        };

        static what(){   //静态属性,通过类获取Woman.what()
            console.log('我是一个女人的类')
        }
    }

函数

函数的写法

function(a:unmber,b:number,c?:number,...arg:number[]):number{
	return a + b;
}

//其中?是可选
//...arg:number[],是剩余参数
//其实就是对参数和返回的值进行类型限制

let add:(a:number,b:number)=>number = function(a:unmber,b:number):number{
	return a + b;
}

函数重载

    function add(a:number,b:number): number
    function add(a:string,b:string): string


    function add(a: string|number, b: string|number){
        if (a as number && b as number) {
            return (a as number) + (b as number)
        }
        if (a as string && b as string) {
            return a as string + b as string
        }
    }

    console.log(add(1,2))
    console.log(add('你','好'))
    //console.log(add(1,'好'))  //此时就会报错
    
    //相同的函数,传入固定的参数和返回值的组合

泛型

就是参数类型改变时,相同的函数要再写一遍,为了解决这个问题出现的,简单理解就是类型限制变成了一个变量。

function look<T>(a:T):T{
        return a
    }

    console.log(look<number>(1)); // 当输入是number时,类型限制就是number
    console.log(look<string>('aaa'));// 当输入是string时,类型限制就是string
    
   //使用这样的方法T是自己定义的变量命

多个泛型参数

    function look<T,k>(a:T,b:k):void{
        console.log(a,b)
    }

    console.log(look<number,string>(1,'你好'));

泛型接口

interface Girl<T>{
	name:string,
	id: T,
}

类中使用泛型

class Girl<T>{
	name: string
	id: T
}

泛型约束

interface id {
        numb:number
    }

    function add<T extends id>(a:T,b:T){
        return a.numb + b.numb
    }
    
    //我感觉更像是提示一下参数内部有什么