Skip to content

Commit de5fc13

Browse files
GuoYuFu123GuoYuFu123
committed
feat: ts进阶
1 parent 71005f6 commit de5fc13

9 files changed

+133
-1
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@
77
#typescript 进阶 ignore
88
/typescript进阶/node_modules
99
/typescript进阶/build
10+
/typescript进阶/dist
1011
/typescript进阶/package-lock.json
12+
/typescript进阶/.parcel-cache

‎typescript进阶/index-parcel.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
</body>
10+
<!-- <script src="./src/2-8parcel编辑运行.ts"></script> -->
11+
12+
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
13+
<script src="./src/2-9描述文件的全局类型.ts"></script>
14+
<script src="./src/2-11泛型中keyof的语法.ts"></script>
15+
<script>
16+
17+
</script>
18+
</html>

‎typescript进阶/package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,18 @@
55
"main": "index.js",
66
"scripts": {
77
"dev": "tsc -w",
8-
"test": "ts-node ./src/2-3Enum枚举类型.ts"
8+
"test": "ts-node ./src/2-3Enum枚举类型.ts",
9+
"parcel": "parcel ./index-parcel.html"
910
},
1011
"keywords": [],
1112
"author": "",
1213
"license": "ISC",
1314
"devDependencies": {
15+
"parcel": "^2.0.0-alpha.3.2",
1416
"ts-node": "^8.9.1",
1517
"typescript": "^3.8.3"
18+
},
19+
"dependencies": {
20+
"jquery": "^3.5.1"
1621
}
1722
}

‎typescript进阶/src/2-10模块代码的类型描述文件.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import $ from 'jquery';
2+
3+
$(() => {
4+
$('body').html('<div>12hah34</div>')
5+
})

‎typescript进阶/src/2-11泛型中keyof的语法.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
interface Person {
2+
name: string;
3+
age: number;
4+
gender: string;
5+
}
6+
7+
/**
8+
* 用extend的语法
9+
* keyof进行属性遍历，
10+
* T extends keyof Person
11+
* 相当于
12+
* type name = "name";
13+
* T = name;
14+
* type age = "age";
15+
* T = age;
16+
* type gender = "gender";
17+
* T = gender;
18+
*/
19+
class Teacher {
20+
constructor(private info: Person) {
21+
22+
}
23+
// getInfo(key: string) {
24+
// if (key === 'name' || key === "age" || key === 'gender'){
25+
// return this.info[key]
26+
// }
27+
// }
28+
getInfo<T extends keyof Person>(key: T):Person[T] {
29+
return this.info[key]
30+
}
31+
}
32+
33+
const teacher1 = new Teacher({
34+
name: "dell",
35+
age: 12,
36+
gender: 'mode'
37+
})
38+
39+
const test = teacher1.getInfo('name');
40+
console.log(test)

‎typescript进阶/src/2-8parcel编辑运行.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// parcel的中文网址： https://parceljs.org/
2+
// 几乎是0配置
3+
const student:string = 'guoguo';
4+
console.log(student)

‎typescript进阶/src/2-9描述文件的全局类型.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
let aaa: string = '111';
2+
console.log(aaa);
3+
4+
$(() => {
5+
console.log('123')
6+
new $.fn.init();
7+
})
8+
9+
10+
$(() => {
11+
$('body').html('<div>12hah34</div>')
12+
})
13+
14+
$(function() {
15+
$('body').html('<div>12hah34</div>')
16+
})

‎typescript进阶/src/d.ts/jquery.d.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// 定义全局变量
2+
// declare var $:(params:() => void) => void;
3+
4+
interface JqueryInstance {
5+
html: (html: string) => JqueryInstance;
6+
}
7+
8+
// 定义全局函数
9+
// 函数重载
10+
declare function $(readFunc: () => void):void;
11+
declare function $(selector:string):JqueryInstance;
12+
13+
// 全局如何对对象进行定义，以及如何对类进行定义，以及命名空间的嵌套
14+
declare namespace ${
15+
namespace fn {
16+
class init{}
17+
}
18+
}
19+
20+
21+
22+
// 使用接口的方式实现函数重载
23+
// interface JQuery{
24+
// (readyFunc:() => void): void
25+
// (selector: string): JqueryInstance
26+
// }
27+
// declare var $: JQuery;
28+

‎typescript进阶/src/d.ts/jquery1.d.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// npm 模块化声明
2+
declare module 'jquery' {
3+
interface JqueryInstance {
4+
html: (html: string) => JqueryInstance;
5+
}
6+
function $(readyFunc: () => void): void;
7+
function $(selector: string): JqueryInstance;
8+
namespace $ {
9+
namespace fn {
10+
class init { }
11+
}
12+
}
13+
export = $;
14+
}

0 commit comments

Comments
 (0)