TypeScript介绍-一一网

一、介绍

官网简介：TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。

详细介绍：TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

二、安装

npm install -g typescript

npm install -g ts-node

三、优势

TypeScript不会阻止JavaScript的运行
编辑器提示，开发过程中就有错误提示，及时发现潜在的问题
代码可读性、健壮性提高，增强了可维护性
应用场景：组件、接口传参/获取数据，避免少传、多传、传错数据类型

四、语法

4.1 静态类型

4.1.1 基础类型

基础类型：null、undefined、 symbol、boolean、void、number、string、never、any

// 基础类型：null, undefined, symbol, boolean, void，number，string，any
let names: string = "jack";
let age: number = 13;
let flag: boolean = true;
let grade: void = undefined;

let x: any = 1;    // 数字类型
x = 'test';    // 字符串类型
x = false;    // 布尔类型
never类型表示的是那些永不存在的值的类型。

例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。

即使 any也不可以赋值给never。

// 基础类型:never

let y: never;
let z: number;

// 运行错误，数字类型不能转为 never 类型
y = 123;

// 运行正确，never 类型可以赋值给 never类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}
复制代码

4.1.2 对象类型

对象类型：[]、{}、Class、function

// 对象类型：[]、{}、Class、function

class Person {}
const student: { name: string; age: number; } = { name: 'hua', age: 18 };
const numbers: number[] = [1, 2, 3];
const strs: string[] = ['1', '2', '3'];
const xiaoming: Person = new Person();
const getTotal: () => number = () => {
    return 123;
};
复制代码

4.1.3 元组

元组：数组中存储的元素数据类型不同，则需要使用元组

// 数组
const arr: (number | string)[] = [1, '2', 3];
const stringArr: string[] = ['a', 'b', 'c'];
const undefinedArr: undefined[] = [undefined];

// 元组 tuple
const teacherInfo: [string, string, number] = ['Dell', 'male', 18];
// csv
const teacherList: [string, string, number][] = [['dell', 'male', 19], ['sun', 'female', 26], ['jeny', 'female', 38]];
复制代码

4.2 类型注解、类型推断、类型断言

4.2.1 类型注解、类型推断

类型注解（type annotation）：为一个变量指定类型，鼠标移到变量上，会浮现类型注解。

类型推断（type inference）：不添加类型注解，ts也能推断出变量是什么类型，根据变量值倒推变量类型。

// 类型注解和类型推断
let count: number = 123;
let countInference = 123;

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

interface Person {
    name: 'string';
}
const rawData = '{"name": "xiaoming"}';
const newData: Person = JSON.parse(rawData);

let temp: number | string = 123;
temp = '456';
函数相关类型

// 函数相关类型
let temp: number | string = 123;
temp = '456';

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

function sayHello(): void {
    console.log('hello');
}

function errorEmitter(): never {
    while(true) {}
}

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

function getNumber({ first }: { first: number }) {
    return first;
}

const total2 = add2({ first: 1, second: 2 });
const count2 = getNumber({ first: 1 });
复制代码

4.2.2 类型断言

类型断言：对类型进行选择

// 类型断言
interface IDog {
    name: 'wang',
    age: 1,
    bark: () => { }
}

interface ICat {
    name: 'miao',
    age: 1,
    miao: () => { }
}

function func(animal: IDog | ICat) {
    if ((<IDog>animal).bark) {
        return (<IDog>animal).bark();
      } else {
        return (<ICat>animal).miao();
      }
}

function func2(animal: IDog | ICat) {
    if (animal as IDog) {
        return (animal as IDog).bark();
    } else {
        return (animal as ICat).miao();
    }
}
复制代码

4.3 Interface接口和type别名

4.3.1 interface接口

接口（interface）：封装参数，用对象格式定义数据（interface 和 type 相类似，但并不完全一致）

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
接口继承：Typescript 允许接口继承多个接口，继承使用关键字 extends

// 继承
interface Person { 
    age:number 
 } 
  
interface XiaoMing extends Person { 
    interest: string 
}

// 多继承实例
interface IFather { 
    v1:number 
} 
 
interface IMonther { 
    v2:number 
} 
 
interface Child extends IFather, IMonther { }

#### 4.3.2 type别名
type别名（type alias）：封装参数，可以不用对象格式定义数据



//声明一个type
type Alice = {
	name : string,
	age ： number
}
//使用这个type
const alice : Aclice = {
	name : '小明',
	age : 18
}

type Name = string;
const name: Name = 'xiaoming';
复制代码

4.3.3 interface接口和type别名区别

type可以声明基本类型别名、联合类型、元组等类型

type 语句中还可以使用 typeof 获取实例的类型进行赋值

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
 wong();
}
interface Cat {
 miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]


// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div
      3.interface 能够声明合并

interface User {
 name: string
 age: number
}

interface User {
 sex: string
}

/*
User 接口为 {
 name: string
 age: number
 sex: string 
}
*/
复制代码

4.4 联合类型

联合类型（Union Types）：可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值

// 联合类型
var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)


// case2
interface IFather { 
    v1:number 
} 
 
interface IMonther { 
    v2:number 
} 
const person:IFather | IMonther = {v1: 12};
复制代码

4.5 Enum 枚举类型

枚举：对 js 标准数据类型的补充，声明一组带名字的常量

enum Status {
    OFFLINE = 1,
    ONLINE,
    DELETED
}

console.log(Status.OFFLINE, Status[0]);

// const Status = {
//     OFFLINE: 0,
//     ONLINE: 1,
//     DELETED: 2
// }

// function getResult(status) {
//     if (status === Status.OFFLINE) {
//     return 'offline';
//     } else if (status === Status.ONLINE) {
//         return 'online';
//     } else if (status === Status.DELETED) {
//         return 'deleted';
//     }
//     return 'error';
// }
复制代码

4.6 泛型

泛型：generic 泛指的类型

// 泛型 generic 泛指的类型

function join<T, P>(first: T, second: P) {
    return `${first}${second}`;
}

function anotherJoin<T>(first: T, second: T): T {
    return first;
}

// T[]
function map<T>(params: Array<T>) {
    return params;
}

// join<number, string>(1, '1');
// map<string>(['123']);
join(1, '1');
复制代码