关于typescript:typescript

9次阅读

共计 3551 个字符,预计需要花费 9 分钟才能阅读完成。

typescipt

 敌人举荐的一篇文,题目为“为什么你的前端工作教训不值钱?”,看后的感觉是,如果你是一个前端,这篇文你肯定要看。地址如下:http://mt.sohu.com/20170307/n482544235.shtml
作者是一个面试官,首先提出一个问题:编写一个 javscript 函数 fn,该函数有一个参数 n(数字类型),其返回值是一个数组,该数组内是 n 个随机且不反复的整数,且整数取值范畴是 [2, 32]。他一步步的列出了本人会考核的点,顺次为:1. 可用(代码是能达到预期成果的)2. 强壮
    对输出的 n 值进行较验 
    包含是否存在校验,类型是否为数值,范畴校验,以及校验代码是否能失常运行
3. 牢靠
    对返回值进行校验
    代码出错时返回什么,返加的后果是否是预期的,预期之外的后果返回什么
4. 宽容
    对其它异常情况的思考,4.1 当 n 带有小数时
    4.2 当 n 是一个字符串时(与 2 重合了,相当于类型判断)4.3 是否有正文
    4.4 [2, 32] 范畴调整时,代码是否能疾速适应

这篇文是 18 年看到的,长期在各个小公司工作,面试工作时,遇到好多面试官会问根底的货色,很屡次经验会让本人感觉,问那么多有什么用,写代码时不还是增删改查这些,直到看了这篇文之后,发现工作的思路上还是要有所提高。这篇文给了我一个全新的视角,也帮我了解了早些年看一些前端书,为什么 js 代码前会有 if 判断。以我的教训来看,写函数时,都该当留神和了解两件事,1. 输出是什么,输入是什么?2. 要对输出和输入进行判断

在理论工作中,对输入输出的判断,该当做,但同时属于减少工时,产出却并不可观
typescript 就是解决这个问题的,用: 指定变量的类型,类型不对,编绎报错

所有对 ts 的争吵都能够总结为 ts 带来的额定工作量和它能带来的益处,你更看重哪个?

引言

: 指定变量的类型
ts 的用途绝对于 js, 就是加一个冒号,冒号后接用于限定参数类型
ts 的作用是对类型进行定义,根本类型之外,有 api, 有应用规定,能够了解为,‘用于判断类型的正则’

|取并集,满足其中一个即可
?表明该变量可有可无
any 能够是任意类型
type 和 interface 是罕用,根本的 api

定义根本类型

number / string / boolean / null / undefined/object 的定义 (还有 symbol 和 bigint,不罕用)

const name: string = 'xuziling';
const age: number = 24;
const male: boolean = false;
const undef: undefined = undefined;
const nul: null = null;
const obj: object = {name, age, male}; // Object 范畴太宽,{} 定义空,对象就用 object
let list: any = 'xcatliu'; //any 能够是任意值 

type

type Code = 10000 | 10001 | 50000; // 只能是这三个值中的一个
type Status = "success" | "failure"; // 只能是这两个值中的一个
type Name = string; //Name 当初是 string 的别名,以下两种成果雷同
const name: string = 'xuziling';
const name: Name = 'xuziling';

type NameResolver = () => string; // 一个返回字符串的函数
type NameOrResolver = Name | NameResolver; // 能够是一个字符串,也能够是一个返回字符串的函数

定义数组

const arr1: string[] = [];
const arr2: Array<string> = [];
const arr5:[string,number,boolean]=['123',123,false] // 元组 固定长度和固定类型
const arr5:[string,number?,boolean?]=['123',123,false] // 可有可无的写法 (能够没有,然而有必须合乎类型要求)
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com'}]; // 任意类型数组

interface 定义
interface NumberArray {[index: number]: number;
}
let arr:NumberArray=[1,2,3]

定义数组对象

 数组的定义形式为
const arr2: Array<string> = [];
开始的时候我对数组对象的定义为
let arr2: Array<object> = [];
这种形式是错的,正确办法如下

interface IPerson{
    id?:string;
    name:string;
    age:number;
}
const persons:Array<IPerson> =[{name:"john",age:12},
    {name:"ben",age:20},
]
const fun=(info:Array<IPerson>)=>{console.log(info[0].name)
}
fun(persons)

要把对象的构造定义为一个 interface

定义对象 && interface

 新知识点 interface,能够了解为对对象构造的形容
interface IDescription {
  name: string;
  age: number;
  male: boolean;
}

const obj1: IDescription = {
  name: 'linbudu',
  age: 599,
  male: true,
};

当对象的属性值可能是多个类型时,写作 number | string
当对象的属性可能存在时,写作 gender?:string
实例如下
interface Person {
    name: string;
    age: number | string;
    gender?:string
}

let tom: Person = {
    name: 'Tom',
    age: '25',
    gender: 'male'
};

当后端传过来的字段是前端用不到时,有超出预期的 key 值时,写作 [propName: string]: string | number;

interface Person {
    name: string;
    age: number | string;
    [propName: string]: string | number;
}
  
  1.[propName: string]: string | number; 必须能蕴含所有其它类型,它是其它类型的父集,或者说并集,
  2.propName 能够写成其它的,不是固定的
  3. 即使有多个多余的 key [propName: string]: string | number; 写一个就行,

定义函数

ts 对函数的定义,要求表明入参和出参的类型,如下 入参 name 是 string 型,出参是 number 型
function foo(name: string): number {return name.length;}

// 形式一
const foo = (name: string): number => {return name.length}

// 形式二 定义了输入输出的类型
// 要了解一下,(name: string) => number 整段是 ts 语法,意为,入参 name 是 string 型,出参是 number 型
const foo: (name: string) => number = (name) => {return name.length}
形式三 type 定义
type FuncFoo = (name: string) => number
const foo: FuncFoo = (name) => {return name.length}
形式四 interface 定义
interface SearchFunc {(source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {return source.search(subString) !== -1;
}
 就我集体来看,ts 有适度应用的嫌疑,仅就函数的输入输出能够加 ts, 其它中央加意义不大。又或者,思虑比拟成熟,能对输入输出进行良好的判断,也没有应用的必要,只写本人感觉重要的中央,细则大家要看下文档, 没有写的点 包含但不限于:枚举,对象 static/readonly,泛型,断言,declare。能够查文档,https://ts.xcatliu.com/introduction/what-is-typescript.html
另外,语句不通,写的不对的中央,只管提,情绪不好,感觉没用,想骂人的也能够回复,以上 
正文完
 0