20201013 - TS - TypeScript

onvno commented 3 years ago

泛型使用,基础对比：添加<>表示

function identity(arg: number): number {
    return arg;
}

function identity<T>(arg: T): T {
    return arg;
}

在函数名之后，我们在尖括号<>中加了了一个类型变量T。T现在是我们想传递给identity的类型的占位符，并被分配给arg来代替它的类型:T现在代替number充当类型。

T代表类型，在定义泛型时通常用作第一个类型变量名。但实际上T可以用任何有效的名称替换。不仅如此，我们不仅限于一个类型变量——我们可以引入任何我们想要定义的量。我们在T旁边引入U，展开函数:

function identities<T, U>(arg1: T, arg2: U): T {
   return arg1;
}

泛型接口

interface Identities<V, W> {
   id1: V,
   id2: W
}

function identities<T, U> (arg1: T, arg2: U): Identities<T, U> {
   console.log(arg1 + ": " + typeof (arg1));
   console.log(arg2 + ": " + typeof (arg2));
   let identities: Identities<T, U> = {
    id1: arg1,
    id2: arg2
  };
  return identities;
}

onvno commented 3 years ago

TypeScript 实践简单介绍，不过初步了解有帮助

onvno commented 3 years ago

三千字讲清TypeScript与React的实战技巧:内容比较全面，实战测试

onvno commented 3 years ago

深入理解 TypeScript：ebook，后续关注

onvno commented 3 years ago

待明确: 1.@type包与清单文件 2.type 定义及使用 3.Record 4.as 5.any[],<>

onvno commented 3 years ago

tuple转union

const list = ['a', 'b', 'c'] as const; // TS3.4 syntax type NeededUnionType = typeof list[number]; // 'a'|'b'|'c';

https://stackoverflow.com/questions/45251664/typescript-derive-union-type-from-tuple-array-values

onvno commented 3 years ago

ts定义interface接口为一组对象 How can I define an interface for an array of objects with Typescript?

interface EnumServiceGetOrderBy {
    [index: number]: { id: number; label: string; key: any };
}

或者

interface EnumServiceItem {
    id: number; label: string; key: any
}

interface EnumServiceItems extends Array<EnumServiceItem>{}

或者

    interface simpleInt {
        id: number;
        label: string;
        key: any;
    }

    type simpleType = simpleInt[];

onvno commented 3 years ago

在TypeScript中，Extends和Implements一个抽象类有什么不同

问题描述

Extending vs. implementing a pure abstract class in TypeScript 假设我有一个干净的抽象类A：

abstract class A { abstract m(): void; } 在继承(extends)方面，就像C#或者java里面那样，我可以像下面这样来继承这个抽象类：

//TypeScript class B extends A{ } 但是在实现方面（implement），在TypeScript中也可以去implement一个类：

class C implements A { m(): void { } } 那么问题来了：类B和类C在行为上有什么不同？我该如何选择？

问题解答

implements关键字将类A当作一个接口，这意味着类C必须去实现定义在A中的所有方法，无论这些方法是否在类A中有没有默认的实现。同时，也不用在类C中定义super方法。

而就像是extends关键字本身所表达的意思一样，你只需要实现类A中定义的虚方法，并且关于super的调用也会有效。

我想在抽象方法的情况下，这并没有什么区别。但是很少有只使用抽象方法的类，如果只使用抽象方法，最好将其转换为接口。

onvno commented 3 years ago

1.接口导出需要使用export,否则外部文件无法调用

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

2.TS不推荐全局变量，不过可以创建module。依赖的文件使用reference 创建依赖关联：

Validation.ts

module Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}

LettersOnlyValidator.ts

/// <reference path="Validation.ts" />
module Validation {
    var lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
}

ZipCodeValidator.ts

/// <reference path="Validation.ts" />
module Validation {
    var numberRegexp = /^[0-9]+$/;
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}

Test.ts

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />
// 针对以下集合中的字符串做一些简单的测试
var strings = ['Hello', '98052', '101'];
// 使用验证器
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['ZIP code'] = new Validation.ZipCodeValidator();
validators['Letters only'] = new Validation.LettersOnlyValidator();
// 展示每个字符串通过验证器后的结果
strings.forEach(s => {
    for (var name in validators) {
        console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
    }
});

3.reference也可以用于配合第三方库，生成定义类型文件，项目中使用如依赖node:

node.d.ts (简化后的摘录代码)

declare module "url" {
    export interface Url {
        protocol?: string;
        hostname?: string;
        pathname?: string;
    }

    export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url;
}

declare module "path" {
    export function normalize(p: string): string;
    export function join(...paths: any[]): string;
    export var sep: string;
}

项目中调用：

///<reference path="node.d.ts"/>
import url = require("url");
var myUrl = url.parse("http://www.typescriptlang.org");

参考：TypeScript Modules(模块)

onvno commented 3 years ago

Chrome Extension with TypeScript Create a Chrome Extension Using React and TypeScript 1.chrome项目本身使用TS

内嵌项目使用create-react-app创建TS项目 3.使用npm命令并行多个 watch和build，实现最终结果

onvno commented 3 years ago

typescript - react实践

Typescript配合React实践：介绍TS使用优点及一些建议规范
复杂 React 应用中的TypeScript 3.0实践: 介绍了手写一个项目，包含了reducer
React with TypeScript: Best Practices:sitepoint延续一贯的娓娓道来，内容还介绍了type和interface的使用，很细致不过不够深入全面，仍需自己补充学习
React+TypeScript Cheatsheets：上一篇中介绍的git仓库，有1w6star,及诶少React的TS使用

onvno commented 3 years ago

typescript - advanced type Advanced Types 1.keyof

?? 及 void

??是进行空值合并
void是直接返回undefined,在TS编译??时，会转为void判断

https://blog.csdn.net/weixin_43720095/article/details/106809040

3.!

onvno commented 3 years ago

as const

https://devblogs.microsoft.com/typescript/announcing-typescript-3-4/#const-assertions

TS3.4引入,约束类型为不可变immutable

onvno commented 3 years ago

typescript - react

1.快速查询react和ts的结合使用，👍：https://github.com/typescript-cheatsheets/react 2.react官方TS结合文档:比较空洞

onvno / pokerface