TypeScript

(一)、什么是TypeScript

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

TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

• 超集：支持所有的js，并在此基础上添加了额外的功能
• 有类型的：js类型是动态的，只有在运行时可知是什么类型，并且类型是变化的；TS要求是有类型的，即使没有，给与初始值的时候类型也会确定，类型与值不一致时会报错。TS是静态类型的编程语言，JS是动态类型的编程语言。静态类型编译期做类型检查；动态类型执行期做类型检查。
• 编译：说明TS本身不能在浏览器或者node环境中运行，需要编译器编译为js代码才可以运行

(二)、为什么要学习TypeScript

• 类型检查（可以在写代码的时候发现错误，函数传参错误立即解决）
• 代码补全（vscode根据ts的类型信息，提供更好的代码提示和补全功能）
• 易于维护（大型项目，代码编写，类型起到了文档的作用，大型项目偏爱ts）
• 入门简单（入门门槛低，会js即可编写ts）

(三)、编写与运行TypeScript

• 安装编译器

  npm install -g typescript
  1

• 创建ts文件 （后缀写成ts）

• 使用tsc 对文件进行编译（默认生成ES3版本的js文件）

(四)、基本类型

boolean，number，string，undefined，null

• 隐式类型：ts根据变量的值来推断类型，代码的写法类似于js，但不能用其他类型的值赋值
• 显示类型：用: 类型来显示规定变量的类型

• any ：

  任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型。

  let x: any = 1;    // 数字类型
  x = 'hello';    // 字符串类型
  x = false;    // 布尔类型
  1
  2
  3

• null：

  在 JavaScript 中 null 表示 “什么都没有”。null是一个只有一个值的特殊类型。表示一个空对象引用。用 typeof 检测 null 返回是 object。

• undefined：

  在 JavaScript 中, undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined。

  Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型。

• void：

  用于标识方法返回值的类型，表示该方法没有返回值。

  function hello(): void {
      console.log("Hello");
  }
  1
  2
  3

• 函数：

  • 定义：

    function function_name()
    {
        // 函数定义
        console.log("调用函数") 
    }
    1
    2
    3
    4
    5

  • 调用：

    function_name()
    1

  • 返回值：

    function function_name():return_type { 
        // 语句
        return value; 
    }
    //return_type 是返回值的类型，返回值的类型需要与函数定义的返回类型(return_type)一致
    //函数没有返回值的话类型可以为void
    1
    2
    3
    4
    5
    6

  • 带参数函数：

    function func_name( param1 [:datatype], param2 [:datatype]) {   
    }
    
    function add(x: number, y: number): number {
        return x + y;
    }
    console.log(add(1,2))
    1
    2
    3
    4
    5
    6
    7

  • 可选参数：

    在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？

    注：可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。如果都是可选参数就没关系。

    function buildName(firstName: string, lastName: string) {
        return firstName + " " + lastName;
    }
    
    let result1 = buildName("Bob");                  // 错误，缺少参数
    let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
    let result3 = buildName("Bob", "Adams");         // 正确
    
    
    function buildName(firstName: string, lastName?: string) {
        if (lastName)
            return firstName + " " + lastName;
        else
            return firstName;
    }
    let result1 = buildName("Bob");  // 正确
    let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
    let result3 = buildName("Bob", "Adams");  // 正确
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

  • 默认参数：

    我们也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数

    function function_name(param1[:type],param2[:type] = default_value) { 
    } 
    1
    2

(五)、组合类型（联合类型）:

每个变量可以有多个类型，但是不想使用any破坏类型检查，就可以使用组合类型。

Type1|Type2|Type3 
var val:string|number 
val = 12 
val = "hi"
1
2
3
4

将联合类型作为函数参数使用。

function fn(name:string|string[]){
    if(typeof name == "string") { 
        console.log(name) 
    } else { 
            for(var i = 0;i<name.length;i++) { 
            console.log(name[i])
            } 
    } 
}
1
2
3
4
5
6
7
8
9

• 自定义类型：

  type NumStr = number | string;
  var a:NumStr="hello";
  
  var c:"on"|"off"="on"
  1
  2
  3
  4

(六)、对象类型：

• 接口：

  检查对象中的属性是否符合规范。用来规范对象中应该都有哪些属性。名称以及类型

  • 利用接口检查对象是否规范

    interface Post{
        title:string;
        author:string;
    }
    var post:Post={
        title:"三体",
        author:"刘慈欣",
    }
    1
    2
    3
    4
    5
    6
    7
    8

  • 利用接口检查函数参数是否规范

    
    1

• 属性：

  var sites = { 
     site1:"hello", 
     site2:"Google" 
  };
  1
  2
  3
  4

• 方法：

  var sites = { 
      site1:"Runoob", 
      site2:"Google" ,
      sayHello:function(){}      // 类型模板
  }
  sites.sayHello = function(){ return "hello";}   //直接写报错
  1
  2
  3
  4
  5
  6

• 将对象作为参数传递给函数：

  function fn(obj:{site1:string,site2:string}){
      console.log(obj.site1);
  }
  var sites = { 
      site1:"Runoob", 
      site2:"Google",
  }; 
  fn(sites)
  1
  2
  3
  4
  5
  6
  7
  8

(七)、数组类型：

保证数组元素都是统一类型，以防其他元素的混入，导致异常；或者防止意外给数组元素付了其他类型的值。

var array_name[:datatype] = [val1,val2…valn]
var sites:string[]; 
sites = ["Google","Runoob","Taobao"]
1
2
3

• 元组：

  我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。元组中允许存储不同类型的元素，元组可以作为参数传递给函数。

  let x: [string, number];
  x = ['hello', 10]; // OK
  x = [10, 'hello']; // Error
  1
  2
  3

(八)、编译选项

• tsc index.js -w 自动监视当前ts文件，并进行编译
• tsc -w 自动编译所有的文件，前提是有配置文件tsconfig.json
• tsconfig.json ：ts编译器的配置文件，ts编译器可以根据它的信息对代码进行编译。 tsc --init
• include:"src/**/*" 用来指定哪些ts文件被编译
• exclude 用来指定被排除的文件
• compilerOptions ：编译器选项
  • target 用来指定ts被编译为的js的版本
  • module 用来指定使用模块化的规范
  • outDir用来指定编译后文件所在的目录
  • removeComments是否移除注释