即将2025年了，我还不会TS掘金第一篇，写给自己和想进步的你！边学边记，肯定有戏。 1、 TypeScript 是什

掘金第一篇，写给自己和想进步的你！

边学边记，肯定有戏。

1、 TypeScript 是什么？

TypeScript是由微软开发的一种开源的强类型编程语言
TypeScript本质上是对JavaScript语言的扩展，是后者的超集
在编译阶段即可进行类型检查，支持更多的语法提示
vue,react,angular主流框架源码或者业务代码都支持用TypeScript编写

ts超集.png

2、安装和编译

2.1 安装

npm install -g typescript

2.2 查看版本

tsc -V

2.3 编译

tsc demo.ts

会得到一对应的js文件 demo.js

3、基础类型

3.1 Boolean

const isOk: boolean = true;

3.2 Number

let count: number = 55;

3.3 String

let name: string = "hcy";

3.4 Array

TypeScript像JavaScript一样可以操作数组元素。有两种方式可以定义数组。第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

let list: Array<number> = [5,6,7];

第二种方式是使用数组泛型，Array<元素类型>：

let list: number[] = [7,8,9];

3.5 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let arr: [string, number] = ['你好', 999];

3.6 Enum

enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

enum Gerder {
    GIRL,
    BOY
}
console.log(`小明是${Gerder.BOY}`)

默认情况下，从0开始为元素编号。

enum Color {
    Blue,
    Red,
    Pink
}
let color: Color = Color.Blue
console.log(color) // 0

你也可以手动的指定成员的数值。

enum Color {
    Blue=6,
    Red,
    Pink=5
}
let color: Color = Color.Blue
console.log(color) // 6

反之，我们也可以通过值来获取对应的名字

let cName: string = Color[5]
console.log(cName) // Pink

3.7 Any

当类型不能明确时，或者结构复杂难以定义类型时，any可以赋值任意类型

let value: any = 5
value = '明天是个好天气'
value = false

const list: any = [1, 'hello', true]

3.8 Null 和 Undefined

undefined和null两者各自有自己的类型分别叫做undefined和null

let u: undefined = undefined
let n: null = null

3.9 Void

void类型像是与any类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：

function warnUser(): void {
    console.log("This is my warning message");
}

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

let u: void = undefined
let s: void = null // 严格模式只能赋值undefined

3.10 Never

never类型表示的是那些永不存在的值的类型。例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

never和void的区别：

void 可以被赋值为 null 和 undefined的类型。 never 则是一个不包含值的类型。
拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回，无法终止，或会抛出异常。

3.11 Symbols

symbol类型是es2015新增的原生类型，symbol类型的值是通过Symbol构造函数创建的。

let syb: symbol = Symbol()

Symbols是不可改变且唯一的。

let syb: symbol = Symbol(1)
let syb1: symbol = Symbol(1)
console.log(syb === syb1) // false

像字符串一样，symbols也可以被用做对象属性的键。

const sy: symbol = Symbol()
let obj = {
    [sy]: 1
}
console.log(obj[sy]) // 1

Symbols也可以与计算出的属性名声明相结合来声明对象的属性和类成员。

const classSymbol = Symbol()
class C {
    [classSymbol]() {
        return 'The early bird catches the worm!'
    }
}
let c = new C()
console.log(c[classSymbol]())

3.12 BigInt

使用 BigInt 可以安全地存储和操作大整数
我们在使用 BigInt 的时候，必须添加 ESNext 的编译辅助库
要使用1n需要 "target": "ESNext"
Number 和 BigInt类型不一样，不兼容

const max = Number.MAX_SAFE_INTEGER
console.log(max+1 === max+2) // true

const max = BigInt(Number.MAX_SAFE_INTEGER)
console.log(max+1n === max+2n) // false

3.13 类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式。其一是“尖括号”语法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

另一种为 as 语法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

两种形式是等价的。至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

4. 函数

4.1 函数的定义

参数类型和返回类型
function getName(name: string): string {
    return name
}
getName('hancy')
没有返回值
function getName(name: string): void {}
getName('hancy')

4.2 函数表达式

type FN = (chars: string, nums: number) => string;
let fn: FN = function(name, id) {
  return name + id;
}
fn('hancy', 18)

4.3 可选参数

let fn = function(name:string, id?:number) {
  return name + id;
}
fn('hancy')

4.4 参数默认值

let fn = function(name:string='hancy') {
  return name;
}
fn()

4.5 剩余参数

function push(array: any[], ...items: number[]) {
    items.forEach(function (item) {
        array.push(item);
    });
}
let arr: any = [];
push(arr, 1, 2, 3);

4.6 函数重载

是指给同一个函数提供多种类型（参数类型，返回值类型等），已实现相应逻辑

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: string, b: number): string;
function add(a: number, b: string): void;
function add(a: any, b: any) {
    if (typeof a === 'string' || typeof b === 'string') {
        return a.toString() + b.toString();
    }
    return a + b;
}
const result = add('明天', '是个好天气');
console.log(result);

即将2025年了，我还不会TS