【2020TS】WHY using TypeScript开发？？？

[bluezhan]

• 注释的妙用

我们可以通过/** */来注释TypeScript的类型，当我们在使用相关类型的时候就会有注释的提示，这个技巧在多人协作开发的时候十分有用

type returnType = ReturnType<typeof add>

• 巧用元组

有时候我们可能需要批量的来获取参数，并且每一个参数的类型还不一样，我们可以声明一个元组如：

function query(...args:[string, number, boolean]){
  const d: string = args[0];
  const n: number = args[1];
  const b: boolean = args[2];
}

• 巧用Omit

interface User {
    username: string
    id: number
    token: string
    avatar: string
    role: string
}
type UserWithoutToken = Omit<User, 'token'>

• 运用Record

我们忘记写了一个汽车品牌，他会报错吗？
我们拼写属性名错误了，它会报错吗？
我们添加了一个非上述三个品牌的品牌进去，他会报错吗？
我们更改了其中一个品牌的名字，他会有报错提醒吗？
上述这种写法统统不会，这就需要Record的帮助。

type Car = 'Audi' | 'BMW' | 'MercedesBenz'
type CarList = Record<Car, {age: number}>

const cars: CarList = {
    Audi: { age: 119 },
    BMW: { age: 113 },
    MercedesBenz: { age: 133 },
}

• 巧用类型约束

在 .jsx 文件里，泛型可能会被当做 jsx 标签

const toArray = <T>(element: T) => [element]; // Error in .jsx file.

加 extends 可破

const toArray = <T extends {}>(element: T) => [element]; // No errors.

• 交叉类型
• 联合类型
• 类型别名

出自：Vue3.0之前你必须知道的TypeScript实战技巧

查看更多

• 【技术思考系列】为什么使用TypeScript开发vue2.x体验很差？
• 【技术思考系列】如何让TypeScript完美兼容Vue2.x的JSX
• React hooks + Mobx + typescript + EggJs从0到1打造一款仿网易云音乐APP（一）
• Typescript中以变量方式传递类
• React hooks + Mobx + typescript + EggJs从0到1打造一款仿网易云音乐APP（二）
• 记一次ts全栈开发（前端篇）
• 微软：编程语言 TypeScript 3.9 可将编译时间缩短 40％
• Vue+Typescript起手式
• eval5：基于 TypeScript 编写的 JavaScript 解释器
• 谈谈 TypeScript 中的类型断言
• Vue + TypeScript 踩坑总结
• vue2.x中使用typescript
• [推荐] eval5：基于 TypeScript 编写的 JavaScript 解释器
• TypeScript 落地和代码自动化：前端稳定性和研发效率精进
• 使用Vue-cli、typeScript开发Vue通用插件
• 简单粗暴 · 手把手教你在Vue项目中使用Typescript
• 支持 TypeScript，Agora Web SDK “体验服” 开启
• 使用Webpack等搭建一个适用于React项目的脚手架（1 – React、TypeScript）
• leetCode解题记录5 – 最长回文子串（JS, TS, PY版）
• 使用vue-cli3搭建Vue+TypeScript项目
• 一篇文章带你使用Typescript封装一个Vue组件
• 记一次webpack+typescript+react的优化过程
• TS + Vue 构建vuex和vue-router模块
• 理解 TypeScript 类型收窄
• 用 serverless 与 typescript 开发第一个 Koa 应用
• node.js Express框架中使用websoecket 包含 ts 和 非 ts 环境
• typescript基础一览，助你从入门到放弃
• 从编译后的js代码看typescript中的面向对象
• 无缝改造vue项目,支持typescript
• 在Vue.js中使用TypeScript
• Vue + TypeScript 项目放弃 TSLint，拥抱 ESLint
• TypeScript 装饰器整理及用例介绍
• 用什么策略把你的 JavaScript 迁移到 TypeScript
• 理解 TypeScript 类型拓宽
• 十分钟搞定 TypeScript + webpack 配置
• Koa + GraphQL + Mongoose实战（Typescript版）
• 【开源】Koa + GraphQL实战（Typescript版）
• 十分钟了解 TypeScript 是怎样工作的