阅读 708

我这废柴怎么可能逆袭的一生、第三天

无所事事的样子开始了摸鱼的一天

TypeScript数据类型概述

  • 类型安全

    强类型:

    语言层面限制,形参类型要和实参类型相同 有更强的类型约束,不允许有任意类型的隐式数据转换

    弱类型:

    语言层面不限制,形参类型要和实参类型可以不相同,语法上不会有问题,运行上可能会出现问题 没有什么类型约束,允许有任意类型的隐式数据转换

  • 类型检查

    静态类型:

    声明时数据类型是明确的,不能修改 (ps:就你的名字,不能随便改姓)

    动态类型:

    声明时数据类型可不明确,类型随时可以修改,运行阶段才能明确变量的数据类型,且可随时改变

JavaScript

是一门弱类型且动态类型的语言,因为早期的需求简单,没有编译环节,现在需求更多,项目规模扩大,目前基本不太满足使用需求,所有要用TS了。

  • 弱类型
    const obj = {};
    obj.foo(); // 只有执行时才会报错
    // 编写的时候不会报错,只有在运行的时候才会报错,造成了测试的时候可能无法测试,对项目产生安全隐患
    
    function sum (a,b){
        return a+b;
    }
    sum(1+1);
    sum(5+"2"); // 返回的数据就会修改为字符串 52 
    // 约定函数调用能治标,但是需要花费时间,如果是强类型,则不会出现这种问题
    
    const obj={};
    obj[true] = 100;
    console.log(obj['true']);
    // 对象的属性名会转换为字符串
    
    // 代码量小的时候,可以通过约定的方式避免这些玩意
复制代码
  • 强类型
  • 错误更早暴露
  • 代码更智能,编码更准确
  • 重构更牢靠(可以安全的修改存在的成员名称)
  • 减少不必要的类型判断(ps:js的数据要判断空啊,字符啊,数组啊,对象啊,等等不合理的东西)

TypeScript = JavaScript + ES6 + 类型系统

会编译为js代码运行
小项目还是用js吧
长周期的大项目用TS
没啥缺点,就是学习吧年轻人
复制代码
TypeScript原始的数据类型
  • string
  • number
  • boolean
  • void
  • null
  • undefined
  • symbol
非原始类型(对象、数组、函数)
  • 对象类型

const foo:object = function(){} / [] / {} // 声明object类型限制属性

const obj:{foo:number}={foo:123}; // > 声明的属性,要赋值对应值,不能声明未定义的属性。(ps:> 用接口比较好)

  • 数组类型

const arr1 :Array = [1,2,3];

const arr2:number[]=[1,2,3];

    function sum(...args:number[]){
         // 如果不加 :number[] 需要判断传递进来的数据是否为数字类型,否则计算会出现问题
         return args.reduce(prev,current) =>prev+current,0
    }
复制代码
  • 元祖类型
    // 类似定义数组的方式定义数组,
    const tuple:[number,string] = [18,'asd'];
    // 可以使用数组下标访问,也可以用数组结构的方式,一般用于函数的返回值,指定返回的数据类型
复制代码
  • 枚举类型

给一组数值取可以理解名字,只会有固定的一组值

    const postStaus = {
        draft:0,
        Unpublished:1,
        published:2
    }
    // 使用枚举型
    enum postStaus = {
        draft=0,
        Unpublished=1,
        published=2
    }
    // 枚举可不赋初始值,默认从0开始,自动增加,如果给第一个值初始值,后面的会自动增加,如果字符串枚举则需要手动初始化
    // 会影响编译后的结果,编译为js会写成双向的键值对,为了可以通过值访问属性名,如果不需要双向访问,则使用常量枚举,即声明时使用 const 声明
复制代码
  • 函数类型
    // 函数声明
    function func1(a:number,b:number):string{
        return 'asd';
    }
    // 参数类型限定、参数个数限定,可选参数,参数名后加问号,参数默认值也是可选参数的一种,这种可选的要放在后面
    // 函数表达式
    function func2:(a:number,b:number)=>string = function(a:number,b:number):string{
        return 'func2'
    }
复制代码
  • 任意类型
    any 类型可以就当作js里的类型,算是弱类型语言,语法上都不会报错了就
复制代码
隐式类型推断
    // 声明变量时没有声明数据类型,直接赋值会推断值的类型,确认明确类型,如果没有赋初始值,则会默认推断为 any类型
复制代码
类型断言
    // 类型断言不是类型转换,类型断言只是告诉编译系统这段的类型,编译后就没了,类型转换那是真转换了数据的类型的。
    const nums = [1,2,85,6];
    const res = nums.find(i => i>0);
    const num1 = res as number; // 比较通用的亚子
    const num1 = <number>res; // JSX下不能用
复制代码
接口

Interfaces 一种约束

    interface Post{
        title : string;
        content : string;
    }
    function printPost (post : Post){
        console.log(post.title);
        console.log(post.content);
    }
    // 接口的基本作用:约束对象结构,一个对象要实现这个接口就一定要实现所有的成员属性
    printPost({
        title:'asd',
        content:'asdasd'
    })
    // 编译后就没了不会有额外文件,但是开发中的多人合作就很好用了,只是做类型约束
复制代码
  • 可选成员

和函数参数一样,参数名后加个问号,则参数会对象会作为可选项,即没传入对应数据时数据类型为undefined

  • 只读成员

readonly 加在成员属性名称前,则该数据初始化后不可被修改

  • 动态成员
    // 定义的时候无法知道具体有那些成员时,可以用这动态成员
    interface Cache{
        [key:string]:string
    }
    const cache:Cache={};
    cache.asd='value1';
    cache.qwe='value2';
复制代码

Class类

class Person{
    public name:string;
    public age:number;
    // 默认为public 可以不写,但是一把都写上,整齐划一
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    }
    // private 不能在class之外访问,只能在本身内访问,子类中不可访问
    // protected 被保护,只能在本身内和子类中访问
    // 如果constructor 是private声明了就不能在外部new这个对象了
    // 可以对参数添加 readonly属性,则参数被赋值后不可修改,只读
}
复制代码

类与接口

    // 接口尽量简单,一个class实现多个接口
复制代码

抽象类

    // 约束子类中要有某些成员,可以有具体的实现,接口只有
    abstract class Animal{
        eat(food:string):void{
            console.log(food);
        }
        abstract run():void  // 子类必须要实现这个方法
    }
    class Dog extends Animal{
        run(){
            console.log('runing');
        }
    }
复制代码

泛型

    // 指定类型参数
    function creatNumberArraay(length:number,value:number):number[]{
        const arr =Array<number>(length).fill(value);
        return arr;
    }
    creatNumberArraay(3,100);
    function creatArraay<T>(length:number,value:T):number[]{
        const arr =Array<T>(length).fill(value);
        return arr;
    }
    creatNumberArraay<string>(3,100); // 通过泛型传递这个数据类型参数
复制代码

声明类型

    declare function xxx(){}
    // 一个成员在使用的时候没有声明,手动声明一下,因为js的部分你ts的用需要有声明好才可以
    //主要是为了兼容旧版的东西,新版就没啥用了的样子
复制代码

—————————————————————————————————————————————————————— 我这废柴

系列

文章分类
前端
文章标签