Skip to content

Commit 37dc315

Browse files
XiaoCdeGitHubXiaoCdeGitHub
committed
TS继续学习
1 parent d6b5b81 commit 37dc315

16 files changed

+539
-10
lines changed

‎LearnReact/React基本语法/01_React初体验/05-计数器实现.html

+27-7
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,47 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<title>Document</title>
89
</head>
10+
911
<body>
1012
<div id="root"></div>
1113

1214
<script src="../lib/react.js"></script>
1315
<script src="../lib/react-dom.js"></script>
1416
<script src="../lib/babel.js"></script>
15-
17+
1618
<script type="text/babel">
17-
const root = ReactDOM.createRoot(document.querySelector("#root"));
19+
const root = ReactDOM.createRoot(document.querySelector("#root"))
1820
class App extends React.Component {
19-
21+
constructor() {
22+
super()
23+
this.state = {
24+
message: "Hello World",
25+
counter:100
26+
}
27+
}
28+
render() {
29+
const { message } = this.state
30+
31+
return (
32+
<div>
33+
<h2>
34+
count:
35+
{counter}
36+
</h2>
37+
<button onClick={this.increment}>+1</button>
38+
<button onClick={this.decrement}>-1</button>
39+
</div>
40+
)
41+
}
2042
}
21-
22-
23-
24-
root.render();
43+
root.render(<App/>)
2544
</script>
2645
</body>
46+
2747
</html>

‎LearnTS/TS学习/04_TypeScript函数类型/06_函数类型-构造签名.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const foo = function(){}
2+
// const f = new foo()
3+
4+
class Person{
5+
6+
}
7+
8+
interface ICTORPerson{
9+
new (): Person
10+
}
11+
function factory(fn:ICTORPerson) {
12+
const f = new fn()
13+
return f
14+
}
15+
factory(Person)
16+
export { }

‎LearnTS/TS学习/04_TypeScript函数类型/07_函数的参数-可选参数.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
function foo(x: number, y?: number) {
2+
if (y !== undefined) {
3+
console.log(y + 10);
4+
}
5+
}
6+
foo(10)
7+
foo(10, 20)
8+
//可选参数的类型是？ number|undefined联合类型
9+
export { }

‎LearnTS/TS学习/04_TypeScript函数类型/08_函数的参数-参数默认值.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
function foo(x: number, y: number = 100) {
2+
console.log(y + 10);
3+
4+
}
5+
foo(10)
6+
foo(10,undefined)
7+
foo(10,55)
8+
export { }
9+
//函数的参数可以有默认值
10+
//1.有默认值的情况下，参数的类型注解可以省略
11+
//2.有默认值的参数，是可以接收一个undefined的值
12+

‎LearnTS/TS学习/04_TypeScript函数类型/09_函数的参数-剩余参数.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function foo(...args: (string | number)[]) {
2+
3+
}
4+
foo(123, 321)
5+
foo("abc",1121,"cba")

‎LearnTS/TS学习/04_TypeScript函数类型/10_函数的重载-案例分析.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// function add(arg1, arg2) {
2+
// return arg1 + arg2;
3+
// }
4+
// add(10, 20)
5+
// add("abc", "def")
6+
// add({ aaa: "aaa" }, 123)
7+
8+
//1.实现两个函数
9+
// function add1(num1: number, num2: number) {
10+
// return num1 + num2;
11+
// }
12+
// function add2(str1: string, str2: string) {
13+
// return str1 + str2;
14+
// }
15+
// add1(10, 20)
16+
// add2("abc", "def")
17+
18+
//2.错误的做法 联合类型是不可以的
19+
// function add(arg1: number | string, arg2: number | string) {
20+
// return arg1 + arg2;
21+
// }
22+
23+
//3.ts中函数的重载写法
24+
//3.1先编写重载签名
25+
function add(num1: number, num2: number): number
26+
function add(str1: string,str2:string):string
27+
28+
//3.2编写通用函数实现
29+
function add(arg1: any, arg2: any) {
30+
return arg1 + arg2;
31+
}
32+
add(10, 10)
33+
add("abc", "def")
34+
// add({ aaa: "aaa" }, 123)//err:没有与此调用匹配的重载

‎LearnTS/TS学习/04_TypeScript函数类型/11_函数的重载和联合类型对比.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
//1.普通的实现
2+
//2.函数的重载签名
3+
// function getLength(arg:string):number
4+
// function getLength(arg:any[]):number {
5+
// return arg.length
6+
// }
7+
// getLength("aaa")
8+
// getLength(["aaa","bbb","ccc"])
9+
10+
11+
// //3.联合类型实现
12+
// function getLength(arg: string | any[]) {
13+
// return arg.length
14+
// }
15+
// getLength("aaa")
16+
// getLength(["aaa", "bbb", "ccc"])
17+
//可以使用联合类型的情况，尽量使用联合类型
18+
19+
//4.对象类型实现
20+
function getLength(arg: { length: number }) {
21+
return arg.length
22+
}
23+
getLength("aaa")
24+
getLength(["aaa", "bbb", "ccc"])
25+

