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();
}
  • any
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"
};

泛型<T>

软件工程中，我们不仅要创建一致的定义良好的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 相关文件，如：

  1. 第三方UI库


    vant/types文件夹下

    vant的package.json配置

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


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

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


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


@types/classnames

如果库 @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的值

in

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会让你变得更好。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335