TypeScript基础【学习笔记】

43 阅读 0 评论 0 点赞

一、TypeScript 开发环境搭建

下载并安装 Node.js
使用 npm 全局安装 typescript
进入命令行
输入：npm i -g typescript
创建一个 ts 文件
使用 tsc 对 ts 文件进行编译
进入命令行
进入 ts 文件所在目录
执行命令：tsc xxx.ts

二、基本类型

类型声明
- 通过类型声明可以指定 TS 中变量（参数、形参）的类型
- 类新声明给变量设置了类型，使得变量只能存储某种类型的值
- 语法：
```
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型 {
    ...
}
```
自动类型判断
- TS 拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS 编译器会自动判断白能量的类型
- 如果变量的声明和赋值是同时进行的，可以省略掉类型声明

新增类型

类型	例子	描述
any	*	任意类型
unknown	*	类型安全的 any
void	空值 (undefined)	没有值 (或 undefined)
never	没有值	不能是任何值
tuple	[4, 5]	元组，固定长度数组
enum	enum(A, B)	枚举

// 使用字面量声明
let a: 10;
a = 10;

// 可以使用 | 来连接多个类型（联合类型）
let b: 'male' | "female";
b = 'male';
b = 'female';

let c: boolean | string;

// 相当于关闭了 TS 类型检测
let d: any;
// let d; // 隐式的 any
d = 10;
d = 'hello';
d = true;

let e: unknown;
e = 10;
e = 'hello';
e = true;

let s: string;
// d: any，可以赋值给任意变量
// s = d;
e = 'hello';
// unknown 类型的变量不能直接赋值给其他变量
if (typeof e === 'string') {
    s = e; // 类型不同
}

// 类型断言
s = e as string;
s = <string>e;

function fn(): void {
    return;
}

function fn2(): never {
    throw new Error('报错了');
}

// 变量后面加上一个 ？表示属性是可选的
let b: {name: string, age?: number};
b = {name: 'abc', age: 18}; // 需要 name 属性

let c: {name: string, [propName: string]: any};
c = {name: 'aaa', age: 18, gender: 'male'}; 

// 设置函数结构的类型声明：
// 语法：(形参: 类型, 形参: 类型 ...) => 返回值
let d: (a: number, b: number) => number;
// d = function(n1: string, n2: string): number {
//     return 10;
// } // 报错

let e: string[]; // 表示字符串数组
e = ['a', 'b', 'c'];
let f: number[];
f = [1, 2, 3]
let g: Array<number>;
g = [1, 2, 3];

// 
let h: [string, number]; // 元组
h = ['hello', 123];

// enum
enum Gender {
    Male = 0,
    Female = 1
}
let i: {name: string, gender: Gender};
i = {
    name: 'abc',
    gender: Gender.Male
}
// console.log(i.gender === Gender.Male);

let j: { name: string } & { age: number }; // & 表示同时
// j = {name: '孙悟空', age: 18};

// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5;
let k: myType;
let l: myType;
let m: myType;
k = 5;

三、编译选项

1、自动编译文件

编译文件时，使用 -w 指令后，TS 编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译
示例：
tsc xxx.ts -w

2、自动编译整个项目

直接使用 tsc 指令，可以自动将当前项目下的所有 ts 文件编译为 js 文件

直接使用 tsc 命令的前提时要现在项目根目录下创建一个 ts 的配置文件 tsconfig.json
配置选项：
include

定义希望被被编译文件所在目录
默认值：["**/*"]
示例：“include”: ["src/**/*", "tests/**/*"]

exclude

定义需要排除在外的目录
默认值：["node_modules", "bower_components", "jspm_packeages"]
示例：“exclude”: ["./src/hello/**/*"]

extends

