ArkUI-X需要的开发语言简介

原创

IT蜗壳-Tango

修改于 2024-01-28 23:59:04

2860

修改于 2024-01-28 23:59:04

文章被收录于专栏：ArkUI-X从入门到实践

编程语言介绍

在前面两篇内容，我们一起从0开始部署了一个跨平台的APP编译以及运行，那么我们该如何编写属于我们自己的APP呢？它又是用什么语言来开发的呢？

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。既然它是在TS的基础上演变而来的，那么它和TS以及我们最长用JS(JavaScript)有什么样的关系呢？大家可以参考下面这个来着官网的关系图

由图可以看出，ArkTS则是TypeScript的超集，TypeScript是JavaScript的超集。那么既然ArkTS包含TS和JS，我们有必要学习一下TS，以便我们更好的理解我们即将学习的这门语言。

TS的开发环境

TS的开发环境非常简单，只需要一个编译工具以及Nodejs即可，我们在前面安装DevEco Studio时就已经安装过了。开发工具我们可以使用VSCode等工具。

第一个TS代码

我们可以新建一个新工程，运行以下命令，一切使用默认配置即可

cd 你的项目目录
npm init -y

安装TypeScript，我们运行下面的命令进行全局安装

npm i typescript -g

如果一致卡在这里可以使用国内源再次尝试即可

npm config set registry http://mirrors.cloud.tencent.com/npm/

安装完成后，运行一下代码检查一下版本

tsc --version

创建一个TS的配置文件，运行以下代码

tsc --init

运行完成后，我们在项目目录下可以看到多了一个tsconfig.json的文件，这个文件我们后期再慢慢介绍。

我们尝试使用tsc命令编译一个TS文件。问了方便操作，我们用VSCode打开我们的项目目录,并创建一个src文件夹，然后在src文件夹下创建一个index.ts的文件，文件内容如下

let str1 : string = "Hello TS!";

我们运行下面这个命令进行编译,运行完成后我们会看到自动生成了一个同名的js文件。

tsc ./src/index.ts

配置构建工具webpack，运行以下命令进行安装，这里需要安装三个工具

npm i webpack webpack-cli webpack-dev-server -D

稍等片刻即可完成安装。

通常我们配置webpack环境时，需要设置两个环境，一个开发环境一个生成环境，因为两个的配置稍微有点区别。还可以设置一个公共配置，然后通过插件来合并配置文件即可。我们在工程目录下创建一个build文件夹，然后再创建三个配置文件webpack.base.config.js,webpack.config.js,webpack.dev.config.js,webpack.pro.config.js。三个文件内容分别如下所示

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        'app': './src/index.jsx'
    },
    output: {
        filename: '[name].[chunkhash:8].js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [{
                    loader: 'babel-loader'
                }],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/tpl/index.html'
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
}

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')

module.exports = (env, argv) => {
    let config = argv.mode === 'development' ? devConfig : proConfig;
    return merge(baseConfig, config);
};

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        port: 8080
    }
}

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

安装ts-loader,用来加载ts文件，需要注意的是还需要在本地安装一遍typescript

npm i ts-loader typescript -D

为了方便我们后面的结果查看，还需要安装一个html-webpack-plugin

npm i html-webpack-plugin -D

我们再创建一个./src/tpl/index.html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
</head>
<body>
    <div class="app"></div>
</body>
</html>

以上这些配置对应的都是我们第一个配置文件中涉及的内容。

总结

今天我以前创建了TS的环境，但值得注意的是我们还未完全完成环境配置，目前只是第一个配置文件的内容，大家先小步快跑起来一起搭建好，我们下篇内容继续。

我是Tango，一个热爱分享技术的程序猿，我们下期见。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

登录后参与评论

0 条评论

热度