TypeScript笔记（一）安装、执行、基础类型

一、TypeScript = Type + JavaScript

    在JS基础上，为JS增加了类型支持。TS属于静态类型的编程语言，在编译期间做类型检查，可以在代码编写期间发现问题，减少调试时间。

TS相比JS的优势：

1、更早的发现错误，减少调试时间；

2、代码提示；

3、提升可维护性；

4、ECMAScript；

5、TS有类型推断机制；

TS已成为大中型前端项目的首要编程语言。

二、安装编译TS的工具包

Node.js/浏览器只支持JS代码，不支持TS代码，因此需要先将TS代码转化为JS代码，然后才能运行。

npm i -g typescript

typescript 包提供tsc命令，实现TS到JS的转化。

三、执行TS文件

单步执行：

tsc hello.ts // compile ts file
node hello.ts // execute ts file

一步执行，需安装ts-node：

npm i -g ts-node
ts-node hello.ts

四、常用类型

4.1 基础

1、JS已有类型：

原始类型：number/string/boolean/null/undefined/symbol;

对象类型：object（包括数组、对象、函数等）；

2、TS新增类型：

联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any等

4.2 数组类型

let nums:number[] = [1,3,5];
let strs:Array[] = ['a','b','c'];

数组中既有number，又有string，用联合类型，用 | ：

let arr:(number|string)[] = [1,'a']

4.3 类型别名

为任意类型重命名，简化类型书写多次的问题

type CustomArr = (number | string)[]
let test: CustomArr = [123,"aaa"]
console.log(test)

4.4 函数类型

          函数名    参数列表，冒号         返回值，冒号
function addNum(num1:number, num2:number):number {
    return num1 + num2;
}

另外，也可以使用函数表达式的方式声明函数：

     函数名      参数列表，冒号       返回值，冒号  箭头标识{ 函数体 }
const add = (num1:number, num2:number):number => {
    return num1+num2  
}

无返回值：

function greet(name:string):void {
    console.log('hello'+name)
}

可选参数（?:），可选参数必须在函数列表最后：

function mySlice(start?:number, end?:number):void {
    console.log('start index ', start, 'end index ', end);
}
mySlice()

 对象类型：描述对象的结构（有什么类型的属性和方法）

let person: {name:string; age:number;sayHi():void} = {
    name:'jack',
    age:18,
    sayHi() {
        console.log('name:'+this.name)
    }
}

4.5 接口类型

当一个对象类型被多次使用时，一般会使用接口（interface）来描述对象的类型，以复用。类似type 函数别名。

interface 和 type的相同点是都可以为对象指定类型；

不同点：接口只能为对象指定类型；type不仅可以为对象指定类型，还可以为任意类型指定别名。

interface IPerson {
    name:string
    age:number
    sayHi(): void
}

type IPerson2 = {
    name:string
    age:number
    sayHi(): void
}

let person2:IPerson = {
    name:'jack',
    age:18,
    sayHi() {
        console.log('name:'+this.name)
    }
}
type NumStr = number | string

接口继承extends

interface Point2D {
  x: number;
  y: number;
}

interface Point3D extends Point2D {
  z: number;
}

  let p1:Point3D = {x: 1, y: 2, z: 3};

4.6 元组（Tuple）

确切的知道包含多少个元素，以及对应的类型。结构体？？

let position:[number, number] = [0, 0]

类型断言(as)：const aLink = document.getElementById('link') as HTMLAnchorElement

4.7 字面量类型

类似于c++中的常量。str1的类型是string，str2的类型是'hello ts'。

let str1 = 'hello ts';
const str2 = 'hello ts';

字面量类型一般和联合类型一起使用。

function changeSnakeDirection(direction:"up" | "down" | "left" | "right") {
}

4.8 枚举

enum Direction {
  Up,
  Down,
  Left,
  Right,
}
function changeDirection(direction: Direction) {
  switch (direction) {
    case Direction.Up:
      console.log("Going up");
      break;
    case Direction.Down:
      console.log("Going down");
      break;
    case Direction.Left:
      console.log("Going left");
      break;
    case Direction.Right:
      console.log("Going right");
  }
}
changeDirection(Direction.Up);

字符串枚举：

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

4.9 any类型

any 类型不推荐使用！！一些错误不会有任何提示！

隐式具有any类型的情况：1、声明变量不提供类型，也不提供默认值；2、函数参数不加类型！！

let a

function addnum(num1, num2) {
    return num1 + num2
}

4.10 typeof

获取变量类型，起到类型查询的作用。但typeof不能查询函数调用之后的类型。