‎LearnTS/TS学习/04_TypeScript函数类型/12_函数中this的默认类型.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
//1.对象中的函数中的this
2+
const obj = {
3+
name: "why",
4+
studying: function () {
5+
//默认情况下this是any类型
6+
console.log(this.name,"studying");
7+
}
8+
}
9+
obj.studying()
10+
11+
12+
//2.普通的函数
13+
function foo() {
14+
// console.log(this); 会报错
15+
}
16+
export{}

‎LearnTS/TS学习/04_TypeScript函数类型/13_函数中this的明确类型.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
//1.对象中的函数中的this
2+
const obj = {
3+
name: "why",
4+
studying: function () {
5+
//默认情况下this是any类型
6+
console.log(this.name,"studying");
7+
}
8+
}
9+
obj.studying()
10+
11+
12+
//2.普通的函数
13+
function foo(this:{name:string}) {
14+
console.log(this);
15+
}
16+
export{}

‎LearnTS/TS学习/04_TypeScript函数类型/14_this的内置工具使用.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
function foo(this: { name: string }, info: { name: string }) {
2+
console.log(this,info);
3+
}
4+
5+
const num = 123
6+
type FooType = typeof foo
7+
8+
//1.ThisParameterType:获取FooType类型中的this类型
9+
type FooThisType = ThisParameterType<FooType>
10+
11+
//2.OmitOmitThisParameter:删除this参数类型，剩余的函数类型
12+
type PureFooType = OmitThisParameter<FooType>
13+
14+
//3.ThisType用于绑定一个上下文的this
15+
interface IState{
16+
name: string
17+
age:number
18+
}
19+
interface IStore{
20+
state: IState
21+
eating: () => void
22+
running: () => void
23+
}
24+
const store: IStore & ThisType<IState> = {
25+
state: {
26+
name: "why",
27+
age:18
28+
},
29+
eating: function () {
30+
console.log(this.name);
31+
},
32+
running: function () {
33+
console.log(this.name);
34+
}
35+
}
36+
store.eating.call(store.state)
37+
38+
export{}

‎LearnTS/TS学习/04_TypeScript函数类型/tsconfig.json

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"compilerOptions": {
3+
/* Visit https://aka.ms/tsconfig.json to read more about this file */
4+
5+
/* Projects */
6+
// "incremental": true, /* Enable incremental compilation */
7+
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
8+
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
9+
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
10+
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
11+
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
12+
13+
/* Language and Environment */
14+
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
15+
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16+
// "jsx": "preserve", /* Specify what JSX code is generated. */
17+
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
18+
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
19+
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
20+
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
21+
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
22+
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
23+
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
24+
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
25+
26+
/* Modules */
27+
"module": "commonjs", /* Specify what module code is generated. */
28+
// "rootDir": "./", /* Specify the root folder within your source files. */
29+
// "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
30+
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
31+
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
32+
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
33+
// "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
34+
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
35+
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
36+
// "resolveJsonModule": true, /* Enable importing .json files */
37+
// "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
38+
39+
/* JavaScript Support */
40+
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
41+
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
42+
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
43+
44+
/* Emit */
45+
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
46+
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
47+
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
48+
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
49+
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
50+
// "outDir": "./", /* Specify an output folder for all emitted files. */
51+
// "removeComments": true, /* Disable emitting comments. */
52+
// "noEmit": true, /* Disable emitting files from a compilation. */
53+
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
54+
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
55+
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
56+
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
57+
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
58+
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
59+
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
60+
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
61+
// "newLine": "crlf", /* Set the newline character for emitting files. */
62+
// "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
63+
// "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
64+
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
65+
// "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
66+
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
67+
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
68+
69+
/* Interop Constraints */
70+
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
71+
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
72+
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
73+
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
74+
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
75+
76+
/* Type Checking */
77+
"strict": true, /* Enable all strict type-checking options. */
78+
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
79+
// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
80+
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
81+
// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
82+
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
83+
"noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
84+
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
85+
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
86+
// "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
87+
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
88+
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
89+
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
90+
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
91+
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
92+
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
93+
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
94+
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
95+
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
96+
97+
/* Completeness */
98+
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
99+
"skipLibCheck": true /* Skip type checking all .d.ts files. */
100+
}
101+
}

‎LearnTS/TS学习/05_TypeScript面向对象/01_TS中类的基本使用.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
class Person {
2+
//成员属性：声明成员属性
3+
name = ""
4+
age = 0
5+
constructor(name: string, age: number) {
6+
this.name = name;
7+
this.age = age;
8+
}
9+
}
10+
const p1 = new Person("John",13);
11+
const p2 = new Person("kobe",11);
12+
console.log(p1.name, p2.name);
13+
export{}

‎LearnTS/TS学习/05_TypeScript面向对象/02_TS中类的成员修饰符.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
class Person {
2+
//成员属性：声明成员属性
3+
name = ""
4+
age = 0
5+
constructor(name: string, age: number) {
6+
this.name = name;
7+
this.age = age;
8+
}
9+
}
10+
const p1 = new Person("John",13);
11+
const p2 = new Person("kobe",11);
12+
console.log(p1.name,p2.name);

0 commit comments

Comments
 (0)