Typescript实际项目开发

朱雀 2021-07-24 22:46 485阅读 0赞

# 脚手架的安装 #

**通过node安装**  
首先，你需要使用 npm 全局安装@tarojs/cli

npm install -g @tarojs/cli

需要安装某个固定版本，或者回到某个版本，例如我们要安装 1.3.9

npm install -g @tarojs/cli@1.3.9

# 使用 #

使用命令创建模板项目

taro init myApp

![安装视图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]  
安装时一直回车，会选择Typescript语法、sass预处理语言和默认模板  
最后等待自动的cnpm install 拉取模板，这一步是自动的，等待就好  
![创建成功视图][20200226105825257.png]  
等出现这个提示之后，项目就创建成功了

# 让项目跑起来 #

cd 到项目文件夹下，使用npm run dev:h5命令启动项目  
![项目启动视图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]  
启动完成后会自动打开网页显示初始的模板项目  
![运行效果视图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 2]  
这样，我们就可以根据项目需求开始开发了

# 接口 #

在src目录下新建文件夹，在文件夹内新建接口文件  
![接口文件夹创建视图][20200226111042954.png]  
接口的使用  
interface.tsx

export interface Istate {
        username: string,
        sex?: string,
        [propname: string]: any
    }
    
    export interface IChildProps{
        age:number
    }

在需要使用的地方引入  
index.tsx

import IState=require("../../interface/interface");
    export default class Index extends Component {
    
      config: Config = {
        navigationBarTitleText: '首页'
      }
      state:IState.Istate={
        username:"张三疯",
        sex:"男",
        userId:"01001"
      }
    
      render () {
        let {username} = this.state;
        return (
          <View className='index'>
            <Text>Hello world! {username}</Text>
          </View>
        )
      }
    }

# 组件的创建和接口使用 #

在合适的地方新建组件引入到要使用的文件内并且使用

import Child from './Child'
    <View className='index'>
           <Text>Hello world! {username}</Text>
           <Child></Child>
    </View>

## 组件的传值 ##

index.tsx

<View className='index'>
           <Text>Hello world! {username}</Text>
           <Child age={100}></Child>
    </View>

子组件内使用  
Child.tsx

return (
          <View className='index'>
            <Text>Child----> {this.props.age}</Text>
          </View>
    )

## 函数的封装和使用 ##

创建函数文件并且新建函数  
![函数创建视图][20200226112649101.png]  
meth.ts

function math(a:number,b:number):number{
        return a+b;
    }
    export default math;

在需要使用的地方引入  
Child.tsx

import math from '../../utils/meth'

return (
          <View className='index'>
            <Text>Child----> {this.props.age}</Text>
            <View>{math(1,2)}</View>
          </View>
    )

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]: /images/20210724/12c62719c08343f498433ca3b9768be8.png
[20200226105825257.png]: /images/20210724/2c588965f74c4fc080459e93176f12a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]: /images/20210724/82254719c40d4ee9a8a266d4b5680428.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 2]: /images/20210724/3ac990d345e74e47a621c24820f3f08b.png
[20200226111042954.png]: /images/20210724/91b51097d191413980622ecafec4cc8a.png
[20200226112649101.png]: /images/20210724/1617225b9ed641b781b6f917aa20ebe5.png