定义被继承的配置文件
示例：“extend”: "./configs/base"
files
指定被编译文件的列表，只有需要编译的文件少时才会用到
示例：
"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    ...
]
compilerOptions
编译选项是配置文件中非常重要也比较复杂的配置选项
在 compilerOptions 中包含多个子选项，用来完成对编译的配置
项目选项
target
设置 ts 代码编译的目标版本

可选值：
ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
示例：
"compilerOptions": {
    "target": "ES6"
}
lib
指定代码运行时所包含的库（宿主环境）

可选值：
ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …
示例：
"compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", 'DOM'],
    "outDir": "dist",
    "outFile": "dist/aa.js"
}
module
设置编译后代码使用的模块化系统

可选值：
CommonJS、UMD、AMD、System、ES2020、ESNext、None
示例：
"compilerOptions": {
    "module": "CommonJS"
}
示例：
{
    "include": [
        "./src/**/*" // **：表示任意目录  *：表示任意文件
    ],
    // "exclude": [
    //     "./src/hello/**/*"
    // ],
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES6",
        // "lib": ["es6", "dom"],
        "outDir": "./dist", // 用来指定编译后文件所在的目录
        // "outFile": "./dist/app.js"   // 将代码合并为一个文件
        "allowJs": true, // 是否对 js 文件进行编译
        "checkJs": true,    // 是否检查 js 代码是否符合规范
        "removeComments": true, // 是否移除注释
        "noEmit": false, // 不生成编译后的文件
        "noEmitOnError": true,  // 当有错误时不生成编译后的文件
        "strict": true,    // 所有严格检查的总开关
        "alwaysStrict": true,  // 用来设置编译后的文件是否使用严格模式
        "noImplicitAny": true,  // 不允许隐式的 any 类型
        "noImplicitThis": true,    // 不允许不明确类型的 this
        "strictNullChecks": true,  // 严格地检查空值
    }
}

3、webpack

初始化项目
- 进入项目根目录，执行命令 npm init -y：创建 package.json 文件
下载构建工具
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
- webpack：构建工具 webpack
- webpack-cli：webpack 的命令行工具
- webpack-dev-server：webpack 的开发服务器
- typescript：ts 编译器
- ts-loader：ts 加载器，用于在 webpack 中编译 ts 文件
- html-webpack-plugin：webpack 中 html 插件，用来自动创建 html 文件
- clean-webpack-plugin：webpack 中的清除插件，每次构建都会先清除目录

根目录下创建 webpack 的配置文件 webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 写入 webpack 的所有配置信息
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在位置
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后的文件
        filename: 'bundle.js',
        // 不使用 箭头函数
        environment: {
            arrowFunction: false
        }
    },
    // 指定 webpack 打包时使用的模块
    module: {
        // 指定要 load 的 rule
        rules: [
            {
                // test 指定规则生效的文件
                test: /\.ts$/,
                // 要使用的 loader
                use: [
                    // 配置 babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置 babel
                        options: {
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            'chrome': "127",
                                            'ie': '11'
                                        },
                                        // 指定 core-js 的版本
                                        "corejs": "3",
                                        // 使用 corejs 的方式
                                        "useBuiltIns": "usage" // 表示按需加载
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-module/
            }
        ]
    },
    // 配置 webpack 插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的 title"
            template: "./src/index.html"
        }),
    ],
    resolve: {
        extensions: ['.ts', '.js']
    }
};

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » TypeScript基础【学习笔记】

点赞(0) 打赏

本文分类：文章资讯
本文标签：TypeScript基础【学习笔记】
浏览次数：43 次浏览
本文链接：https://freeymw.com/article/20478.html

上一篇 > 240803-沉侵式翻译插件配置Ollama的API实现网页及PDF文档的翻译
下一篇 > react native 和 flutter 区别

评论列表共有 0 条评论

暂无评论

TypeScript基础【学习笔记】

一、TypeScript 开发环境搭建

二、基本类型

三、编译选项

1、自动编译文件

2、自动编译整个项目

3、webpack

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复