关于typescript:typescript

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
另外，语句不通，写的不对的中央，只管提，情绪不好，感觉没用，想骂人的也能够回复，以上