TypeScrip

TypeScript强调了两个重要的特性--类型系统、适用于任何规模的项目

1、TypeScript

从名字就可以看出来，类型是其核心的特性。

我们知道，JavaScript是一门非常灵活的编程语言,他有以下一些特点:

• 没有类型约束，一个变量可以初始化是字符串，又可以转换为其他类型
• 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定
• 基于原型的面向对象编程
• 函数是JS中的一等公民，可以赋值给变量，也可以当做参数或返回值

JS灵活性使得JS蓬勃发展，但是代码质量参差不齐，维护成本高，运行时错误多。

TypeScript的类型系统，在很大程度上弥补了JS的缺点。

TypeScript是静态类型、弱类型

1.  静态类型是指编译阶段就能知道变量的类型，在编译阶段就会进行类型检查，所以在编译阶段就会报错。动态类型可能就是在运行的时候才会报错。
2. 弱类型是指【允许隐式类型转换】，如下

console.log(1 + '1');
// 打印出字符串 '11'

2、原始数据类型

        原始数据类型包括：布尔值、数值、字符串、null、undefined 以及ES6中的新类型Symbol和ES10中的新类型BigInt。

//1、boolean类型
let isDone: boolean = false;
// es6 let isDone = false;

//2、number类型
let age:number = 18;
// es6 let age = 18;

//3、string类型
let str:string = 'Hellen';
// es6 let str = 'Hellen';

//4、空值
let unusable: void = undefined;

//5、Null和Undefined
let u: undefined = undefined;
let n: null = null;

2、任意值

•  如果是普通类型，在赋值过程中改变类型是不被允许的。例如如下会报错

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

//error

• 可以使用any类型，则允许被赋值为任意类型

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

• 未申明类型的变量，默认为any类型

let something;
something = 'seven';
something = 7;

3、联合类型

        使用|分隔类型，意思允许这些类型，但是不允许其他类型。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

4、数组类型

有三种定义方式：

•  表示方法：类型[]，不允许出现其他类型

let fibonacci: number[] = [1, 1, 2, 3, 5];

• 数组泛型

let fibonacci: Array = [1, 1, 2, 3, 5];

• 接口表示数组 

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

• 类数组

  arguments 实际上是一个类数组，不能用普通的数组的方式来描述，而应该用接口：

interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

function sum() {
    let args: IArguments = arguments;
}

• any在数组中的应用

let list: any[] = ['npm8', 25, { website: 'https://npm8.com' }];

5、函数类型

        JS有两种常见的定义函数的方式：函数声明和函数表达式

// 函数声明（Function Declaration）
function sum(x, y) {
    return x + y;
}

// 函数表达式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

        在JS中对他的类型进行约束：

function sum(x: number, y: number): number {
    return x + y;
}

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

6、类型推论

let num = 123

         以上没有显式申明变量类型，但是鼠标放在num上，会发现TS自动把变量类型推断为number类型。

7、类型断言

        当变量类型是确定的时候，可以使用断言，断言的方式有两种：

• <>和as

let some:any = 'Hellen';
//<>
let strLen:number = ( some).length

//as
let strLen:number = (some as string).length

        类型断言的常见用途就是:

• 将一个联合类型断言为其中的一个类型。

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
    //1.error
    //if(typeof animal.swim == function)

    //2.解决
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

 

参考文章：

1. 什么是TypeScript · TypeScript开发手册TypeScript入门教程|TypeScript开发手册|TypeScript介绍https://ts.npm8.com/part/introduction/what-is-ts.html

TypeScript 学废了 - 掘金项目开发中基本离不开 TypeScript 来规范 JS 的类型，这篇文章主要总结 TypeScript 的基本知识。(没有 TypeScript 的项目就像奶茶里没有奶，哈哈哈~https://juejin.cn/post/7025256684947767332