TypeScript学习文档

最新推荐文章于 2025-03-28 11:59:33 发布

大卡拉米

最新推荐文章于 2025-03-28 11:59:33 发布

阅读量3.1k

点赞数 25

文章标签： typescript 学习 javascript

本文链接：https://blog.youkuaiyun.com/zsy1833579605/article/details/139291154

版权

TypeScript

中文官方文档：https://www.tslang.cn/index.html

中文文档(简洁点)：https://typescript.bootcss.com

TS前言

概述

TypeScript 是 JavaScript 的一个超集，支持JS的所有语法，且扩展了一些新的语法
- 强类型：声明变量时可以指定类型
- 扩展了一些新的类型
  - 元组/枚举/联合类型/…
  - 接口
  - 泛型
由 Microsoft 开发，代码开源于 GitHub 上
浏览器是不支持直接运行TS, 需要打包转换为JS后才能运行

在这里插入图片描述

特点

始于js 归于js

TS基于JS，可以编译出纯净、简洁的JS代码

浏览器不支持直接运行TS，需要打包转换为JS后才能运行

强大的类型系统

TS是强类型语言，对于数据划分了多个类型

类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

先进的js

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，以帮助建立健壮的组件。

TS vs. JS

	TS	JS
语言类型	强类型	弱类型
数据类型	TS在JS的基础上扩展了一些新的数据类型，如元组、枚举、联合类型、接口、泛型
浏览器运行代码	浏览器不支持运行TS，需打包转换为JS后才可运行

安装

npm install -g typescript

版本查询

tsc -V

使用webpack打包TS

初始化项目包
```
npm init -y
```
初始化配置tsconfig.json
```
tsc --init
```

下载依赖

npm i -D typescript webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin ts-loader cross-env

入口JS: src/main.ts
```
document.body.innerHTML = 'Hello TS'
```

index页面: public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack & TS</title>
  </head>
  <body>

  </body>
</html>

build/webpack.config.js

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

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

function resolve (dir) {
     
  return path.resolve(__dirname, '..', dir)
}

module.exports = {
     
  mode: isProd ? 'production' : 'development',
  entry: {
     
    app: './src/main.ts'
  },

  output: {
     
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js',
    clean: true
  },

  module: {
     
    rules: [
      {
     
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')]
      }
    ]
  },

  plugins: [

    new HtmlWebpackPlugin({
     
      template: './public/index.html',
      inject: 'body'
    })
  ],

  resolve: {
     
    // 哪些文件后缀名可以省略
    extensions: ['.ts', '.tsx', '.js', 'jsx']
  },

  devtool: isProd ? false : 'cheap-module-source-map',

  devServer: {
     
    host: 'localhost', // 主机名
    port: 8081,
    open: true
  },
}

配置打包命令

"scripts": {
     
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
  "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
},

运行与打包

npm run dev : # 开发环境运行
npm run build : # 生产环境打包

TS基础类型

基础类型

⚠冒号后空一格，更规范

基础类型总览

		说明
布尔值	`let isDone: boolean = false;`	true、false
数字	`let age: number = 10`	1. 整数、小数 2. 十进制、十六进制、二进制、八进制
字符串	`let uname:string = 'tom'`
undefined	`let u: undefined = undefined`	只有undefined一个值一般与其他类型联合使用
null	`let n: null = null`	只有null一个值一般与其他类型联合使用
数组	1.`let arr1: number[] = [1, 2, 3]` 2.`let arr2: Array<number> = [1, 2, 3]`	指定元素只能为数字的数组第二种创建方法为使用数组泛型
元组Tuple	`let t1: [string, number]`	指定元素类型和个数的数组此处为数组只能有2个元素且元素分布是字符串、数字
枚举enum	`enum Color {Red=1, Green, Blue}`	为一组互异的数值或字符串赋予友好的名字
any	`let notSure: any = 4`	可存储任意类型的值能不用any尽量不用
void	`function fn(): void {}`	常用来指定函数没有返回值 1. 不返回 2. 返回undefined
object	`function fn2(): object {}`	非原始类型即除number，string，boolean之外的类型
联合类型	`let c1: number	string = 3`

枚举enum

枚举可以为一组互异的数值或字符串赋予友好的名字

数值枚举

默认情况下，元素编号从 0 开始

通过给第一个元素赋值可以修改元素编号的开始值
在这里插入图片描述

enum Color {
   
  //默认情况下，从 0 开始为元素编号，此处改为以1开始
  Red=1, Green, Blue
}
console.log(Color)

const cat = {
   
  name: 'tom',
  color: 1
}

switch (cat.color) {
   
  case Color.Red:
    console.log('猫的颜色是红色')
    break;
  case Color.Green:
    console.log(

最低0.47元/天解锁文章