• typeScript


    1.介绍

      TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。

            编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。

            TypeScript 是由微软开发的一款开源的编程语言。

    2.优势

    (1)TypeScript 增加了代码的可读性和可维护性
      类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了
      可以在编译阶段就发现大部分错误,这总比在运行时候出错好
      增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等
    (2)TypeScript 非常包容
      TypeScript 是 JavaScript 的超集,.js 文件可以直接重命名为 .ts 即可
      即使不显式的定义类型,也能够自动做出类型推论
           可以定义从简单到复杂的几乎一切类型
      即使 TypeScript 编译报错,也可以生成 JavaScript 文件
      兼容第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取
    TypeScript 最大的优势便是增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等
    3.劣势
      有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师可能不是很熟悉的概念
      短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本
      集成到构建流程需要一些工作量
      可能和一些库结合的不是很完美
    4.安装
    命令行工具安装:
    npm install -g typescript
     
    以上命令会在全局环境下安装 tsc 命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。
    使用 TypeScript 编写的文件以 .ts为后缀,用 TypeScript 编写 React 时,以 .tsx 为后缀。
    编译ts文件: tsc  hello.ts
    自动编译ts文件:
    首先运行tsc --init命令生成tsconfig.json文件,修改OutDir
    "outDir": "./js",表示编译生成的js文件存放在根目录的js文件夹下
    然后找到终端-运行任务-tsc:监视即可。
    5.demo
    //hello.ts

    function sayHello(person: string) { return 'Hello, ' + person; } let user = 'Tom'; console.log(sayHello(user));

    执行 : tsc hello.ts之后会生成一个编译好的  hello.js 文件

    //hello.js

    function sayHello(person) {
    return 'Hello, ' + person; } var user = 'Tom'; console.log(sayHello(user));

    TypeScript 只会进行静态检查,如果发现有错误,编译的时候就会报错。

    function sayHello(person: string) {
        return 'Hello, ' + person;
    }
    
    let user = [0, 1, 2];
    console.log(sayHello(user));

    编辑器中会提示错误,编译的时候也会出错:

    index.ts(6,22): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

    TypeScript 编译的时候即使报错了,还是会生成编译结果,我们仍然可以使用这个编译之后的文件。

    如果要在报错的时候终止 js 文件的生成,可以在 tsconfig.json 中配置 noEmitOnError 即可。

    6. 数据类型
    布尔值、数值、字符串、数组、枚举、any、null、undefined以及void
    let isDone: boolean = false;
    let decLiteral: number = 6;
    let myName: string = 'Tom';
     let u: undefined = undefined;
     let n: null = null;
    undefinednull 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给 number 类型的变量:
    let num: number = undefined;

    任意值:任意值(Any)用来表示允许赋值为任意类型

    let myFavoriteNumber: any = 'seven';
    myFavoriteNumber = 7;

    在任意值上访问任何属性都是允许的,调用任何方法也都是允许的

    变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型

     数组:

    let fibonacci: number[] = [1, 1, 2, 3, 5];//只能为number类型的数据
    let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];//可以为任意类型数据

    也可以使用数组泛型表示:

    let fibonacci: Array<number> = [1, 1, 2, 3, 5];

    7.类型推论

    如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型

    let myFavoriteNumber = 'seven';
    myFavoriteNumber = 7;
    
    // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

    TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。

    上面的

    myFavoriteNumber 被赋值成seven,则系统将其推论为字符串类型的
    如果定义时没有赋值,不管之后有没有赋值,都会被推断成any类型而完全不被类型检查

    8.联合类型: 表示取值可以为多种类型中的一种。
    let myFavoriteNumber: string | number;
    myFavoriteNumber = 'seven';
    myFavoriteNumber = 7;

    联合类型使用 | 分隔每个类型。

    9.接口

    在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

    interface Person {
        name: string;
        age: number;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25
    };

    tom 的形状必须和接口 Person 一致,定义的变量既不能比接口少了一些属性,也不能多一些接口。

    如果不希望完全匹配一个形状,可以使用可选属性:

    interface Person {
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        name: 'Tom'
    };
    或者是:
    let tom: Person = {
        name: 'Tom',
        age: 25
    };
    //age可选属性可以不存在

    如果希望一个接口允许有任意的属性:

    interface Person {
        name: string;
        age?: number;
        [propName: string]: any;
    }
    
    let tom: Person = {
        name: 'Tom',
        gender: 'male'
    };

    使用 [propName: string] 定义了任意属性取 string 类型的值。

    一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集

    interface Person {
        name: string;
        age?: number;
        [propName: string]: string;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    
    // index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
    // index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
    // Index signatures are incompatible.
    // Type 'string | number' is not assignable to type 'string'.
    // Type 'number' is not assignable to type 'string'.

    上例中,任意属性的值允许是 string,但是可选属性 age 的值却是 numbernumber 不是 string 的子属性,所以报错了。

    只读属性:

    interface Person {
        readonly id: number;
        name: string;
        age?: number;
        [propName: string]: any;
    }
    
    let tom: Person = {
        id: 89757,
        name: 'Tom',
        gender: 'male'
    };
    
    tom.id = 9527;
    
    // index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

     10.函数

     

  • 相关阅读:
    犀牛书学习笔记(2):对象和数组
    犀牛书学习笔记(1):语法结构、数据类型和值、表达式和运算符
    小学了一下css hack
    git学习系列--六分之一
    稍览了一下CommonJS
    意识流_六分之一
    两升的心思系列之-----粒子的预备
    mybatis_延迟加载
    mybatis_动态SQL
    mybatis_mapper动态代理
  • 原文地址:https://www.cnblogs.com/150536FBB/p/12161050.html
Copyright © 2020-2023  润新知