TS学习笔记

// 注意

// 非严格模式下 null 和 undefined 是所有类型的子类型，就是说你可以把 null 和 undefined 赋值给其他类型。

// 虽然 number 和 bigint 都表示数字，但是这两个类型不兼容

let str: string = "SakuraSnow";

let num: number = 16;

let bool: boolean = true;

let u: undefined = undefined;

let n: null = null;

let big: bigint = 100n;

let sym: symbol = Symbol("snow");

// 定义一个 type

type User = {

    name: string,

    age: number

}

// 使用这个 type

let user: User = {

    name: "Sakura",

    age: 16

}

// 小 object

let lowerCaseObject: object;

lowerCaseObject = 1; // ts(2322)

lowerCaseObject = 'a'; // ts(2322)

lowerCaseObject = true; // ts(2322)

lowerCaseObject = null; // ts(2322)

lowerCaseObject = undefined; // ts(2322)

lowerCaseObject = {}; // ok

// 大 object

let upperCaseObject: Object;

upperCaseObject = 1; // ok

upperCaseObject = 'a'; // ok

upperCaseObject = true; // ok

upperCaseObject = null; // ts(2322)

upperCaseObject = undefined; // ts(2322)

upperCaseObject = {}; // ok

// 空对象

let ObjectLiteral: {};

ObjectLiteral = 1; // ok

ObjectLiteral = 'a'; // ok

ObjectLiteral = true; // ok

ObjectLiteral = null; // ts(2322)

ObjectLiteral = undefined; // ts(2322)

ObjectLiteral = {}; // ok。

type isLowerCaseObjectExtendsUpperCaseObject = object extends Object ? true : false; // true

type isUpperCaseObjectExtendsLowerCaseObject = Object extends object ? true : false; // true

upperCaseObject = lowerCaseObject; // ok

lowerCaseObject = upperCaseObject; // ok

// 两种定义方式

let arr: string[] = ["1","2"];

let arr: Array<string> = ["1","2"];

let arr: (number | string)[] = ["1", 2];

// 函数声明

function sum(x: number, y: number): number {

    return x + y;

}

// 函数表达式

let sum: (x: number, y: number) => number = function (x: number, y: number): number {

    return x + y;

};

// 使用接口定义函数

interface SumFunc {

   (x: number, y: number): number;

}

// 可选参数

// 注意：可选参数后面不允许再出现必需参数

function buildName(firstName: string, lastName?: string) {

    return lastName ? `${firstName} ${lastName}` : firstName;

}

buildName('Sakura', 'Snow');

buildName('Sakura');

// 参数默认值

function buildName(firstName: string, lastName: string = "Snow") {

    return `${firstName} ${lastName}`;

}

// 剩余参数

function push<T>(array: Array<T>, ...items: Array<T>): Array<T> {

    items.forEach((item: T) => array.push(item));

    return array;

}

let a: Array<number> = [];

push<number>(a, 1, 2, 3);

// 提供函数类型的定义

function add(x: number, y: number): number;

function add(x: string, y: string): string;

// 实现函数

function add(x, y) {

    return x + y;

}

// 不报错

let num: number = add(1,2);

let str: string = add("Sakura", "Snow");

// 报错

let count: number = add("Sakura", "Snow");

// 普通元组

type Info = [string, number];

let info: Info = ["Sakura", 16]; // ok

let info: Info = ["Sakura"]; // Error

// 带可选参数的元组

type Tuple = [string, number?];

let tuple: Tuple = ["Sakura", 16]; // ok

let tuple: Tuple = ["Sakura"]; // ok

let tuple: Tuple = [16]; // Error

type Point = [number, number?, number?];

const x: Point = [10]; // 一维坐标点

const xy: Point = [10, 20]; // 二维坐标点

const xyz: Point = [10, 20, 10]; // 三维坐标点

// 带剩余元素的元组

