TypeScript丨初识（1）

前端精

❝
Any application that can be written in Javascript, will eventually be written in Javascript. —— stackoverflow. Jeff Atwood
❞

❝
TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。
❞

❝
“自从用了TypeScript，我永远不会回到JavaScript了”
❞

❝
Vue 3 重新用TypeScript写
❞

❝
Ceate-React-App 2.1(2018年10月29号发布)开始支持生成TypeScript
❞

优点

静态类型检查
IDE 智能提示
代码重构支持
可读可维护性
增强的oo，可以用更多设计模式，IoC，AOP...

基础类型

布尔值

let isRight: boolean = false;

数字

let num: number = 1;

字符串

let name1: string = "张三";

数组

let list1: number[] = [1, 2, 3];
// 或
let list2: Array<number> = [1, 2, 3];

元组元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

let x: [string, number] = ["hello", 10];

枚举

/* 枚举 */
enum Colors {
  Red,
  Green,
  Blue
}
// 编译后
/*
  var Colors;
  (function () {
    Colors[(Colors["Red"] = 1)] = "Red";
    Colors[(Colors["Green"] = 2)] = "Green";
    Colors[(Colors["Blue"] = 3)] = "Blue";
  })(CoColorslor || (Colors = {}));
*/
// 输出：{1: "Red", 2: "Green", 3: "Blue", Red: 1, Green: 2…}

// 字符串枚举无法反向映射，如：
enum Colors2 {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}
// 输出： {Red: "RED", Green: "GREEN", Blue: "BLUE"}
// 字符串枚举成员不能被反向映射到枚举成员的名字。 换句话说，你不能使用 Colors["RED"]来得到"Red"。

unknown

/* unknown */
let notSure1: unknown = 1;
notSure1 = "maybe a string instead";
notSure1 = false;

const n1: number = notSure1;
// error:Type 'unknown' is not assignable to type 'number'.

// by the way，unknown和any的区别
/*
  any 和 unknown 的最大区别是, 
  unknown 是 top type (任何类型都是它的 subtype) , 
  而 any 即是 top type, 又是 bottom type (它是任何类型的 subtype ) ,
  这导致 any 基本上就是放弃了任何类型检查.
 */
{
  const objUnknown: unknown = {
    sayHello() {}
  };
  objUnknown.sayHello();
  // error:Object is of type 'unknown'

  // 可使用类型断言缩小未知范围
  (objUnknown as { sayHello: () => void }).sayHello();
}
{
  // 使用any，不会检查出错误，就会导致程序出现bug
  const objAny: any = {
    sayHello() {}
  };
  objAny.hello();
}

let notSure: any = 1;
notSure = "张三";
notSure = { id: 1, name: "李四" };

void / Undefined / null 它们的本身的类型用处不是很大

function fn1(): void {
  console.log("1");
}
let u: undefined = undefined;
let n: null = null;

never

❝
never类型表示的是那些永不存在的值的类型。例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型，当它们被永不为真的类型保护所约束时。 never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。
❞

自定义抛出异常

function error(message: string): never {
  throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
  return error("Something failed");
}

根本就不会有返回值的函数表达式

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

收窄类型&never

interface Worker {
  type: "worker";
}
interface Police {
  type: "police";
}

type All = Worker | Police ;
function personTest(person: All) {
  switch (person.type) {
    case "worker":
      // 这里 person 被收窄为 Worker
      console.log("worker");
      break;
    case "police":
      // 这里 person 被收窄为 Police
      console.log("police");
      break;
    default:
      // 这里 person 为never
      const exhaustiveCheck: never = person;
      break;
  }
}

如果在未来你有个工友扩展了All，如：

interface Teacher {
  type: "teacher";
}

type All = Worker | Police | Teacher;
// ...

但在switch分支上没有加上对于Teacher 的逻辑处理，这个时候在default分支的person会被收窄成Teacher，导致无法赋值给never，产生了一个编译期间的错误。通过这个办法，你可以确保 personTest 方法总是穷尽了所有对于All的可能类型。

object 使用object类型，就可以更好的表示像Object.create这样的API。例如：

declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error

断言

❝
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”
❞

<type>

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

as 等价于 <type>，因为<type>会和jsx/tsx代码混淆，所以推荐用 ”as“

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

const obj: {
  userInfo?: {
    id?: string;
    name?: string;
  };
} = {
  userInfo: {
    id: "1"
  }
};

const id = obj.userInfo.id;
// error:对象可能为“未定义”
const id2 = obj.userInfo!.id;
// ok

by the way，?. 运算符

let val = obj?.a;
// 编译成es5后
var val = obj === null || obj === void 0 ? void 0 : obj.a;
// void 0 即 undefined

应用在一些场景上

// 用之前传统的模式
if(obj && obj.a) { } 
  
// 用ts
if(obj?.a){ }

const

// readonly
const obj = {
  name: "zhangsan",
  age: 18
} as const;
obj.age = 10;
// error:Cannot assign to 'age' because it is a read-only property.

接口（interface）

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

// 规范首字母大写以 ”I“ 开头
interface IUserInfo {
    id: string;
    age:number;
    name: string;
    hobby?: number;
    [key: string]: any;
}

// 对象检查
let test: ITest = { 
  readonly x: 10,  
  color: 'red',
  height: 100,
  myProp: 'hello world'
};
test.x = 10; 
// 报错，只读属性不能赋值

// 继承
interface ITest2 extends ITest {
    other: string
}

实现接口

❝
与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。
❞

interface IWorkman {
  hours: number;
  working: () => void;
  rest?: () => void;
}

// 在类中必须去实现接口非空成员
class I implements IWorkman {
  currentTime: Date;
  hours: number;
  constructor(h: number, m: number) {
    this.currentTime = new Date();
    this.hours = 8;
  }
  working() {
    console.log("Morning worker");
  }
}

接口（interface）vs 类型别名（type）

/* 接口 interface */
interface IUserInfo {
  id: string;
  name: string;
  hobby?: string;
  readonly age: number;
  [key: string]: any;
}
let user: IUserInfo = {
  id: "1",
  age: 10,
  name: "张三",
  sex: 1
};
user.age = 1;
// error:Cannot assign to 'age' because it is a read-only property.

// 继承
interface IOther extends IUserInfo {
  other: string;
  // ...
}


/* 类型别名 type */
// 与interface类似，不赘述


/* interface vs type */
// 相同点：
// 1. 都可以描述一个对象
interface IUser {
  name: string;
  age: number;
}

type TUser = {
  name: string;
  age: number;
};


// 2.都允许拓展（extends）
interface IName2 {
  name: string;
}
interface IUser2 extends IName2 {
  age: number;
}

type TName2 = {
  name: string;
};
type TUser2 = TName2 & { age: number };

// 不同点：
//1. type 可以，interface 不行
// 基本类型的别名
type Name = string;

// 高级类型：联合类型
interface IDog {
  wang: string;
}
interface ICat {
  miao: string;
}
type IPet = IDog | ICat;

//2. interface 可以，type 不行
interface IUser3 {
  name: string;
  age: number;
}

interface IUser3 {
  /*
   第二个interface的key如果和上一个interface一样，那么都要一模一样，否则报错，也就是这里要
   name: string;
   但是这个的意义并不大
  */
  // name:number;
  sex: string;
}
/*
  同名的接口会被自动合并，
  IUser3的接口最终为，
  
  interface IUser3 {
    name: string
    age: number
    sex: string
  }
*/

如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface，如果不能就用 type。总之，先考虑用interface。

高级类型

交叉类型

interface IPerson {
  id: string;
  name: string;
}
interface ICompany {
  companyName: string;
}
type TStaff = IPerson & ICompany;
const staff: TStaff = {
  id: "1",
  name: "wang",
  companyName: "kt"
};

联合类型

type TVal = string | number;
const val: TVal = "123";
const val2: TVal = 123;

type TCode = 2000 | 3000 | 5000;
const code: TCode = 1000;
// error:Type '1000' is not assignable to type 'TCode'.

