typescript基础学习2
更新时间: 2023-03-02 18:18:44
# 命名空间
我们在工作中无法避免全局变量造成污染，TypeScript提供了namespace避免这个问题出现
- 内部模块，主要用于组织代码，避免命名冲突
- 命名空间内的类默认私有
- 通过export暴露
- 通过namespace关键字定义
TypeScript与ECMAScript 2015一样，任何包含顶级import或者export的文件都被当成一个模块。相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的（因此对模块也是可见的）
命名空间中通过export将想要暴露的部分导出，如果不用export导出是无法读取到值的
namespace a {
export const Time:number = 1000
export const fn = <T>(arg:T):T => {
return arg
}
fn(Time)
}
namespace b {
export const Time:number = 1000
export const fn = <T>(arg:T):T => {
return arg
}
fn(Time)
}
console.log(a.Time) //1000
console.log(b.Time) //2000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 嵌套命名空间
namespace a {
export namespace b {
export class Vue {
parameters: string
constructor(parameters:string) {
this.parameters = parameters
}
}
}
}
let v = a.b.Vue
new v('1')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 抽离命名空间
// a.ts
export namespace V {
export const a = 1
}
1
2
3
4
2
3
4
// b.ts
import {V} from './a'
console.log(V) // {a:1}
1
2
3
4
2
3
4
# 简化命名空间
namespace A {
export namespace B {
export const C = 1
}
}
import x = A.B
console.log(x.C) //1
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 合并命名空间
重名的命名空间会合并
# 声明文件d.ts
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有子属性的）全局对象
interface 和 type 声明全局类型
1
2
3
4
5
6
2
3
4
5
6
# Rollup 构建TS项目
# 安装依赖
- 全局安装rollup
npm install rollup -g - 安装TypeScript
npm install typescript -D - 安装TypeSceipt转换器
npm install rollup-plugin-typescript2 -D - 安装代码压缩插件
npm install rollup-plugin-terser -D - 安装rollup web服务
npm install rollup-plugin-serve -D - 安装热更新
npm install rollup-plugin-livereload -D - 引入外部依赖
npm install rollup-plugin-node-resolve -D - 安装配置环境变量用来区分本地和生产
npm install cross-env -D - 替换环境变量给浏览器使用
npm install rollup-plugin-replace -D
# 配置json文件
npm init -y
// package.json
{
"name":"rollupTS",
"verson":"1.0.0",
"discription":"",
"main":"index.js",
"scripts":{
"test":"echo \"Error: no test specified\" && exit 1",
"dev":"cross-env NODE_ENV=development rollup -c -w",
"build":"cross-env NODE_ENV=production rollup -c"
},
"keywords":[],
"author":"",
"lisense":"ISC",
"devDependencies":{
"cross-env": "^7.0.3",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.1",
"typescript": "^4.5.5"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 配置 rollup 文件
// rollup.config.js
import ts from 'rollup-plugin-typescript2'
import path from 'path'
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import resolve from 'rollup-plugin-node-resolve'
import repacle from 'rollup-plugin-replace'
// 判断是哪个环境
const isDev = () => {
return process.env.NODE_ENV === 'development'
}
export default {
//入口
input: "./src/main.ts",
//出口
output: {
file: path.resolve(__dirname, './lib/index.js'),
format: "umd",
sourcemap: true
},
plugins: [
// 为了识别ts
ts(),
//代码压缩
terser({
compress: {
drop_console: !isDev()
}
}),
// 注入环境变量
repacle({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
// 配置完引用路径就不必写完整了 "./foo/index.js" 可简写成 "./foo"
resolve(['.js', '.ts']),
// 热更新
isDev() && livereload(),
// 启动页面
isDev() && serve({
open: true,
openPage: "/public/index.html"
})
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# 配置tsconfig.json
{
"compilerOptions": {
"target": "es5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
"module": "ES2015", /* Specify what module code is generated. */
"sourceMap": true, /* Create source map files for emitted JavaScript files. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
"strict": true, /* Enable all strict type-checking options. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
然后npm run dev或者npm run build就可以了
# webpack构建TS项目
# 安装依赖
- 安装webpack
npm install webpack -D - webpack4以上需要安装webpack-cli
npm install webpack-cli -D - 编译TS
npm install ts-loader -D - TS环境
npm install typescript -D - 热更新服务
npm install webpack-dev-server -D - HTML模板
npm install html-webpack-plugin -D
# 配置文件
// webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/index.ts",
mode: "development",
output: {
path: path.resolve(__dirname, './dist'),
filename: "index.js"
},
stats: "none",
resolve: {
extensions: ['.ts', '.js'],
alias: {
'@': path.resolve(__dirname, './src')
}
},
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader"
}
]
},
devServer: {
port: 1988,
proxy: {}
},
plugins: [
new htmlWebpackPlugin({
template: "./public/index.html"
})
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//package.json
{
"name": "ts-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.4.2",
"typescript": "^4.5.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
然后就可以愉快的玩耍了