// 元组类型里最后一个元素可以是剩余元素，形式为 ...X，这里 X 是数组类型。剩余元素代表元组类型是开放的，可以有零个或多个额外的元素。 例如，[number, ...string []] 表示带有一个 number 元素和任意数量 string 类型元素的元组类型。

type RestTupleType = [number, ...string[]];

let restTuple: RestTupleType = [666, "Semlinker", "Kakuqo", "Lolo"];

let a: void; 

let b: number = a; // Error

// 值得注意的是，方法没有返回值将得到 undefined，但是我们需要定义成 void 类型，而不是 undefined 类型。

function fun(): void {

    console.log("this is TypeScript");

}

// Function returning never must not have a reachable end point

function error(message: string): never {

    throw new Error(message);

}

// Inferred return type is never

function fail() {

    return error("Something failed");

}

// Function returning never must not have a reachable end point

function infiniteLoop(): never {

    while (true) {}

}

// 可以利用 never 类型的特性来实现全面性检查

function foo(data : number|string) {

    if (typeof data === "number") {

        // ... 

    } else if (typeof data === "string") {

        // ...

    } else {

        let rua = data;

        // Property 'name' does not exist on type 'never'.

        console.log(rua.name)

    }

}

function foo() : any {

    return null;

}

//ts 不会报错

// 只有运行时才会报错

console.log(foo().data);

function foo(): string | number {

    if (Math.random() < 0.5) {

        return 0;

    } else {

        return ""

    }

}

let data: unknown = foo();

let num = 10;

// 如果不缩小类型，就无法对 unknown 类型执行任何操作

// 这种机制起到了很强的预防性，更安全，这就要求我们必须缩小类型，我们可以使用 typeof、类型断言等方式来缩小未知范围

if (typeof data === "number") {

    let sum = num + data;

    console.log(sum);

}

let num: number;

let Num: Number;

Num = num; // ok

num = Num; //ts (2322) 报错

// 分别为字符串，数字，布尔字面量类型

let specifiedStr: 'this is string' = 'this is string'; // 类型是 'this is string'

let specifiedNum: 1 = 1; // 类型是 1

let specifiedBoolean: true = true; // 类型就是 true

// 子类型

let str: string = 'any string';

specifiedStr = str; //ts (2322) 类型 '"string"' 不能赋值给类型 'this is string'

str = specifiedStr; // ok

// 一个元素只能为 1 2 3 的数组

let arr: Array<1 | 2 | 3> = [1, 2, 3]

// 表明 myFavoriteNumber 为 string 或者 number

let myFavoriteNumber

myFavoriteNumber: string | number;

myFavoriteNumber = 'seven'; // OK

myFavoriteNumber = 7; // OK

// 与 undefined 和 null 联用

const sayHello = (name: string | undefined) => {

	/* ... */

};

// 和字面量一起使用

let num: 1 | 2 = 1;

type EventNames = 'click' | 'scroll' | 'mousemove';

// 联合类型只能 取到公共的方法或者属性

let n!: number | string;

// never

type Useless = string & number;

// 合并

type IntersectionType = { id: number; name: string; } & { age: number };

const mixed: IntersectionType = {

    id: 1,

    name: 'name',

    age: 18

}

// 注意  & 时会对同名属性进行合并

type Person = {

    name: string,

    age: number,

    opt: {

        walk: () => void;

    }

}

type Animal = {

    name: number,

    age: number | string,

    opt: {

        eat: (food: string) => void;

    }

}

type Sth = Person & Animal;

let o : Sth = {

    //name 的类型变为 never 导致 Sth 类型无效

    name: null,

    // 类型为 number

    age: 16,

    // 类型为 {eat, walk}

    opt: {

        walk() {},

        eat() {},

    }

}

// 有重复代码

// 定义一个 gender 变量，并且约束为男或者女

let gender : "男" | "女";

//gender 可以赋值为男或者女

gender = "女";

gender = "男";

// 根据性别查询函数

function searchUsers(g:"男" | "女") {}

// 修改真实值的时候比较难改

type Gender = "帅哥" | "美女";