interface IPerson2 {
  id: string;
  name: string;
}
interface ICompany2 {
  companyName: string;
}
type TStaff2 = IPerson | ICompany;
const staff2: TStaff2 = {
  companyName: "kt"
};

泛型

❝
软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
❞

泛型函数

// 假设这个函数会返回任何传入它的值
function identity<T>(arg: T): T {
  return arg;
}

// ts会进行类型推论，推论返回 string
const val1: string = identity("hello world!");
// ok

const val2: string = identity<string>("hello world!");
// ok

const val3: number = identity<string>("hello world!");
// error:Type 'string' is not assignable to type 'number'.

// 在react hook + ts中，部分hook，如useState也是一个泛型函数
const [num, setNum] = useState<number>(1);

泛型接口

// 设置默认值为undefined，即 可不用传递泛型
interface IResult<T = undefined> {
  code: 2000 | 4000 | 5000;
  data: T | null;
  message: string;
  // 预留一些其他的特殊的key
  [otherKey: string]: any;
}

const $request = {
  get(action: string): Promise<any> {
    return new Promise((resolve, _) => {
      if (true) {
        const obj = {
          code: 2000,
          data: {
            id: 1,
            name: "zhangsan"
          },
          message: "请求成功"
        };
        resolve(obj);
      } else {
        const obj = {
          code: 5000,
          data: null,
          message: "请求失败"
        };
        resolve(obj);
      }
    });
  }
};

// 1
// 开始请求
const getUserInfo = async () => {
  const {
    code,
    data,
    message,
    other1,
    other2
  }: IResult<{ id: number; name: string }> = await $request.get(
    "getUserInfo"
  );
  if (code === 2000) {
    // ide自能提示，data的属性
    console.log(data.id);
    console.log(data.name);
    console.log(message);
  } else if (code === 5000) {
    console.log(message);
  }
};
getUserInfo();

// 2
// 把请求方法再封装一层，单独维护再一个ts文件，推荐
const getUserInfo2 = (): Promise<IResult<{ id: number; name: string }>> =>
  $request.get("getUserInfo");

// 开始请求
const _getUserInfo2 = async () => {
  const { code, data, message } = await getUserInfo2();
  if (code === 2000) {
    // ide自能提示，data的属性
    console.log(data.id);
    console.log(data.name);
    console.log(message);
  } else if (code === 5000) {
    console.log(message);
  }
};
_getUserInfo2();

泛型类

class Count<T> {
  init: T;
  count: (x: T, y: T) => T;
}

const count = new Count<number>();
count.init = 0;
count.count = (x, y) => {
  return x + y;
};

ts中的 typeof

const obj = {
  title: "标题",
  like: 100
};
console.log(typeof obj);
// object

type TObj = typeof obj;
const obj2: TObj = { title: "标题2", like: 1000 };
// TObj -> { title: string; like: number; }

收窄类型/流动类型

const fn = (val: string | number) => {
  if (typeof val === "string") {
    val.split("");
  }
};

不仅仅typeof，instanceof，switch case【回到上面看收窄类型&never的例子】... 等场景也是类型收窄的手段

*.d.ts 文件

❝
要想描述非TypeScript编写的类库的类型，我们需要声明类库所暴露出的API
❞

❝
如果你只写js，d.ts对你来说也是有用的，vscode会给你智能提示
❞

在node_modules的第三方库，经常会看到 *.d.ts 相关文件，如：

第三方UI库

如node_modules的test库，配对的index.d.ts文件

在项目中引用 test 包时，也会自动引用其对应的声明 index.d.ts

在 ts 文件里，引用了一个没有声明文件的 js 库，如classnames，会提示：

使用npm install 命令安装之后，会在node_modules/@types 文件夹下生成

如果库 @types/classnames 不存在，就要在工程下 xxx.d.ts 项目全局声明定义

declare module 'classnames';

vue工程下常见的.d.ts文件 & 自定义全局声明

shims-tsx.d.ts

import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }

  // 自定义全局声明
  interface IUser {
    id: string;
    name: String;
  }
}

shims-vue.d.ts【垫片修复在引入.vue文件的时候不会报错】

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

