TS环境搭建及基础数据类型

162 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情

ts运行环境

tsc

全局安装ts

npm i typescript -g

查看安装版本

tsc -v

编译TS文件

tsc 文件路径

我们创建一个ts文件

main.ts

const message: string = "scc"

对他进行编译

会发现出现了一个main.js文件

编译.png

webpack搭建ts运行环境

全局安装tslib和@types/node,安装webpack webpack-cli,安装ts-loader

npm i tslib @types/node -g
npm i webpack webpack-cli
npm i ts-loader

tslib和@types/node时ts-loader依赖的包,ts-loader解析ts文件


const path = require("path")
module.exports = {
    mode: "development",
    entry: "./src/main.ts",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
    module: {
        rules: [{
            test: /.ts$/,
            loader: "ts-loader"
        }],
    }
}

配置入口entry,出口output,模块module的rules的loader

在package.json配置

"scripts": {
        "build": "webpack"
},

运行npm run build

webpack运行.png

dist文件打包完成

搭建热更新

安装webpack-dev-serve

安装html-webpack-plugin


npm i webpack-dev-serve
npm i html-webpack-plugin

第一个webpack热更新模块,第二个是静态资源的模板

只需要配置一下plugins

//定义HtmlWebpackPlugin
const HtmlWebpackPlugin = require("html-webpack-plugin")
//在webpack.config.js中配置
plugins: [
    new HtmlWebpackPlugin({
        template: "./index.html"
    })
]

在package.json中配置

"scripts": {
    "build": "webpack",
    "serve": "webpack serve"
},

此时运行npm run serve

开启一个服务器

热更新.png

热更新启动成功

ts数据类型定义

字符串类型

const message: string = "scc"

数值类型

const num: number = 123

布尔类型

const flag: boolean = true

数组类型

const arr: string[] = []
const arr: Array<string> = []

对象类型

const obj = {
  name:string,
  age:number
}

元组类型

const person:[string,number,boolean] = ["scc",18,true]

元组和数组差不多,但是数组存储的是同种类型的数据,而元组可以存储不同类型的数据

any类型

any类型数据可以给他赋值任意类型的数据且不报错,并且对他的任何操作都不报错

any.png

unknown类型

1.unknown类型的数据可以被赋值为任意类型数据

unknown被赋值.png

unknown本身就是一个未知的数据类型,可以接收任意的数据类型

2.unknown类型的数据,只能赋值给any和unknown类型的数据

unknown赋值.png

因为我们不知道unknown是什么类型的数据,所以无法把一个未知类型的值,赋值给已知类型的变量

3.执行unknown类型

unknown执行.png

是无法被执行的,而any类型是可以的

void类型

当函数没有返回值时,他的返回值就是void类型

void类型.png

null和undefinder

null类型的数据只能赋值为null,undefinder同样也是

null和undefinder.png

never类型

never类型表示永远不存在的值的类型,当函数抛出错误,或者无限循环时,返回值就是never类型

never类型.png

never类型可以用于检测代码条件是否被穷举,大家感兴趣可以去知乎看看尤大的回答

结束语

分享到此结束,大家要加油,我要努力