TS 基础掌握

00. TS 优势

JS 的超集，具有更好的错误提示、更好的语法提示、类型约束（不易出错且语义化）

01. 初体验

观察输入 data. 会有对应的属性提示

function demo(data: { x: number; y: number }) {
    return Math.sqrt(data.x ** 2 + data.y ** 2);
}
const r = demo({ x: 3, y: 4 });

console.log(r);

使用类型别名优化上面代码

type Point = { x: number; y: number };

function demo(data: Point) {
    return Math.sqrt(data.x ** 2 + data.y ** 2);
}
const r = demo({ x: 3, y: 4 });

console.log(r);

使用接口优化上面代码

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

function demo(data: Point) {
    return Math.sqrt(data.x ** 2 + data.y ** 2);
}
const r = demo({ x: 3, y: 4 });

console.log(r);

02. 运行 TS

配置 VSCode，搜索 quote 、 tab、save

tsc demo.ts
node demo.js
# or
npm i ts-node -g
ts-node demo.ts

03. 理解 TS 静态类型

类型一旦定义就不能修改，其上的属性和方法也已确定了

let count: number = 666;
count = '六六六'; // Type '"六六六"' is not assignable to type 'number'

当输入 count. 的时候下面就会出现和 count 这个类型相关属性和方法的提示

let count: number = 666;
count.toString();

04. 定义基础类型

const num: number = 18;

05. 定义复杂类型

对象类型，冒号后面是类型定义，等号后面是类型实现

// 注意这里不要 const teacher: object = { name: 'ifer' }，这样使用 teacher 的时候不具有提示
const teacher: { name: string; age: number; } = {
    name: 'xxx',
    age: 18
};

可以使用 interface 或 type 优化上面的操作

// type Teacher = { name: string; age: number };
// const teacher: Teacher = { name: 'xxx', age: 18 };

interface Teacher { name: string; age: number; }
const teacher: Teacher = { name: 'xxx', age: 18, };

定义数组

// numbers 是一个数组，数组里面的每一项是 number 类型
const numbers: number[] = [1, 2, 3];

定义实例对象类型

class Person {}
// xxx 必须是 Person 类对应的实例对象
const xxx: Person = new Person();

定义函数类型

const getTotal: () => number = () => 888;
// 当然直接下面的写法 getTotal 也会进行类型推断
const getTotal = () => 888;

06. 类型注解

类型注解：明确告诉 TS 变量是什么类型

// 声明和赋值一起时会具备类型推断
let count1 = 123;

// 声明和赋值不一起时就要进行类型注解了，不然后面输入 count1. 的时候则不会有相关属性和方法的提示
let count1: number;
count1 = 123;

interface Person { name: string; }
const rawData = '{ "name": "xxx" }';
// 使用 JSON.parse 时也需要进行类型注解，不然 newData 会是 any 类型，再使用 newData 时也就没有了相关属性的提示
const newData:Person = JSON.parse(rawData);

07. 类型推断

TS 会自动的分析类型，其实若 TS 能自动推断出类型，就没有必要进行类型注解了，例如下面求和的例子：

const firstNumber = 1;
const secondNumber = 2;
const res = firstNumber + secondNumber;

// 形参这里就需要类型注解了，不然 firstNumber 会推断出 any 类型
function getTotal(firstNumber: number, secondNumber: number) {
    return firstNumber + secondNumber;
}
// total 这里会自动进行类型推荐，则无需注解
const total = getTotal(1, 2);

08. 函数类型

function add(first: number, second: number): number {
    // 求两个数之和，这里建议明确写返回值是 number，不然下面一不小心写错的代码也能通过
    // return first + second + '';
    return first + second;
}
// const total: number = add(1, 2); // 如果没有对上面函数的返回值进行注解的话，通过这种方式也能看到错误，最好的方式还是对返回值进行注解
const total = add(1, 2);

关于 never 类型，代表永远不可能执行到最后，例如最后的 console 永远都不会执行

function error(): never {
    throw new Error('error');
    console.log('hello world');
}

function error(): never {
    while(true) {}
    console.log('hello world');
}

函数参数解构时如何进行类型注解呢？

function add({ first, second }: { first: number, second: number }): number {
    return first + second;
}
const total = add({ first: 1, second: 2});
console.log(total);

当然也可以用 type 和 interface 优化上面的代码

// type AddParams = { first: number; second: number };

interface AddParams {
    first: number;
    second: number;
}

function add({ first, second }: AddParams): number {
    return first + second;
}

09. 数组/元组