如何去编写.d.ts 声明文件？

一般来说在做第三方库发布至npm平台的时候，我们会用TypeScript提供的工具，直接用命令tsc生成如：

index.ts

interface Person {
  firstName: string;
  lastName: string;
}
function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}
const arr: number[] = [1, 2];
let user = { firstName: 'Jane', lastName: 'User' };
export { greeter, arr, user };

在终端根目录执行 tsc , 即编译出 commonjs 规范的包和配对的 .d.ts 声明文件

index.js

"use strict";
exports.__esModule = true;
exports.user = exports.arr = exports.greeter = void 0;
function greeter(person) {
    return 'Hello, ' + person.firstName + ' ' + person.lastName;
}
exports.greeter = greeter;
var arr = [1, 2];
exports.arr = arr;
var user = { firstName: 'Jane', lastName: 'User' };
exports.user = user;

index.d.ts let user 在 index.ts 没有明确声明对象类型，但是ts会将自动推断类型，并写入.d.ts文件里

interface Person {
    firstName: string;
    lastName: string;
}
declare function greeter(person: Person): string;
declare const arr: number[];
declare let user: {
    firstName: string;
    lastName: string;
};
export { greeter, arr, user };

当在使用index.js这个库时候，ide就会根据声明智能提示。

对于如何编写 .d.ts，我们可以去模仿一些第三方库 .d.ts 文件的编写，在项目的全局 .d.ts 上去进行实践如：一些简单的

declare const arr: number[];

declare module '*.module.less';

declare namespace NodeJS {
  interface ProcessEnv {
    readonly REACT_APP_MY_ENV: 'test' | 'prod';
  }
}
// ...

对于 .d.ts ，我们拥抱的态度是仅需要了解 .d.ts 的文件相关的写法，把重心放在如何去更好的编写 ts/tsx 文件。

Typescript 其他

keyof

interface IPerson {
  name: string;
  age: number;
  location: string;
}

type TFind = keyof IPerson; 
// "name" | "age" | "location"

const find: TFind = "name";

约束对象key的值

type TName = "zhangsan" | "lisi" | "wangwu";

type TUser = {
  [key in TName]: number;
};

const obj: TUser = { zhangsan: 1, lisi: 2, wangwu: 3 };

keyof T

function getProperty<T extends { [k: string]: number }>(obj: T, key: keyof T) {
  return obj[key].toString();
}
let obj = { a: 1, b: 2, c: 3, d: 4 };
getProperty(obj, "a");

// 报错
getProperty(obj, "m");

约束声明

// 约束声明，ITest key对应的 value 只能是string
interface IGrade<T extends { [K in keyof T]?: string } = {}> {
  name: string;
  params: T;
}
interface ITest {
  hobby: string;
  gradeName: string;
}
let test: IGrade<ITest> = {
  name: "zhangsan",
  params: {
    hobby: "play",
    gradeName: "一年级一班"
  }
};

Required<T>

转成非空属性

interface IPerson {
  name?: string;
  age?: number;
}
type IPersonRequired = Required<IPerson>;
/*
interface IPersonRequired {
  name: string;
  age: number;
} 
*/
const person: IPersonRequired = { name: "zhangsan", age: 18 };

// 内部实现
type Required<T> = {
  [P in keyof T]-?: T[P];
};

Partial<T>

转成可空属性

interface IPerson {
  name: string;
  age: number;
}
type IPersonPartial = Partial<IPerson>;
/*
interface IPersonPartial {
  name?: string;
  age?: number;
} 
*/
const person: IPersonPartial = {};

// 内部实现
type Partial<T> = {
  [P in keyof T]?: T[P];
};

Pick<T>

取出某些属性，提高interface复用率

/*
  Pick<T>，反之Omit<T>
*/
interface TState {
  name: string;
  age: number;
  like: string[];
}
interface ISingleState {
  name: string;
  age: number;
}
interface ISingleState extends Pick<TState, "name" | "age"> {}

总之，TypeScript优点是可见的，拥抱TypeScript会让你变得更好。

继续滑动看下一个