taro老项目如何快如引入TypeScript？

[Daisy1213]

您好，请问taro + js的老项目，想引入ts，有没有什么快速引入的命令可以用

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @shenghanqin

[shenghanqin]

@Garfield550 我被问到了一个不知道的问题。看来我还得去折腾一下ts项目。目前我还没有在taro项目中用过ts（微笑🙂）

[Daisy1213]

@Garfield550 我被问到了一个不知道的问题。看来我还得去折腾一下ts项目。目前我还没有在taro项目中用过ts（微笑🙂）

请问是你这边不清楚还是目前没有支持快速引入ts的命令哦，因为之前我们是从原生的微信小程序转到taro的，现在想引入ts，先了解一下框架这边是否支持，再决定这个工作量和难度要不要继续下去哈

[shenghanqin]

我单从项目维护的角度来说的话和issue维护几个月的发现，taro 2.0引入了webpack，在编译方面更加厉害，并且taro源码也都是用ts写的。这里我想的方案是，你重新初始化一个ts版的tarojs项目，看一下里面的配置跟js版本的差异。我觉得两者的差异可能就是增加了ts的loader。

[shenghanqin]

这里多问一句，你是最近刚刚从原始小程序直接转换成tarojs版本还是基于tarojs重构的？我自己的一个项目就是转换后重构的😊

[dpyzo0o]

不需要什么命令，直接写就好了，文件后缀改为ts tsx。项目的配置比如tsconfig之类的参照官方模版就行

[Daisy1213]

这里多问一句，你是最近刚刚从原始小程序直接转换成tarojs版本还是基于tarojs重构的？我自己的一个项目就是转换后重构的😊

是一个月前从原生的小程序转成taro，现在想把taro改为ts版本的

[Daisy1213]

不需要什么命令，直接写就好了，文件后缀改为ts tsx。项目的配置比如tsconfig之类的参照官方模版就行

最好是有命令，类似于vue-cli这种，一行命令就可以搞定的，所以先前来咨询一下

[dpyzo0o]

@Daisy1213 你说的命令具体是什么，没太明白你的意思。你现在js的项目，直接改成 .ts .tsx 加个 tsconfig 就能运行了，需要什么命令？ 自动帮你改文件名？

[Daisy1213]

我单从项目维护的角度来说的话和issue维护几个月的发现，taro 2.0引入了webpack，在编译方面更加厉害，并且taro源码也都是用ts写的。这里我想的方案是，你重新初始化一个ts版的tarojs项目，看一下里面的配置跟js版本的差异。我觉得两者的差异可能就是增加了ts的loader。

谢谢你的建议，可以作为参考，研究一下

[shenghanqin]

不需要什么命令，直接写就好了，文件后缀改为ts tsx。项目的配置比如tsconfig之类的参照官方模版就行

最好是有命令，类似于vue-cli这种，一行命令就可以搞定的，所以先前来咨询一下

哈哈，这个要看核心开发啦，我对Cli工程化能力不强。我刚从默认模板拉取了ts版本，然后把相关的TS配置弄到老项目里面。
Tarojs的使用呢，我建议用纯Tarojs组件，不要混用原生的，因为小程序生态bug还是蛮多的，挺难定位bug的，为了减轻自己的调试负担，用纯Tarojs组件会好很多。

[shenghanqin]

@Daisy1213 我这边成功用起了TypeScript啦

1. 用了默认模板的ts配置
2. 使用Path Intellisense插件来提示文件路径
3. 参照Taro-ui的组件写法来撰写自己的组件

• 定义了基础的Component.ts
• 定义了.d.ts定义
• 定义了属性细致代码

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "removeComments": false,
    "preserveConstEnums": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "outDir": "lib",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "baseUrl": ".",
    "rootDir": ".",
    "jsx": "preserve",
    "jsxFactory": "Taro.createElement",
    "allowJs": true,
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types",
      "global.d.ts",
      "types"
    ],
    "paths": {
      "components/*": [
        "src/components/*"
      ],
      "constants/*": [
        "src/constants/*"
      ],
      "pages/*": [
        "src/pages/*"
      ],
      "types/*": [
        "src/types/*"
      ],
      "utils/*": [
        "src/utils/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "compileOnSave": false
}

// .d.ts
import { CommonEventFunction } from '@tarojs/components/types/common'
import AtComponent from './base'

export interface VideoPlayerProps extends AtComponent {
  /**
   * 视频地址
*/
  src: string
  /**
   * 视频封面
  */
  poster: string
  /**
   * 是否正在播放
  */
  isPlay: boolean
  /**
   * 事件：播放后
  */
  onPlay: CommonEventFunction
  /**
   * 事件：播放结束
  */
  onEnd: CommonEventFunction
}


export interface VideoPlayerState extends AtComponent {
  /**
   * 是否全屏
  */
  isFull: boolean
}

// tsx

import Taro, { Component, Config } from '@tarojs/taro'
import PropTypes, { InferProps } from 'prop-types'
import { View, Block, Video, Image } from '@tarojs/components'


import './styles.styl'


import { VideoPlayerProps, VideoPlayerState } from 'types/video-player'

import AtComponent from '../component'
// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

export default class VideoPlayer extends AtComponent<VideoPlayerProps, VideoPlayerState> {

  public static defaultProps: VideoPlayerProps
  public static propTypes: InferProps<VideoPlayerProps>

  constructor(props: VideoPlayerProps) {
    super(props)
    this.state = {
      isFull: false
    }
  }

  playVideo = () => { }

  playEnded = (e) => {
    const { onEnd } = this.props
    const { isFull } = this.state
    if (isFull) {
      this.videoCtx = Taro.createVideoContext('myVideo')
      this.videoCtx.exitFullScreen()
    }
    onEnd(e)
  }

  onFullScreenChange = (e) => {
    const { fullScreen } = e.currentTarget || {}
    this.setState({
      isFull: fullScreen
    })
  }

  render() {
    const { src, isPlay, poster, style } = this.props

    return (
      <Block>
        {
          isPlay
            ? (
              <Video
                className='video'
                src={src}
                id='myVideo'
                controls
                autoplay
                onEnded={this.playEnded}
                onPlay={this.playVideo}
                onFullscreenChange={this.onFullScreenChange}
              />
            )
            : (
              <View className='video-container'>
                <Image className='poster' mode='aspectFill' src={poster} style={style}></Image>
                {this.props.children}
              </View>
            )
        }
      </Block>
    )
  }
}

VideoPlayer.defaultProps = {
  src: '',
  poster: '',
  isPlay: false,
  onPlay: () => { },
  onEnd: () => { }
}

VideoPlayer.propTypes = {
  /**
   * 视频地址
  */
  src: PropTypes.string,
  /**
   * 视频封面
  */
  poster: PropTypes.string,
  /**
   * 是否正在播放
  */
  isPlay: PropTypes.bool,
  /**
   * 事件：播放后
  */
  onPlay: PropTypes.func,
  /**
   * 事件：播放结束
  */
  onEnd: PropTypes.func
}

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~