A-A+

tyepscript

2020年01月27日 JavaScript 暂无评论 阅读 37 次

typescript

遇到的问题

  1. declare是什么意思
declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

英语

  1. Tuple /tuh pl/ 元组
  2. declare /diˈkle(ə)r/ 声明
  3. implements / ['ɪmplɪm(ə)nts]/ 执行/施行
  4. constructor
  5. 类型断言 当你在TypeScript里使用JSX时,只有 as语法断言是被允许的。

基础类型

数字

const  a:number = 3

字符串

let name :string = 'asdfadsfasdf'
name =  `asdfasdf.ljskdlf${name}
nizhao
`

数组类型

const a: number[] = [1,2,3]; 
const b:Array<number>= [2,3,5] // 数组泛型

元数组

const name :[number,string] = [1,'3']
name[3] = true
name[2] = 'world'
console.log(name)

其他

其一是“尖括号”语法

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

另一个为as语法:

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

属性重命名

    const o = {
      a: 'foo',
      b: 12,
      c: 'bar',
    }

    const { a: newName1, b: newName2 }:{a:string, b:number} = o
    console.log(newName1)
    console.log(newName2)

readonly

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const,若做为属性则使用readonly。

函数类型

对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配。
你可以将索引签名设置为只读,这样就防止了给索引赋值:

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

可索引的类型

interface ReadonlyStringArray {
    readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error!

类类型

I
1. 实现接口

接口描述了类的公共方法,而不是公共方法和私有两部分,它不会帮你检查类是否具有某些私有成员

2.

问题

什么是泛型

为什么官方的demo没跑通

当访问一个越界的元素,会使用联合类型替代:
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString

<string, any>什么意思

const prettySure: Record<string, any> = 4
    prettySure.toFixed() // Error: Property 'toFixed' doesn't exist on type 'Object'.

declare function create(o: object | null): void; declare作用

--

How to use refs in React with Typescript

class TestApp extends React.Component<AppProps, AppState> {
    private stepInput: React.RefObject<HTMLInputElement>;
    constructor(props) {
        super(props);
        this.stepInput = React.createRef();
    }
    render() {
        return <input type="text" ref={this.stepInput} />;
    }
}

How to use refs in React with Typescript

redux typescript ref使用

export default connect(mapStateToProps, mapDispatchToProps, null, {withRef: true})(Addition)

React中Redux与Ref 联合使用时值得关注的一个问题

编译代码

tsc greeter.ts

尖括号作用

error:TS2339: Property 'value' does not exist on type 'HTMLElement'.

直接获取报错:

let el = document.getElementById(getActivity('console-ipt'));
let val = el.value;
error:TS2339: Property 'value' does not exist on type 'HTMLElement'.

网上查询的方法:

//第一种方法

let el = <HTMLInputElement>document.getElementById(getActivity('console-ipt'));
let val = el.value;

//第二种方法

let el = document.getElementById(getActivity('console-ipt')) as HTMLInputElement;
let val = el.value;

Form label must have associated control jsx-a11y/label-has-for

this example markup is compliant.

<label htmlFor="firstName">First Name</label>
<input id="firstName" type="text" />
<label htmlFor="email">Email<input id="email" name="email" type="email" placeholder="Email Address" /></label>

Form label must have associated control on compliant markup #302

键盘事件 typescript

event instanceof KeyboardEvent

什么是元组

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录