TS 快速入门，正确姿势

目录：新手入门，基础实践，将每一步的类型和定义写一遍！

1、什么是TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

2、TypeScript 官网

传送门：typeScript官网

3、搭建TypeScript

NPM全局安装 ts

使用：npm install -g typescript

查看ts 安装的版本

使用 tsc -v 命令

生成 tsconfig.json 配置文件

tsc --init ​

新建index.ts文件测试

在控制台输入 tsc index.ts 命令，就会多生成一个js文件
命令：tsc index.ts

	const t: String = '要成功，先发疯，头脑简单往前冲！'
	console.log(t,'-----t----')

打印index.js的输出结果，执行下面命令

输入命令：nodex indx.js

开启一个.ts文件的实时监听模式，执行下面命令

tsc index.ts -w // 表示只要保存文件就自动执行当前文件

4、TypeScript 基础类型

js的数据类型

number 、string、 null 、 undefined、 boolean、 object、 function、 array

ts新增的数据类型

any任意类型 enum 枚举 联合类型 字面量类型 unknown void

类型

声明一个变量B，同时指定它的类型

	// Boolean 类型
	const B: boolean = true;
	// Number 类型
	const N: Number = 1;
	// String 类型
	const S: String = '1'

函数声明

定义类型：
1、any // any类型，则允许被赋值为任意类型
2、void // void类型(空值)，表示没有任何返回值的函数
3、Interfaces // 接口定义类型

	let 变量: 类型;
	let 变量: 类型 = 值;
	function fn(参数: 类型, 参数: 类型): 类型{
	    ...
	}

a、 任意值 [let str:string;]: 如果是一个普通类型，在赋值过程中改变类型是不被允许的，任意值（Any）用来表示允许赋值为任意类型
    str = '123'

b、 联合类型 [let str: string | number;]: 表示取值可以为多种类型中的一种
    str = '123'
    str = 123

c、 数组类型的定义 [let arr: number[]]: 简单的方法是使用「类型 + 方括号」来表示数组：
    arr = [1,2,3]

d、 接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等

e、 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

    `泛型变量T` T表示任何类型
    说明：`泛型的语法是尖括号 <> 里写类型参数，一般可以用T来表示`

    示例1：
      // let swap = ('1',2)
      function swap<T, U>(tuple: [T, U]): [U, T]{
        return [tuple[1], tuple[0]]
      }
      function swap(tuple) {
        return [tuple[1], tuple[0]]
      }

    示例2：
    let arr:Array<number> =[1,2,3];
    // 定义多个类型
    let arr:Array<number|string> =['1',2,3];

f、 对象的类型—接口 // 可选属性：任意属性 ：一个接口允许有任意的属性
    在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象
    接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。
    接口的定义：
    `接口首字母大写`
    interface IPerson {
      name: string;
      age: number;
    }
    let tom: Person = {
      name: 'Tom',
      age: 18
    };

  f-1、`可选属性`
    interface Person2 {
      name: string;
      age?: number; // 表示为：可选属性
    }
  f-2、`任意属性`
    interface Person3 {
      name: string;
      age?: number;
      [propName: string]: any; // 表示为：任意属性
    };
    `需要注意的是，一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性`
    interface Person4 {
      name: string;
      age?: number;
      [propName: string]: any;
    };

g、函数的类型定义

  `一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到`
  function sum1(x: number, y: number): number {
    return x + y;
  }

  `参数默认值定义`
  function sum3(x: number=5, y: number): number {
    return x + y;
  }
  let s1 = sum3(1, 2);

  `可选参数`
  function sum4(x: number, y?: number): number[] {
    return [x,y]
  }
  let s2 = sum4(1);

5、定义枚举类型

Enum 枚举

// 字符串枚举
    enum Color {
		RED = "红色1号",
		PINK = "粉色2号",
		BLUE = "蓝色3号",
   }
       
	const pink: Color = Color.PINK;
	console.log(pink); // 粉色2号
	

常量枚举

// 常量枚举
	const enum Color1 {
		RED,
		PINK,
		BLUE,
	}
	 
	const color1: Color1[] = [Color1.RED, Color1.PINK, Color1.BLUE];
	console.log(color1); //[0, 1, 2]
	 
	//编译之后的js如下：
	var color = [0 /* RED */, 1 /* PINK */, 2 /* BLUE */];
	// 可以看到我们的枚举并没有被编译成js代码 只是把color这个数组变量编译出来了

在项目中，常见的interface类（class）

`接口首字母大写`
   interface IPerson {
     name: string;
     age: number;
   }
   let tom: Person = {
     name: 'Tom',
     age: 18
   };

总结：

前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。

— 关注我：前端路上不迷路 —