// 定义一个 gender 变量，并且约束为男或者女

let gender : Gender;

//gender 可以赋值为男或者女

gender = "女";

gender = "男";

// 根据性别查询函数

function searchUsers(g:Gender) {}

// 编译后的结果是一个对象

enum Gender {

    male = "美女",

    female = "帅哥"

}

let gender : Gender;

gender = Gender.male;

gender = Gender.female;

function searchUser(g: Gender) {}

searchUser(gender);

// 初始化值的变量 

let str = 'this is string'; // 自动标记为 string 类型

let num = 1; // 自动标记为 number 类型

let bool = true; // 自动标记为 boolean 类型

// 有默认值的函数参数

// 根据参数的类型，推断出返回值的类型也是 number

function add(a: number, b: number) {

    return a + b;

}

const count = add(1, 1); // 推断出 count 的类型也是 number

// 推断参数 b 的类型是数字或者 undefined，返回值的类型也是数字

function add(a: number, b = 1) {

    return a + b;

}

const count1 = add(1);

const count2 = add(1, '1'); // ts(2345) Argument of type "1" is not assignable to parameter of type 'number | undefined

let myFavoriteNumber;

myFavoriteNumber = 'seven';

myFavoriteNumber = 7;

const arrayNumber: number[] = [1, 2, 3, 4];

const greaterThan2: number = arrayNumber.find(num => num > 2); // 提示 ts (2322)

let n!: number | string;

// 尖括号

let num: number = <number>n;

//as 语法

let str: string = n as string;

let mayNullOrUndefinedOrString: null | undefined | string;

mayNullOrUndefinedOrString!.toString(); // ok

mayNullOrUndefinedOrString.toString(); // Object is possibly 'null' or 'undefined'.

// 未使用断言

let x: number;

initialize();

// Variable 'x' is used before being assigned.(2454)

console.log(2 * x); // Error

function initialize() {

    x = 10;

}

// 使用断言

let x!: number;

initialize();

console.log(2 * x); // Ok

function initialize() {

    x = 10;

}

// Conversion of type 'string | number' to type 'boolean' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

let bool: boolean = <boolean>n;

// 双重断言

let bool: boolean = n as any as boolean;

//let 变量，在缺省显式类型注解时，类型转换为了赋值字面量类型的父类型

let str = 'this is string'; // 类型是 string

let strFun = (str = 'this is string') => str; // 类型是 (str?: string) => string;

// 通过 let、var 定义的变量如果满足未显式声明类型注解且被赋予了 null 或 undefined 值，则推断出这些变量的类型是 any

let x = null; // 类型拓宽成 any

let y = undefined; // 类型拓宽成 any

// 将 const 定义为一个不可变更的常量，在缺省类型注解的情况下，TypeScript 推断出它的类型直接由赋值字面量的类型决定

const specifiedStr = 'this is string'; // 类型是 'this is string'

let str2 = specifiedStr; // 类型是'string'

let strFun2 = (str = specifiedStr) => str; // 类型是 (str?: string) => string;

function func(anything: string | number) {

    if (typeof anything === 'string') {

        return anything; // 类型是 string 

    } else {

        return anything; // 类型是 number

    }

}

type Args = Array<string> | Array<number>;

function log(...args: Args) {

    console.log(...args);

}

interface Person {

    name: string;

    age: number;

}

// 赋值的时候，变量的形状必须和接口的形状保持一致

// 多一个属性或者少一个属性都是不可以的

let tom: Person = {

    name: 'Tom',

    age: 25,

    //  Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

    gender: 'male'

};

interface Person {

    // 全部属性都是只读的 不允许修改

    // 其中 gender 是可选的变量

    readonly name: string;

    readonly age: number;

    readonly gender ?: boolean;

}

let tom: Person = {

    name: 'Sakura',

    age: 16,

};

// Attempt to assign to const or readonly variable 

tom.name = "Snow"

interface Person {

    readonly name: string;

    readonly age: number;

