TypeScrit入门

1.基础类型

1.布尔值

let flag:boolean = false;

2.数字

let num:number = 12;

3.字符串

let name = "wang"
let hello: string = `Hello, my name is ${ name }`;

4.数组
第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组

let list: number[] = [1, 2, 3];

第二种方式是使用数组泛型，Array<元素类型>

let list: Array<number> = [1, 2, 3];

5.元组 Tuple
定义一对值分别为 string和number类型的元组

let x: [string, number];

6.枚举
enum类型是对JavaScript标准数据类型的一个补充

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

7.Any

let list: any[] = [1, true, "free"];

8.Void
声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

let unusable: void = undefined;

9.Null 和 Undefined
TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大：

let u: undefined = undefined;
let n: null = null;

10.Never
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。

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

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

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

11.Object
object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
使用object类型，就可以更好的表示像Object.create这样的API。例如：

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

12.类型断言

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

当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

2.变量声明

1.let 声明

let hello = "Hello!";

2.const 声明

const numLivesForCat = 9;

3.解构

//解构数组
let input = [1, 2];
let [first, second] = input;
//你可以在数组里使用...语法创建剩余变量：
let [first, ...rest] = [1, 2, 3, 4];

//对象解构
let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;
//属性重命名
let { a: newName1, b: newName2 } = o;
//默认值
function keepWholeObject(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
}

4.函数声明

type C = { a: string, b?: number }
function f({ a, b }: C): void {
    // ...
}

5.展开

let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };

对象展开仅包含对象 自身的可枚举属性,其次，TypeScript编译器不允许展开泛型函数上的类型参数

3.接口

1.可选属性

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

2.只读属性

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

3.额外的属性检查

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}

let mySquare = createSquare({ colour: "red", width: 100 });

TypeScript会认为这段代码可能存在bug.如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。
绕开这些检查非常简单。 最简便的方法是使用类型断言：

let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

然而，最佳的方式是能够添加一个字符串索引签名，前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

4.函数类型
接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。

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

函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。
函数的返回值类型是通过其返回值推断出来的（此例是 false和true）。 如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

5.可索引的类型

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

TypeScript支持两种索引签名：字符串和数字。
字符串索引签名能够很好的描述dictionary模式，并且它们也会确保所有属性与其返回值类型相匹配
你可以将索引签名设置为只读

5.类类型
1.实现接口

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

2.类静态部分与实例部分的区别
当一个类实现了一个接口时，只对其实例部分进行类型检查。 constructor存在于类的静态部分，所以不在检查的范围内。

5. 继承接口
和类一样，接口也可以相互继承
一个接口可以继承多个接口，创建出多个接口的合成接口。

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

来源 https://www.tslang.cn/docs/handbook/declaration-files/by-example.html