乐趣区

关于前端:typescript-基础知识整理

jiezi

一. 根底类型

Never:

  1. 抛出异样
  2. 无返回值的函数表达式

🌰

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

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

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

void:
通常用于示意函数无返回值

🌰

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

一般数组类型定义：
number[]

数组泛型：
Array<number>

元祖类型（Tuple）：
示意一个已知元素数量和类型的数组

🌰

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

枚举类型：
枚举类型提供的一个便当是你能够由枚举的值得到它的名字。例如咱们晓得数值，然而不确定它映射到哪个名字，咱们能够查找相应的名字

🌰

// 默认状况下，从 0 开始为元素编号; 也能够手动的指定成员的数值 
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

类型断言：没有运行时的影响，只是在编译阶段起作用
通过类型断言能够通知编译器，我晓得以后类型是什么（TypeScript 会假如你曾经进行了必须的查看）
两种表达形式：

  1. “尖括号”语法

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

  2. as 语法

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

其余常见根底类型有：
object: 非原始类型
any: 任何类型
boolean: 布尔值
number: 数字类型
string: 字符串类型
Null 和 Undefined

二. 接口
接口是如何工作的：
类型查看器会查看接口的调用，编译器只会查看那些必须的属性是否存在，并且其类型是否匹配

只读属性：
只能在对象刚刚创立的时候批改其值
(初始化对象值后再进行赋值会报错 error)

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

TypeScript 具备 ReadonlyArray<T> 类型，确保数组创立后再也不能被批改
** 只读属性也不可赋值给其余类型
🌰

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
a = ro; // error!
// 可用类型断言
a = ro as number[];

函数类型：

// 定义
interface SearchFunc {(source: string, subString: string): boolean;
}

函数的参数会一一进行查看，要求对应地位上的参数类型是兼容的
对于函数类型的类型查看来说，函数的参数名不须要与接口里定义的名字相匹配

// 应用
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {let result = src.search(sub);
  return result > -1;
}

索引类型：
暂无

三. 泛型
应用 类型变量 T(泛型参数名能够应用任意名) 示意泛型

// T 帮忙咱们捕捉用户传入的类型以及返回类型
function identity<T>(arg: T): T {return arg;}

能够用两种办法应用:

  1. 传入所有的参数，蕴含类型参数

    // 明确的指定了 T 是 string 类型，并做为一个参数传给函数，应用了 <>
let output = identity<string>("myString");  // type of output will be 'string'

  2. 利用了类型推论 — 即编译器会依据传入的参数主动地帮忙咱们确定 T 的类型

    // 不应用尖括号（<>）来明确地传入类型, 编译器能够查看 myString 的值，而后把 T 设置为它的类型
let output = identity("myString");  // type of output will be 'string'

    注：如果编译器没有主动地推断出类型，只能明确的传入 T 的类型

泛型变量：
在函数体必须正确的应用这个通用的类型变量

function loggingIdentity<T>(arg: T): T {console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}
// 泛型束缚
function loggingIdentity<T>(arg: T[]): T[] {  // T[] 可示意为 Array<T>
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

定义泛型接口：

interface GenericIdentityFn {<T>(arg: T): T;
}
function identity<T>(arg: T): T {return arg;}
let myIdentity: GenericIdentityFn = identity;
// 明确泛型类型
let myIdentity: GenericIdentityFn<number> = identity;

泛型类：

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) {return x + y;};

泛型束缚：
须要列出对于 T 的束缚要求, 定义一个接口来形容约束条件

interface Lengthwise {length: number;}

function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}
退出移动版