    readonly gender ?: boolean;

    // 任意属性

    [propName: string]: any;

}

let tom: Person = {

    name: 'Sakura',

    age: 16,

    data: {}

};

interface Person {

    readonly name: string;

    // Property 'age' of type 'number' is not assignable to string index type 'string'.

    readonly age: number;

    readonly gender ?: boolean;

    // 任意属性

    [propName: string]: string;

}

// interface

interface Point {

    x: number;

    y: number;

}

interface SetPoint {

    (x: number, y: number): void;

}

// type

type Point = {

    x: number;

    y: number;

};

type SetPoint = (x: number, y: number) => void;

interface Point { x: number; }

interface Point { y: number; }

const point: Point = { x: 1, y: 2 };

interface Array<T> {

    remove(index : number) : Array<T>

}

// 无法再声明其他的属性

type Type = (num : number) => number;

interface IType {

    (num : number) : void;

    _cache : Array<number>

}

const foo : IType = function () {

}

foo._cache = []

// union

type PartialPoint = PartialPointX | PartialPointY;

// tuple

type Data = [number, string];

// 接口扩展接口

interface PointX {

    x: number

}

interface Point extends PointX {

    y: number

}

// 类型别名扩展类型别名

type PointX = {

    x: number

}

type Point = PointX & {

    y: number

}

// 接口扩展类型别名

type PointX = {

    x: number

}

interface Point extends PointX {

    y: number

}

// 类型别名扩展接口

interface PointX {

    x: number

}

type Point = PointX & {

    y: number

}

interface PointInterface {

    x: number;

    y: number;

}

class Point implements PointInterface {

    x: number;

    y: number;

    constructor(x: number, y: number) {

        this.x = x;

        this.y = y;

    }

    // 注意，方法是直接设置在 Point.prototype 上的

    getPosition() {

        return `(${this.x}, ${this.y})`;

    }

}

const point = new Point(1, 2);

point.getPosition()   // (1, 2)

class Animal {

    name: string;

    constructor(name: string) {

        this.name = name;

    }

    eat() {

        console.log("eat");

    }

}

// 使用 extend 继承

class Cat extends Animal {

    age: number;

    constructor(name: string, age: number) {

        super(name);

        this.age = age;

    }

    play() {

        console.log("play");

    }

}

class Stack<T> {

    // 私有属性

    private readonly arr: Array<T> = [];

    // 静态属性

    public static readonly Name = "Stack";

    public static isStack(o: any): o is Stack<any> {

        return o instanceof Stack;

    }

    // 访问器属性

    get length() {

        return this.arr.length;

    }

    // 方法

    public push(...args: Array<T>) {

        this.arr.push(...args);

    }

    public pop(): T {

        let v = this.arr[this.length - 1];

        this.arr.length--;

        return v;

    }

    public isEmpty() {

        return !this.length;

    }

    protected forEach(fun: Function) {

        let cache = this.arr.splice(0, this.arr.length);

        cache.forEach((value) => {

            fun(value);

        })

    }

}

let stack = new Stack<number>();

stack.push(1);

stack.push(2);

console.log(stack.pop());

console.log(stack.pop());

console.log(stack.length);

console.log(Stack.isStack(stack));

console.log(Stack.Name);

abstract class Animal {

    abstract makeSound(): void;

    move(): void {

        console.log('roaming the earch...');

    }

}

function identity <T, U>(value: T, message: U) : T {

    console.log(message);

    return value;

}

console.log(identity<Number, string>(68, "Semlinker"));

interface Identities<V, M> {

    value: V,

    message: M

}

function identity<T, U> (value: T, message: U): Identities<T, U> {

    console.log(value + ": " + typeof (value));

    console.log(message + ": " + typeof (message));

    let res: Identities<T, U> = {

        value,

        message

    };

    return res;

}

//ts 自动推断类型了

console.log(identity(16, "Sakura"));

// 写全是这样的

console.log(identity<number, string>(16, "Sakura"))

