浅谈TypeScript基础以及项目用法

前言

TypeScript 对于前端人员甚至后台人员都不算是特别陌生的东西了（身边很多java朋友看ts都觉得还不错），今天来聊聊这玩意，基础用法，以及项目中大家都是怎么用的。 顺便一说，ts这东西实在是太大了，因为他的类型可以很灵活的去组合，不过放心，本文不会涉及太多概念性的东西（也说不完），因为其实一个大项目，往往就是这些基本类型用得最多，像type和interface这些东西，不过也分职位，如果你是项目组长或者是你们公司前端负责人要求的特别严格或者你是写工具的，封装一些公用组件的，用这些特别的东西机会会比较多

在ts里，类型最好是规定的越死越好，因为这东西本身就是来规范自己规范团队的，如果要是全用any的话，不如直接用js，如果项目只有自己，那就更没必要上这玩意了，给自己找麻烦

基础类型

ts里大家多少应该都听过，一些number类型string类型包括函数的参数类型什么nerver、void本文就不再多赘述了，因为这东西实在太简单了。。。这里就简单的列一下

基本类型： number/string/boolean/Array/object

any null、undefined void never

工具

因为做实验的时候每次都需要tsc编译一下，然后node 文件 太麻烦了，我这里简单写了个gulp(没用webpack因为gulp比较简单方便并且快)，大家愿意用可以直接用

评论区有人指出来只编译的话可以直接tsc -w 其实是一样的，不过我主要是为了自己方便watch的时候清屏，以及一切其他的文件操作，所以gulp方便一点，这里就留个架子，有兴趣可以在评论区或者gulp官网找更多方便的命令

用法：

1. cnpm i -g gulp-cli  - 安装gulp本身
2. cnpm i  - 安装本地依赖库
3. gulp watch - 运行gulp的watch任务

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-run": "^1.7.1",
    "gulp-typescript": "^6.0.0-alpha.1",
    "gulp-watch": "^5.0.1",
    "typescript": "^3.7.4"
  }
}

复制代码

gulpfile.js

const gulp = require('gulp'),
  watch = require('gulp-watch'),
  ts = require('gulp-typescript'),
  run = require('gulp-run'),
  clean = require('gulp-clean');

gulp.task('watch', () => {
  return watch('./1.ts', () => {
    gulp
      .src('./1.ts')
      .pipe(
        ts({
          target: 'ES6',
          outFile: '1.js',
          experimentalDecorators: true,
        }),
      )
      .on('error', err => {
        // console.error(err);
      })
      .pipe(gulp.dest('build'))
      .pipe(run('node build/1.js'));
  });
});

复制代码

项目结构如下

 

 

 

运行结果

这个build不用自己手动创建，直接运行gulp，会自动创建并且运行的

 

 

数组

数组的花样其实还相对来说挺多的，这里先介绍基础用法，下文会讲到和其他的一些东西配合

let arr = Array<number>; // 规定只能是装数字的数组
// 可以简写成 let arr = number[];

Type - Interface

经常有人问我 ts type 和 interface 有啥区别，首先肯定一点，这俩功能肯定是有相同点，也肯定有区别，要不然作者也就不有病搞两个出来了，这里我们先说分别的用法，再说区别

咱们暂时理解成这两个都是自定义类型的

首先ts约定类型是可以约定json内部的，这个大家都知道就像这样 这样是报错的</