Typescript 该不该学?


all in js,编程语言的相互编译并不是复杂的问题,在github上面可以看到大量的编译器,javarubypython,甚至远古的 smallTalklisp,都可以编译为 javascript

javascript 的方言派系大致可以分成两派:

  1. CoffeeScript :由ruby社区创建的方言,CoffeeScript 吸收了 Ruby, Python, Haskell 语言的设计思想, 将 JavaScript 的代码变得清晰简洁, 盛极一时。
  2. TypeScript 是 Microsoft 推出的编程语言, 项目由大名鼎鼎的 C# 首席架构师 Anders Hejlsberg 操刀. 它的特点是在 JavaScript 的基础上实现了强类型和静态类型检查, 加入了很多静态语言才有的概念。

CoffeeScript 已然式微,Typescript 背靠微软这颗大树,在前端界掀起腥风血雨,知名的开源框架,ReactVueAngular无不投入其怀抱,甚至github上面稍微用户多一点的类库,都会有 issue 提到是否提供 Typescript 的 .d.ts 文件(有这个文件,就提供了 Typescript的支持 )。

官方说,TypescriptJavascript的超集,似乎可以把他理解成基于 Javascript 的独立语言?我并不这么理解,Typescript 最终的执行宿主环境,还是v8引擎,它最终还是要编译成JavaScript。它的用户绝大部分也还是JavaScript用户,这些原因,使得它对新特性的添加非常克制,新特性几乎都可以在TC39(一个推动 JavaScript 发展的委员会,由各个主流浏览器厂商的代表构成,制定ECMAScript标准,标准生成的流程,并实现)中找到原型。

Typescript 只不过是 Beta 版本的 Javascript。学不学完全不是问题了,现在不学,以后肯定还是要学:smile:。

项目

一句 web端 ( 基于 vue 和 Typescript 写法)

<script lang="ts">
// class 组件写法
import { Component, Vue } from 'vue-property-decorator'
import { Mutation } from 'vuex-class'
import { message } from 'ant-design-vue'

// 装饰器
@Component({})
export default class IndexPage extends Vue {
  // 原data
  form = {
    word: '',
    from: '',
    source: ''
  }

  // vuex state
 // ! 断言不为空,兼容写法(断言)
  //  由于Ts最新版本使用了strictPropertyInitialization,如果变量没有在构造函数中使用或赋值,都需要添加!,进行显式赋值断言
  @Mutation('showloading') showloading!: boolean

  rules = {
    word: [
      {
        required: true,
        message: '请输入内容',
        whitespace: true,
        trigger: 'blur'
      }
    ],
    from: [
      {
        required: true,
        message: '请输入来源',
        whitespace: true,
        trigger: 'blur'
      }
    ]
  }

// 兼容写法
// nuxt 中$api被挂载到了this下面
  $api: any

  // 兼容写法
  // formRef 类型
  // 解释:https://stackoverflow.com/questions/52109471/typescript-in-vue-property-validate-does-not-exist-on-type-vue-element
  get formRef(): Vue & { validate: () => boolean } {
    return this.$refs.form as Vue & { validate: () => boolean }
  }

  public async onSubmit() {
    const self = this
    const verify: boolean = await this.formRef.validate()
    if (verify) {
      try {
        const { code, msg, data } = await self.$api.index({
          ...this.form
        })
        if (code === 0) {
          message.success('添加成功')
          this.form = {
            word: '',
            from: '',
            source: ''
          }
        } else {
          message.error(msg)
        }
      } catch (error) {}
    }
  }
}
</script>

github: https://github.com/justOneWord/one_word_web

个人感受:

  1. 传统vue组件写法过度为vue-class-component写法,改变比较大,使用装饰器代替传统的代码组织形式。
  2. 因为对Typescript的支持不完善,需要写部分兼容代码。
  3. 前端的代码类库提供的类型定义文件不完善,很多类库都没有提供,部分表态在vue3之后提供。现阶段可能需要手动声明为any使用。

一句服务端 (基于 nest.js 和 typescript 写法)

wordController(部分):

大量使用装饰器语法,简化写法

// 装饰器
@Controller('word')
export class WordController {
  constructor(private readonly wordService:WordService) {
  }

  // 三个装饰器
  @Post()
  // 参数校验管道
  @UsePipes(ValidationPipe)
  // 手动返回200,否则会返回201,也可以放到全局拦截器去做
  @HttpCode(200)
  // body 类型 WordDto
  async add(@Body() body: WordDto) {
      return   await this.wordService.add(body)
  }

  @Get('random')
  random (){
    return this.wordService.random()
  }
}

wordService(部分):

constructor(
    // 注入 redis
    private readonly redisService: RedisService,
    // 数据库注入
    @InjectRepository(Word) private readonly wordReposition: Repository<Word>,
    @InjectRepository(Hitoapi)
    private readonly hitoApiReposition: Repository<Hitoapi>,
  ) {}

 // 指定 body 类型为 `WordDto`
async add(body: WordDto) {
    // 查找是否存在
    // result 会自动推导出类型,不需要手动指定
    const result = await this.wordReposition.find({ word: body.word });
    if (result.length > 0) {
        // ApiCode 代码提示,也是Typescript提供的能力
      throw new ApiException('资源已经存在', ApiCode.EXIST_ERROR, 200);
    }

    const newWord = await this.wordReposition.create({
      ...body,
    });
    console.log('newWord');
    const newResult = await this.wordReposition.save(newWord);
    if (newResult) {
      //  插入成功
      return true;
    } else {
      throw new ApiException('添加失败', ApiCode.BUSINESS_ERROR, 200);
    }
  }

github: https://github.com/justOneWord/one_word_api

个人感受:

  1. nestjs 框架基于 Typescript 开发,整体使用行云流水,没有为了用Typescript而用Typescript的感觉。
  2. 代码层次清晰,具有完善的 mvc 结构,比express方便。

参考文档:

  1. 漫谈 JavaScript 方言与派系

  2. 前端开发的瓶颈与未来之路


文章作者: Yao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Yao !
 上一篇
丰云行app 探索 丰云行app 探索
广汽丰田的风云行app,提供的车联网功能还是挺好用的,但是只能提供车辆的位置信息,不能提供行驶轨迹等功能。于是抓包看了下他的功能逻辑。 登录// 登录地址(post): https://carapp.gtmc.com.cn/api/appg
2020-06-17
下一篇 
webstorm 中调试typescript单文件 webstorm 中调试typescript单文件
leetCode 最近支持了typescript刷题,高高兴兴把webstorm切换到typescript刷题,记录下切换过程。 安装因为刷题都是单文件,我们需要用webstorm支持debugger单ts文件。 yarn add type
2020-05-22
  目录