7.13~7.15学习笔记
TypeScript笔记：
类名称、数组、元组、函数、数据类型any 类、继承和封装、public、protected、private
constructor构造函数、readonly、eumn枚举 接口的使用、可选/只读属性、继承类、可索引类型
抽象类、构造函数的缩写、get和set访问私有属性、定义函数的五种方法、类别名
函数的重载、类型判断typeof,instanceof、as断言、null和undefine
拓展运算符、泛型的一系列问题
-
类名称：
var： var a：number;
let : 限制变量的作用范围;
const：常量
-
数组：
let myArr : number[]= [1,2,3]; let myArr : Array<string>=["yushayang","guojiguanxixuyuan"]; -
元组：
let yuanzu: [string,number]=["kalsjdh",2]; -
函数：
function add(a : int,b : int){ return a+b; } const add=(a : int,b :in (**: number**)** => { return a+b; }!累加用number.reduce!!!
-
数据类型any：
let a:any; a=10; a="ajkhskdjah"; a=[1,2,3]; const log = (value :any)=>{ if(typeof value ===' number'){ return **`**your number is ${value}**`**; } if(typeof value ==="string"){ return **`**your name is ${value}**`**; } throw new Error(**`**Excepted string or number,got ${value}.**`**); } -
类
class Person{ firstname : string; lastname : string; } let aPerson=new Person(); aPerson.firstname = "yu"; aPerson.lastname="xiaoyang";
class Movie {
name: string;
play_count: number;
created_at: string;
time: string;
constructor(name: string, play_count: number) {
this.name = name;
this.play_count = play_count;
}
display_play_count(padding: string = '*****') {
return `${this.play_count} 次 数 ${padding}`
}
increase_play_count() {
this.play_count += 1;
}
}
let m = new Movie("美丽的羊", 18);
-
继承和封装
extends 继承；
子类继承父类的属性，方法；
子类方法和父类的重名优先调用子类的方法；
子类方法调用父类方法时要用super.do()
-
**public>protected>private **
public:任何属性和方法都可以在生成的对象中调用，继承的对象也可以调用，默认是public；
private:私有的，只有在内部对象内调用，生成的调用不了。想调用私有属性和方法，要在类内生成公有方法；
protect: 介于public 和 private 之间的一种访问修饰符，一般称之为“保护形”。被其修饰的类、属性以及方法只能被类本身的方法及子类访问，即使子类在不同的包中也可以访问。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GVColi2b-1594813894096)(C:\Users\Administrator\Desktop\捕获.PNG)]
-
constructor构造函数
如果申明为protected或者private,当前类不能new；
当父类申明为protected,子类重写constructor方法后可以new；
如果父类申明为private，子类不能new和extends；
Super在constrcutor方法中是调用父类的构造方法，必要时传入参数
作用：
- 当不想被实例化，而只想让子类继承后实例化，可以申请为protector
- 都不想让子类和父类实例化或继承，可以申请为private
- 一般情况下，申请为public（或不写）
-
static
-
readonly只读属性
readonly name ：string = ‘xiaoyang’
-
enum枚举类型
enum DaysOfTheWeek{ SVN=100,MON,TUE,WED,THU,FRI,SAT } let day: DaysOfTheWeek; day = DaysOfTheWeek.MON; if(day=== DaysOfTheWeek.MON){ console.log("Go to work"); } console.log(day); -
接口interfaces
//接口 interface INamed{ //属性 name: string //方法 print(name: string): void; } //函数 const sayName = (o: INamed) =>{ console.log(o.name); } //对象 const person = { age : 18, name : "yang" print: (name)=> { console.log(name) } } const school = { locate: beijing, name :guojiguanxi } //类 class Person{ name: string print(name: string): void{ console.log(name); } } let aPerson = new Person(); aPerson.name = "ke" sayName(person); sayName(school); sayName(aPerson);interface IPerson{ name: string; greet(): void; } //类实现接口 class Employee implements IPerson{ name: string; greet(): void{ console.log("i am employee"); } } //实例化 let em=new Employee(); em.greet(); //another 类实现接口 class Customer implements IPerson{ public name: string; public email: string; greet(): void{ console,log("i am customer"); } } //another 实例化 let cu = new Customer(); cu.greet();//举一个支付的栗子eg //支付接口 interface Pay{ post(): void; } //可能会发送http请求 //真正支付的请求 const do_pay = (pay: Pay) => { pay.post(); } //微信支付 class WePay implements Pay{ //调试微信支付的接口 post(){ } } //支付宝支付 class AliPay implements Pay{ //调试支付宝支付的接口 post(){ } } //其他的支付接口 let we_pay: Pay = new WePat(); let ali_pay: Pay = new AliPay(); //微信支付 do_pay(we_pay); //支付宝支付 do_pay(ali_pay); -
接口可选/只读属性
interface Person{ //只读 readonly first_name: string //可选 last_name?: string } let person = { first_name: "yu", //last_name:"xiaoyang" 接口有问号就是可要可不要 } class Programmer implements Person{ first_name: string; } const programmer = new Programmer(); programmer.first_name = "tony"; const sayName = (o: Person) => { console.log(o.first_name); } sayName(person); sayName(programmer); -
类型断言
-
继承与实现多个接口
interface Person{ name: string; } interface Employee{ age: number; } //继承了接口Person的属性和方法 interface Programmer extends Person{ age: number; } let p: Programmer = { age: 18, name: "xiaoyang" } //类不能继承多个类，也就是不能有多个父类 //但是可以继承多个接口 //每个接口的属性和方法都要实现 class P implements Person,Employee { name: string; age: number; } let p1: P = { name:"xiaoyang", age: 18 } -
接口继承类
class component{ private width: number; private height: number; constructor(width: number,height: number){ this.width = width; this.height = height; } display(): void{ console.log('displaying'); } } //接口继承类 interface Width extends Compents{ } class Button extends Component implements Widget{ } let w: Widget = new Button(1,2) console.log(w); w.display(); -
接口-可索引类型-Indexable Types
interface States{ [state: string]: boolean; } let s: States = {'enabled': true, 'ajsd': false} console.log(s); console.log(s["enabled"]); /*结果: {enabled: true,ajsd: false} true */ -
处理列表数据
//接口 interface ToDo{ userId: number; id: number; title: string; completed: boolean; } //类 class Todo1{ userId: number; id: number; title: string; completed: boolean; } //对象 let todos: Todo = { "uesrID": 1, "id": 1, "title": "delectus aut autem", "completed": false } //对象 let todos: ToDo[] = [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }, { "userId": 1, "id": 2, "title": "quis ut nam facilis et officia qui", "completed": false }, { "userId": 1, "id": 3, "title": "fugiat veniam minus", "completed": false } ]-
抽象类
abstract class Person{ name: string; /* constructor(name: string){ this.name = name; }*/ display(): void{ console.log(this.name); } //抽象方法 //没有方法体 abstract find(string): Person; } //继承抽象类 class Employee extends Person{ name: string; empCode: number; constructor(name: string,code: number){ super();//必须调用super this.name = name; this.empCode=code; } find(name: string): Person{ return new Employee(name,1); } } let p: Person = new Employee('xiaoyang',18); let p1: Person =p.find('asidh11'); console.log(p1); -
constructor的简写
class Person { private _name: string; private _age: number; constructor(name: string, age: number) { this._name = name; this._age = age; } } //等用于下面 class Person{ constructor(private _name: string,private _age: number){ } } -
get和set
class Person{ private name: string; private age: number; constructor(name: string,age: number){ this.name=name; this.age=age; } //读取 getName(): string{ return this.name; } //设置 setName(name: string): void{ this.name = name; } }
-
-
定义函数类型的五种方法
//1 let a: any; a = function(): void{ console.log('It work'); } function fun(): any{ return function(): void{ console,log('It work'); } } //2 let c: Function; c = function(): void{ console.log('It work'); } //3 let d:(para: string) => string; d = function(pass: string): string{ return pass; } //4 typr e = (para: string) => string; const f: e = function(pass: string): sring{ return pass; } //5 interface g{ (para: string): string; } const h:g = (pass: string) => pass; -
函数的重载
-
类型判断typeof,instanceof，以及as断言
-
null和undefined
-
null 和 undefined 分别有自己的类型，分别是 null 和 undefined
它们的值 null 和 undefined 分别可以赋值给很多类型，比如 string number 之类的，它们可以是很多类型的子类型
let x: string = null;
-
never类型
用于无限循环或者抛出异常，不期望有返回值。
-
泛型
function getArray<T>(items: T[]): T[] { return new Array<T>().concat(items); } let myNumArray = getArray<number>([100, 200, 300]); let myStrArray = getArray<string>(['hello', 'world']); myNumArray.push(400); myStrArray.push('rails365');class List<T>{ private data: T[]; constructor(elements: T[]){ this.data = elements; } add(t: T){ this.data.push(t); } remove(t: T){ let index = this.data.indexOf(t); if(index > -1){ this.data.splice(index,1); } } asArray(): T[]{ return this.data; } } //创建对象 let numbers = new List<number>([1,2,3,4]); numbers.aa(5); numbers.remove(3); let numArray = numbers.asArray(); console.log(numArray); //another eg class Pair<F, S> { private _first: F; private _second: S; constructor(first: F, second: S) { this._first = first; this._second = second; } get first(): F { return this._first; } get second(): S { return this._second; } } let pair = new Pair<boolean, string>(true, "111"); console.log(pair.first); console.log(pair.second); -
泛型在函数中的应用
-
泛型在接口中的应用
-
泛型在索引性接口的应用
-
拓展运算符
// 1 function foo(x: number, y: number, z: number) { console.log(x, y, z); } var args: number[] = [0, 1, 2]; // foo.apply(null, args); // foo.apply(void 0, args); (<any>foo)(...args); // 2 function foo1(...x: number[]) { console.log(JSON.stringify(x)); } foo1(...args); foo1(1, 2, 3); // 3 function foo2(...args: number[]): void; function foo2(x: number, y: number, z: number) { console.log(x, y, z); } foo2(...args); foo2(1, 2, 3); // Destructuring var [x, y, ...remaining] = [1, 2, 3, 4]; console.log(x, y, remaining); // Array Assignment var list = [1, 2]; list = [...list, 3, 4]; console.log(list); // Object spread const point2D = {x: 1, y: 2}; const point3D = {...point2D, z: 3}; console.log(point3D); const anotherPoint3D = {x: 5, z: 4, ...point2D}; console.log(anotherPoint3D); const yetAnotherPoint3D = {...point2D, x: 5, z: 4} console.log(yetAnotherPoint3D); const foo4 = {a: 1, b: 2, c: 0}; const bar = {c: 1, d: 2}; const fooBar = {...foo4, ...bar}; console.log(fooBar); -
泛型的约束
-
类型别名
type Name = string; let my_name: Name = "xiaoyang" type User={ name: string; age: number } const user: User(IUser) = { name: "xiaoyang" age: 18 } interface IUser{ name: string; age: number }
React笔记：
- PropTypes可以验证数据类型
Home.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
user: PropTypes.object
};
-
DOM树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YOAQ1V0Z-1594813894099)(C:\Users\Administrator\Desktop\ct_htmltree.gif)]
-
无状态组件
import React from 'react'; const Header = (props) => { return ( <div className="container"> <div className="row"> <div className="col-xs-1 col-xs-offset-11"> <h1>Header</h1> </div> </div> </div> ); }; export default Header;-
父给子传值
在直接把属性和具体值写在父中子页面内容里
-
子给父传值
父把动作方法传给子，子改变自身数据，通过动作方法回馈给父
-
子与子传值
父有state值，把值给子1；
父把有返回值方法（含setState）给子2，子2把自己的值通过父给的方法回馈给父，父用setState改变了state值，从而改变了子1
onChangeLinkName(newName){ this.setState({ homeLink: newName }) } -
App.js
import React ,{Component} from "react"; import Header from './component/Header'; import Home from './component/Home'; class App extends Component { constructor() { super(); this.state={ homeLink: "Company" } } onGreet(age){ alert(age); } onChangeLinkName(newName){ this.setState({ homeLink: newName }) } render() { const user ={ name : "Anna", hobbies : ["sports","Reading"] } return ( <div className="container"> <div className="row"> <div className="col-xs-1 col-xs-offset-11"> <Header homeLink={this.state.homeLink} /> </div> </div> <div className="row"> <div className="col-xs-1 col-xs-offset-11"> <h1>Hello !!</h1> </div> </div> <div className="row"> <div className="col-xs-1 col-xs-offset-11"> <Home name={"Max"} age={12} user={user} greet={this.onGreet} changeLink={this.onChangeLinkName.bind(this)} initialName={this.state.homeLink} /> </div> </div> </div> ); } } export default App; -
Header.js
import React, { Component } from 'react'; export default class Header extends Component { render() { return ( <div className="container"> <div className="row"> <div className="col-xs-1 col-xs-offset-11"> <h1>{this.props.homeLink}</h1> </div> </div> </div> ); } } /*该文件无生命周期，是无状态组件，简单写法如下： import React from 'react'; const Header = (props) => { return ( <div className="container"> <div className="row"> <div className="col-xs-1 col-xs-offset-11"> <h1>Header</h1> </div> </div> </div> ); }; export default Header; */ -
Home.js
import React, { Component } from 'react'; import PropTypes from 'prop-types'; export default class Home extends Component { constructor(props) { super(props); this.state={ age: props.age, homeLink: props.initialName } // this.age=this.props.age; 没有state时使用 } onMakeOlder(){ // this.age +=3; 没有state时使用 this.setState({ age: this.state.age + 3, }) console.log(this); } handleGreet(){ this.props.greet(this.state.age) } onChangeLink(){ this.props.changeLink(this.state.homeLink) } onHandleChange(event){ this.setState({ homeLink: event.target.value }) } render() { console.log(this.props); return ( <div className="container"> <div className="row"> <div className="col-xs-1 col-xs-offset-11"> <div>your name is {this.props.name},your age is {this.state.age}</div> <button onClick={() =>{this.onMakeOlder()}} className="btn btn-primary">Make me older</button> <hr/> <button onClick={this.handleGreet.bind(this)} className="btn btn-primary">Greet</button> {/*把父类中的爱好类出来 <div> <h4>hobbies</h4> <ul> {this.props.user.hobbies.map((hobby,i) => <li key={i}>{hobby}</li>)} </ul> </div>*/} <hr/> <input type=" " defaultValue={this.props.initialName} value={this.state.initialName} onChange={(event) => this.onHandleChange(event)}/> <button onClick={this.onChangeLink.bind(this)} className="btn btn-primary">Change Header Link</button> </div> </div> </div> ); } } Home.propTypes = { name: PropTypes.string, age: PropTypes.number, user: PropTypes.object, greet: PropTypes.func, initialName: PropTypes.string };
-
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
