typescript小白的入门笔记

Ts笔记/快速入门笔记

参考资料：
ts中文网
菜鸟教程：https://www.runoob.com/typescript/ts-tutorial.html

1.安装：自行安装

Js与ts的区别：
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。给我的感觉两者基本差别不大。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

2.构建ts文件并编译

利用.ts扩展名创建

利用tsc xxx.ts（在命令行/终端上）运行ts编译器，输出结果为一个同名js文件，多次编译会覆盖。也可以通过命令参数来修改默认的输出名称。

TypeScript 会忽略程序中出现的空格、制表符和换行符。区分大写和小写字符。分号可选。

3.ts的高级功能

3.1 类型注解 Type annotations（编译时类型检查 compile time type checking）

约束参数或变量的类型，类似C/Java，使用方式：

function Add(left: number, right: number): number {
    return left + right;
}

括号里利用number约束left和right的变量。（括号外的number约束函数的返回值）

Ts对于基本类型的批注是 number, bool 和 string。而弱或动态类型的结构则是 any 类型。若不符合约束会类型报错

要注意的是尽管有错误，js 文件还是会被创建了。 就算代码有错误，你仍然可以使用 TypeScript。但在这种情况下，TypeScript会警告你代码可能不会按预期执行。

当类型没有给出时，TypeScript 编译器利用类型推断以推断类型。如果由于缺乏声明，没有类型可以被推断出，那么它就会默认为是动态的 any 类型

如果某个属性的值是计算出来的，那么它后面一位的成员必须要初始化值。

const getValue = () => {
  return 0
}

enum List {
  A = getValue(),
  B = 2,  // 此处必须要初始化值，不然编译不通过
  C
}
console.log(List.A) // 0
console.log(List.B) // 2
console.log(List.C) // 3

3.2 接口 interface

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

需要注意接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。

interface Person {
    firstName: string;
    lastName: string;
	middleName?:string;
}

接口可以作为一个类型批注。

3.2.1 参数类型

可选参数：

在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。
如果都是可选参数就没关系。

默认参数：

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

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

剩余参数

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 … 为前缀，它将成为一个由剩余参数组成的数组，索引值从 0（包括）到 restOfName.length（不包括）。

3.3 类 class

注意类和接口可以一起共作，程序员可以自行决定抽象的级别。

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

在构造函数的参数上使用 public 等同于创建了同名的成员变量。

构造器中参数的作用域是局部变量（如果没有加public），所以编译以上文件时没有使用public，在浏览器输出错误结果显示属性不存在。

所以我们添加 public ，protected和 private 访问修饰符。Public 成员可以在任何地方访问， private 成员只允许在类中访问。protected : 受保护，可以被其自身以及其子类和父类访问。（不常用）

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

3.3.1 继承

我们可以继承一个已存在的类并创建一个派生类，继承使用关键字 extends。子类除了不能继承父类的私有成员 (方法和属性) 和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类（接口可以一次继承多个），但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

3.3.2 类和接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 

3.4 模块 Modules（类似nodejs中的概念）

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的 JavaScript 模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。

3.5 Arrow函数（类似C#的Lambda表达式，js中也有）

lambda 表达式 ()=>{something} 或 ()=>something 相当于 js 中的函数，它的好处是可以自动将函数中的 this 附加到上下文中。

在编译后的 js 文件中，我们可以看到一行 var _this = this;，这就是他的实现原理

3.6 运行ts web应用

在html中利用script的src引用编译的js文件，运行即可