interface Array<T> {

    /**

     * Gets or sets the length of the array. This is a number one higher than the highest element defined in an array.

     */

    length: number;

    /**

     * Removes the last element from an array and returns it.

     */

    pop(): T | undefined;

    /**

     * Appends new elements to an array, and returns the new length of the array.

     * @param items New elements of the Array.

     */

    push(...items: T[]): number;

	/**

     * Calls a defined callback function on each element of an array, and returns an array that contains the results.

     * @param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.

     * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.

     */

    map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];	

}

interface ArrayConstructor {

    new(arrayLength?: number): any[];

    <T>(arrayLength: number): T[];

    isArray(arg: any): arg is any[];

    readonly prototype: any[];

}

declare var Array: ArrayConstructor;

// 大伙都很熟悉 

let arr : Array<number> = new Array<number>();

arr.push(1);

interface Length {

    length: number;

}

// T extends Length 用于告诉编译器，我们支持已经实现 Length 接口的任何类型。

function identity<T extends Length>(arg: T): T {

    console.log(arg.length); // 可以获取 length 属性

    return arg;

}

interface Person {

  name: string;

  age: number;

  location: string;

}

type K1 = keyof Person; // "name" | "age" | "location"

type K2 = keyof Person[];  // number | "length" | "push" | "concat" | ...

type K3 = keyof { [x: string]: Person };  // string | number

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {

    return obj[key];

}

interface User<T = string> {

    name: T;

}

const strA: User = {name: "Sakura"};

const numB: User<number> = {name: 101};

interface Person {

    name: string;

    age: number;

}

const sakura: Person = { name: "Sakura", age: 16 };

type SakuraType = typeof sakura; // type SakuraType = Person

interface Person {

    name: string;

    age: number;

}

type K1 = keyof Person; // "name" | "age"

type K2 = keyof Person[]; // "length" | "toString" | "pop" | "push" | "concat" | "join" 

type K3 = keyof { [x: string]: Person };  // string | number

interface StringArray {

    // 字符串索引 -> keyof StringArray => string | number

    [index: string]: string;

}

interface StringArray1 {

    // 数字索引 -> keyof StringArray1 => number

    [index: number]: string;

}

//keyof 也支持基本数据类型

let K1: keyof boolean; // let K1: "valueOf"

let K2: keyof number; // let K2: "toString" | "toFixed" | "toExponential" | ...

let K3: keyof symbol; // let K1: "valueOf"

type Keys = "a" | "b" | "c"

type Obj =  {

    [p in Keys]: any

} // -> { a: any, b: any, c: any }

function getSchool(name: string, age: number, address: string) {

    return {name, age, address}

}

// T 是 getSchool 的类型 。  T extends   ((...args: any []) => infer R)

type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any

type MyReturnType = ReturnType<typeof getSchool>; // 这个类型很好用

type Parameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never

type MyParamaters = Parameters<typeof getSchool>

// T [K] 表示对象 T 的属性 K 所表示的类型，在上述例子中，T [K][] 表示变量 T 取属性 K 的值的数组

// 通过 [] 索引类型访问操作符，我们就能得到某个索引的类型

class Person {

    name: string;

    age: number;

}

type MyType = Person['name'];  //Person 中 name 的类型为 string, 所以 type MyType = string

interface Person {

    name: string;

    age: number;

}

const person: Person = {

    name: 'sakura',

    age: 16

}

function getValues<T, K extends keyof T>(person: T, keys: K[]): T[K][] {

    return keys.map(key => person[key]);

}

getValues(person, ['name']) // ['sakura']

getValues(person, ['gender']) // 报错： Type "gender" is not assignable to type "name" | "age".

type Partial<T> = {

    [P in keyof T]?: T[P];

};

// Initial type: {name?: string, age?: number}

type PartialPerson = Partial<Person>;

type Required<T> = {

    [P in keyof T]-?: T[P]

};

type Readonly<T> = {

    readonly [P in keyof T]: T[P];

};

