TypeScript学习（第一天）

1.环境搭建

 vs创建.ts文件，原始操作：需要再node，使用tsc '文件名'.ts，编译出js文件，再通过node  '文件名'.js执行。

一般会全局安装 ts-node 一个插件 npm i -g ts-node 或者 yarn add 都行。安装完成后，再去执行会自动编译。

生成配置文件 tsc -init 。可以生成 tsconfig.json 文件。具体的配置文档可以点击下面链接去看。编译选项 · TypeScript中文网 · TypeScript——JavaScript的超集https://www.tslang.cn/docs/handbook/compiler-options.html

2.基础数据声明

// 字符串
const str: string = 'hello'
// 数字
const num: number = 1
// any
const randomData: any = 1 // any类型就是对数据不进行类型限制，都可以赋值。
// boolean
const flag: boolean = true
// 数组
const arr: Array<number> = [2, 3]
const arr1: number[] = [2, 3]
// 元组 对数组内部数据进行数据类型特定得数组
const newArr: [string, number] = ['1', 2]
// 枚举 类似于对象
enum Obj{
    name,
    age,
}
const obj:Obj = Objs.name
console.log(obj); // 0 枚举值会有一个对应得数字值，一般是0开始

enum Objs{
    name=1,
    age,
}
const objs:Objs = Obj.name
console.log(objs); // 1 这样就可以改1为开始

// void 函数没有返回值
function handle():void{
    console.log('ssss');
    // 函数没有返回值
}
// null 
const nulls:null = null
// undefined 未定义得变量默认是undfined
let undefineds:undefined;
// never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
function err():never{
    throw new  Error('ssss')
    // 一般用于抛错
}

 枚举类型一般用作对一个变量进行多种判断的逻辑，类似于定义一个特定的数据字典。实际通过下标也可以进行反推，例: 上面的Obj[1]实际就是等于'age'。一般来说ts声明变量 就是 var 变量名 ：数据类型 = 对应得值。 

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

2.复杂类型

// 联合类型 相当于 web可以是 字符串或者数字
const web:string|number = 1

// 接口 
interface Obj {
    name?: string, // 加？说明这个字段可有可没有
    age: number
   readonly sex?:string, // 只读属性
}
const obj: Obj = {
    name: '张三',
    age: 18,
    sex:'男'
}
obj.sex="女" // 这里就会报错，提示sex只能读

// 使用接口就可以对 对象内部数据类型进行定义

// 类
class Stu{
    constructor(public name:string){
       this.name = name
    }
    say():string{
     return '学'
    }
}

实际上接口在定义的时候，可以再内部加索引声明 [index: string]: number。也就是这个。作用是限制了下面字段 key的类型和value的类型。即name是字符串: number 后面需要是数字类型。

PS：类的定义和接口的定义，实际上 接口是可以继承类的 extends 关键字。刚刚开始没有深究，后面再学学。毕竟刚刚开始。

3.类型推断

let str = 'sss'

str = 1  // 再不声明类型得时候，一般数据类型ts会进行类型推断

实际再第一次给str 赋值得时候，ts推断str得数据类型为string,之后重新给str赋值1，就会报错。

4.泛型

// 泛型
function handle(arg: number): number {
    return arg;
}
// 这里很简单的看出 函数参数需要是number类型 返回值也是number类型
function handles<T>(arg: T): T {
    return arg;
}
//调用
handles<number>(123);
// 这里给T定义为number 效果一样函数参数需要是number类型 返回值也是number类型

个人理解，泛型就是灵活的类型，不再对某个模块进行固定的限制，这个也大大方便了函数封装时候，对不同数据类型处理，返回类型不同的情况。实际上次一个数据类型泛型可以有多个，通过 | 或 连接。泛型实际也可以应用于其他数据类型的定义。

function handles<T>(arg: T[]): T[] {
    console.log(arg);
    
    return arg;
}
//调用
handles<number>([123]);

今天的学习就到这里，后面继续。总感觉看文档，看的不够深刻，可能是水平不够。有资源的大佬。希望能推荐下，在哪里可以学习下。感谢