原生TypeScript

TypeScript

1. 基础类型

(1) 布尔值: 
let isDone: boolean = false;

(2) 数字（支持二进制和八进制字面量）:
let age: number = 10; 

(3) 字符串:
let newName: string = "小红帽"; 
newName = "小红";
let sentence: string = `Hello, my name is ${ newName }.`  //模版字符串

(4) 数组:
//  <T>捕获用户传入的类型
let list: number[] = [1, 2, 3];
let newList: Array<number> = [1, 2, 3];  //数组泛型,Array<元素类型>

(5) 元组 Tuple:
// 允许表示一个已知元素数量和类型的数组，各元素的类型不必相同（不可变数组）。
let arr: [string, number];
arr = ["小红帽", 5];

(6) 枚举 Enum:
// 为一组数值赋予友好的名字
enum Color { Red, Green, Blue }
let e: Color = Color.Green; 
type OtherColor = 'red' | 'green' | 'blue';  //代替enum Color { Red, Green, Blue }

(7) 所有类型 Any:
// 为还不清楚类型的变量指定一个类型（object作用相同）
let notSure: any = 4;

(8) 相反值 Void:
// void类型像是与any类型相反，它表示没有任何类型（无返回值）。
function warnUser(): void {
    console.log("This is my warning message");
}
let unusable: void = undefined;

(9) Null 和 Undefined:
// 和void相似，它们的本身的类型用处不是很大。
let u: undefined = undefined;
let n: null = null;

(10) Never:
// 表示的是那些永不存在的值的类型
// 返回never的函数必须存在无法达到的终点（never类型是任何类型的子类型，也可以赋值给任何类型）
function error(message: string): never { 
    throw new Error(message);  //抛异常
}

(11) Object:
// 表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
declare function create(o: object | null): void;

(12) 类型断言（两种形式）:
// 通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。
let someValue: any = "this is a string";
其一是“尖括号”语法：
let strLength: number = (<string>someValue).length;
另一个为as语法：
let strLength: number = (someValue as string).length;

2. 接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查

(1) 可选属性:
interface SquareConfig {  //?
  color?: string;
  width?: number;
}

(2) 只读属性:
interface Point {  //readonly 
    readonly x: number;
    readonly y: number;
}

(3) 函数类型:
interface SearchFunc {
  (source: string, subString: string): boolean;
}
const myAdd = function (x: number, y: number): number { return x + y; };
const myAdd1 = (x: number, y: number) => x + y; 

(4) 可索引的类型:
interface StringArray {
  [index: number]: string;
}

// 类型属性 Readonly<>转换类型
type SymbolCollectionProps = Readonly<{  
    symbols: string;
    onChangePrice: (symbolId: string, price: number) => void;
    onRemoveSymbol: (symbolId: string) => void;
}>;