type Pick<T, K extends keyof T> = {

    [P in K]: T[P];

};

type Record<K extends keyof any, T> = {

    [P in K]: T;

};

type ReturnType<T extends (...args: any[]) => any> = 

    T extends (...args: any[]) => infer R ? R : any;

type Parameters<T extends (...args: any) => any> = 

T extends (...args: infer P) => any ? P : never;

// 因为 extends 是分配式的，所以这么写是 ok 的

type Exclude<T, U> = T extends U ? never : T;

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"

type T2 = Exclude<string | number | (() => void), Function>; // string | number

type Extract<T, U> = T extends U ? T : never;

type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"

type T1 = Extract<string | number | (() => void), Function>; // () =>void

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

interface Todo {

    title: string;

    description: string;

    completed: boolean;

}

type TodoPreview = Omit<Todo, "description">;

const todo: TodoPreview = {

    title: "Clean room",

    completed: false,

};

type NonNullable<T> = T extends null | undefined ? never : T;

type T0 = NonNullable<string | number | undefined>; // string | number

type T1 = NonNullable<string[] | null | undefined>; // string[]

{

  "compilerOptions": {

    /* 基本选项 */

    "target": "es5",                       // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'

    "module": "commonjs",                  // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'

    "lib": [],                             // 指定要包含在编译中的库文件

    "allowJs": true,                       // 允许编译 javascript 文件

    "checkJs": true,                       // 报告 javascript 文件中的错误

    "jsx": "preserve",                     // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'

    "declaration": true,                   // 生成相应的 '.d.ts' 文件

    "sourceMap": true,                     // 生成相应的 '.map' 文件

    "outFile": "./",                       // 将输出文件合并为一个文件

    "outDir": "./",                        // 指定输出目录

    "rootDir": "./",                       // 用来控制输出目录结构 --outDir.

    "removeComments": true,                // 删除编译后的所有的注释

    "noEmit": true,                        // 不生成输出文件

    "importHelpers": true,                 // 从 tslib 导入辅助工具函数

    "isolatedModules": true,               // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.

    /* 严格的类型检查选项 */

    "strict": true,                        // 启用所有严格类型检查选项

    "noImplicitAny": true,                 // 在表达式和声明上有隐含的 any 类型时报错

    "strictNullChecks": true,              // 启用严格的 null 检查

    "noImplicitThis": true,                // 当 this 表达式值为 any 类型的时候，生成一个错误

    "alwaysStrict": true,                  // 以严格模式检查每个模块，并在每个文件里加入 'use strict'

    /* 额外的检查 */

    "noUnusedLocals": true,                // 有未使用的变量时，抛出错误

    "noUnusedParameters": true,            // 有未使用的参数时，抛出错误

    "noImplicitReturns": true,             // 并不是所有函数里的代码都有返回值时，抛出错误

    "noFallthroughCasesInSwitch": true,    // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）

    /* 模块解析选项 */

    "moduleResolution": "node",            // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)

    "baseUrl": "./",                       // 用于解析非相对模块名称的基目录

    "paths": {},                           // 模块名到基于 baseUrl 的路径映射的列表

    "rootDirs": [],                        // 根文件夹列表，其组合内容表示项目运行时的结构内容

    "typeRoots": [],                       // 包含类型声明的文件列表

    "types": [],                           // 需要包含的类型声明文件名列表

    "allowSyntheticDefaultImports": true,  // 允许从没有设置默认导出的模块中默认导入。

    /* Source Map Options */

    "sourceRoot": "./",                    // 指定调试器应该找到 TypeScript 文件而不是源文件的位置

    "mapRoot": "./",                       // 指定调试器应该找到映射文件而不是生成文件的位置

    "inlineSourceMap": true,               // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件

    "inlineSources": true,                 // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性

    /* 其他选项 */

    "experimentalDecorators": true,        // 启用装饰器

    "emitDecoratorMetadata": true          // 为装饰器提供元数据的支持

  }

}