typescript超全入门基础语法详解,及配置文件详解

一、简介

TypeScript 是微软开发的JavaScript的超集,typescript兼容JavaScript,可以载入JavaScript代码然后运行

二、数据类型
  1. 布尔值
    let isDone: boolean = false;
    let createdByBoolean: boolean = Boolean(1);
    
    //使用构造函数 Boolean 创造的对象不是布尔值,new Boolean直接返回一个对象
    let createdByNewBoolean: boolean = new Boolean(1);
    
  2. 数值
    let decLiteral: number = 6;
    let hexLiteral: number = 0xf00d;
    // ES6 中的二进制表示法
    let binaryLiteral: number = 0b1010;
    // ES6 中的八进制表示法
    let octalLiteral: number = 0o744;
    let notANumber: number = NaN;
    let infinityNumber: number = Infinity;
    
  3. 字符串
    let myName: string = 'Tom';
    let myAge: number = 25;
    
    // 模板字符串
    let sentence: string = `Hello, my name is ${myName}.
    I'll be ${myAge + 1} years old next month.`;
    
  4. 空值:JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void 表示没有任何返回值的函数
    function alertName(): void {
        alert('My name is Tom');
    }
    
  5. Null 和 Undefined:void 的区别是,undefined 和 null 是所有类型的子类型,可以赋值给 number 类型的变量
    let u: undefined = undefined;
    let n: null = null;
    
    // 以下代码不会报错
    let num: number = undefined;
    let u: undefined;
    let num: number = u;
    
  6. any:任意值,任意值(Any)用来表示允许赋值为任意类型
    let myFavoriteNumber: any = 'seven';
    myFavoriteNumber = 7;
    
    //如果变量声明之前为声明类型。则默认类型是任意值。以下代码效果相同
    let myFavoriteNumber
    let myFavoriteNumber: any
    
三、类型推论

如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型

let myFavoriteNumber = 'seven'; //默认推端出类型是string
myFavoriteNumber = 7;//这里再赋值number,编译时会报错

//如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查,以下代码正常
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
四、联合类型

可以一次声明多种类型,联合类型使用 | 分隔每个类型

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
五、Interfaces:对象的类型——接口

变量和接口的类型必须一致,如:tome变量和Person接口;定义接口时首字母大写

  1. 必选属性,必选属性必须与接口保持一致

    interface Person {
        name: string;
        age: number;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25
    };
    
  2. 可选属性:可选属性可以选择是否赋值

    interface Person {
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        name: 'Tom'
    };
    
  3. 任意属性

    //任意属性,使用 [propName: string] 定义了任意属性取 string 类型的值
    interface Person {
        name: string;
        age?: number;
        [propName: string]: any;
    }
    let tom: Person = {
        name: 'Tom',
        gender: 'male'
    };
    
    //一旦定义了任意属性,那么确定属性和可选属性的类型必须是它的类型的子集,编译时会报错,因为age的number类型不是 任意类型string的子集
    interface Person {
        name: string;
        age?: number;
        [propName: string]: string;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    
    //一个接口中只能定义一个任意属性。如果接口中有多个类型的属性,则可以在任意属性中使用联合类型
    interface Person {
        name: string;
        age?: number;
        [propName: string]: string | number;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    
  4. 只读属性

    interface Person {
        readonly id: number;
        name: string;
        age?: number;
        [propName: string]: any;
    }
    
    let tom: Person = {
        id: 89757,
        name: 'Tom',
        gender: 'male'
    };
    
    tom.id = 9527;//id是只读的,编译时会报错
    
六、数组的类型
  1. 「类型 + 方括号」表示法
    let fibonacci: number[] = [1, 1, 2, 3, 5]; //数组中的元素只能时数字
    
  2. 数组泛型
    let fibonacci: Array<number> = [1, 1, 2, 3, 5];
    
  3. 用接口表示数组
    interface NumberArray {
        [index: number]: number;
    }
    let fibonacci: NumberArray = [1, 1, 2, 3, 5];
    
  4. 类数组
    interface NumberArray {
        [index: number]: number;
        length: number;
        callee: Function;
    }
    
    function sum() {
        let args: NumberArray = arguments;
    }
    
七、函数的类型
  1. 函数声明:一个函数有输入和输出,要在 TypeScript 中对其进行约束,输入过多或者过少都会报错

    function sum(x: number, y: number): number {
        return x + y;
    }
    
    sum(1, 2, 3);//会报错
    
  2. 函数表达式

    let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
        return x + y;
    };
    
  3. 用接口定义

    interface SearchFunc {
        (source: string, subString: string): boolean;
    }
    
    let mySearch: SearchFunc = function(source: string, subString: string) {
        return source.search(subString) !== -1;
    }
    
  4. 可选参数

    function buildName(firstName: string, lastName?: string) {
        if (lastName) {
            return firstName + ' ' + lastName;
        } else {
            return firstName;
        }
    }
    let tomcat = buildName('Tom', 'Cat');
    let tom = buildName('Tom');
    
  5. 参数默认值

    function buildName(firstName: string, lastName: string = 'Cat') {
        return firstName + ' ' + lastName;
    }
    let tomcat = buildName('Tom', 'Cat');
    let tom = buildName('Tom');
    
  6. 剩余参数

    function push(array: any[], ...items: any[]) {
        items.forEach(function(item) {
            array.push(item);
        });
    }
    
    let a = [];
    push(a, 1, 2, 3);
    
  7. 重载

    function reverse(x: number | string): number | string | void {
        if (typeof x === 'number') {
            return Number(x.toString().split('').reverse().join(''));
        } else if (typeof x === 'string') {
            return x.split('').reverse().join('');
        }
    }
    //可以使用重载定义多个 reverse 的函数类型,输入数字,输出也为数字,输入字符串,输出也为字符串,比上面的更精确
    function reverse(x: number): number;
    function reverse(x: string): string;
    function reverse(x: number | string): number | string | void {
        if (typeof x === 'number') {
            return Number(x.toString().split('').reverse().join(''));
        } else if (typeof x === 'string') {
            return x.split('').reverse().join('');
        }
    }
    
八、类型断言

类型断言(Type Assertion)可以用来手动指定一个值的类型

  1. 语法
    值 as 类型
    
  2. 将一个联合类型断言为其中一个类型
    interface Cat {
        name: string;
        run(): void;
    }
    interface Fish {
        name: string;
        swim(): void;
    }
    
    //报错
    function isFish(animal: Cat | Fish) {
        if (typeof animal.swim === 'function') {
            return true;
        }
        return false;
    }
    
    //正确写法
    function isFish(animal: Cat | Fish) {
        if (typeof (animal as Fish).swim === 'function') {
            return true;
        }
        return false;
    }
    
  3. 将一个父类断言为更加具体的子类
    class ApiError extends Error {
        code: number = 0;
    }
    class HttpError extends Error {
        statusCode: number = 200;
    }
    
    function isApiError(error: Error) {
        if (typeof (error as ApiError).code === 'number') {
            return true;
        }
        return false;
    }
    
  4. 将任何一个类型断言为 any,将一个变量断言为 any 可以说是解决 TypeScript 中类型问题的最后一个手段,不是非常确定类型不要使用 as any
    window.foo = 1;//报错
    (window as any).foo = 1;//不h会报错
    
  5. 将 any 断言为一个具体的类型,声明类型最好不要使用any,这样会使变量不够精确;如果遇到第三方库或者其他人的代码,可以通过 as 把 类型变的更精确
    function getCacheData(key: string): any {
        return (window as any).cache[key];
    }
    
    interface Cat {
        name: string;
        run(): void;
    }
    
    const tom = getCacheData('tom') as Cat;
    tom.run();
    
  6. 类型断言的限制
  • 联合类型可以被断言为其中一个类型
  • 父类可以被断言为子类
  • 任何类型都可以被断言为 any
  • any 可以被断言为任何类型
  • 要使得 A 能够被断言为 B,只需要 A 兼容 B 或 B 兼容 A 即可
  1. 双重断言,除非迫不得已,千万别用双重断言
    interface Cat {
        run(): void;
    }
    interface Fish {
        swim(): void;
    }
    //报错
    function testCat(cat: Cat) {
        return (cat as Fish);
    }
    //正常
    function testCat(cat: Cat) {
        return (cat as any as Fish);
    }
    
  2. 类型断言 vs 类型转换
    类型断言只会影响 TypeScript 编译时的类型,类型断言语句在编译结果中会被删除;类型断言不是类型转换,它不会真的影响到变量的类型
    //类型断言
    function toBoolean(something: any): boolean {
        return something as boolean;
    }
    
    toBoolean(1);
    
    //类型转换
    function toBoolean(something: any): boolean {
        return Boolean(something);
    }
    
    toBoolean(1);
    
  3. 类型断言 vs 类型声明,类型声明是比类型断言更加严格
    function getCacheData(key: string): any {
        return (window as any).cache[key];
    }
    
    interface Cat {
        name: string;
        run(): void;
    }
    
    const tom: Cat = getCacheData('tom'); //类型声明
    const tom = getCacheData('tom') as Cat;//类型断言
    tom.run();
    
    
    //报错,因为animal父类是Animal,Animal不兼容Cat,所以会报错
    interface Animal {
        name: string;
    }
    interface Cat {
        name: string;
        run(): void;
    }
    
    const animal: Animal = {
        name: 'tom'
    };
    let tom: Cat = animal;
    
  4. 类型断言 vs 泛型
    function getCacheData(key: string): any {
        return (window as any).cache[key];
    }
    
    interface Cat {
        name: string;
        run(): void;
    }
    
    const tom = getCacheData('tom') as Cat;
    tom.run();
    
    //通过给 getCacheData 函数添加了一个泛型 <T>,我们可以更加规范的实现对 getCacheData 返回值的约束,这也同时去除掉了代码中的 any,是最优的一个解决方案
    function getCacheData<T>(key: string): T {
        return (window as any).cache[key];
    }
    
    interface Cat {
        name: string;
        run(): void;
    }
    
    const tom = getCacheData<Cat>('tom');
    tom.run();
    
九、声明文件

当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能;声明文件必需以 .d.ts 为后缀。

  • declare var 声明全局变量
  • declare function 声明全局方法
  • declare class 声明全局类
  • declare enum 声明全局枚举类型
  • declare namespace 声明(含有子属性的)全局对象
  • interface 和 type 声明全局类型
  • export 导出变量
  • export namespace 导出(含有子属性的)对象
  • export default ES6 默认导出
  • export = commonjs 导出模块
  • export as namespace UMD 库声明全局变量
  • declare global 扩展全局变量
  • declare module 扩展模块
  1. 嵌套的命名空间
    // src/jQuery.d.ts
    
    declare namespace jQuery {
        function ajax(url: string, settings?: any): void;
        namespace fn {
            function extend(object: any): void;
        }
    }
    
  2. interface 和 type
    除了全局变量之外,可能有一些类型我们也希望能暴露出来。在类型声明文件中,我们可以直接使用 interface 或 type 来声明一个全局的接口或类型
    // src/jQuery.d.ts
    interface AjaxSettings {
        method?: 'GET' | 'POST'
        data?: any;
    }
    declare namespace jQuery {
        function ajax(url: string, settings?: AjaxSettings): void;
    }
    
    //使用 src/index.ts
    let settings: AjaxSettings = {
        method: 'POST',
        data: {
            name: 'foo'
        }
    };
    jQuery.ajax('/api/post_something', settings);
    
  3. 防止命名冲突
    暴露在最外层的 interface 或 type 会作为全局类型作用于整个项目中,我们应该尽可能的减少全局变量或全局类型的数量。最好将他们放到 namespace 下
    // src/jQuery.d.ts
    declare namespace jQuery {
        interface AjaxSettings {
            method?: 'GET' | 'POST'
            data?: any;
        }
        function ajax(url: string, settings?: AjaxSettings): void;
    }
    
    //使用src/index.ts
    let settings: jQuery.AjaxSettings = {
        method: 'POST',
        data: {
            name: 'foo'
        }
    };
    jQuery.ajax('/api/post_something', settings);
    
  4. 混用 declare 和 export
    // types/foo/index.d.ts
    
    declare const name: string;
    declare function getName(): string;
    declare class Animal {
        constructor(name: string);
        sayHi(): string;
    }
    declare enum Directions {
        Up,
        Down,
        Left,
        Right
    }
    interface Options {
        data: any;
    }
    
    export { name, getName, Animal, Directions, Options };
    
  5. 直接扩展全局变量
    //通过声明合并,使用 interface String 即可给 String 添加属性或方法。
    interface String {
        prependHello(): string;
    }
    
    'foo'.prependHello();
    
十、内置对象
  1. ECMAScript 的内置对象
    
    Error
    AggregateError
    EvalError
    RangeError
    ReferenceError
    SyntaxError
    TypeError
    URIError
    InternalError 
    Object
    Function
    Boolean
    Symbol
    Number
    BigInt
    Math
    Date
    String
    RegExp
    Array
    Int8Array
    Uint8Array
    Uint8ClampedArray
    Int16Array
    Uint16Array
    Int32Array
    Uint32Array
    BigInt64Array
    BigUint64Array
    Float32Array
    Float64Array
    Map
    Set
    WeakMap
    WeakSet
    ArrayBuffer
    SharedArrayBuffer
    DataView
    Atomics
    JSON
    WeakRef
    FinalizationRegistry
    Promise
    GeneratorFunction
    AsyncGeneratorFunction
    Generator
    AsyncGenerator
    AsyncFunction
    Reflect
    Proxy
    Intl
    Intl.Collator
    Intl.DateTimeFormat
    Intl.DisplayNames
    Intl.ListFormat
    Intl.Locale
    Intl.NumberFormat
    Intl.PluralRules
    Intl.RelativeTimeFormat
    Intl.Segmenter
    
    
    let b: Boolean = new Boolean(1);
    let e: Error = new Error('Error occurred');
    let d: Date = new Date();
    let r: RegExp = /[a-z]/;
    
  2. DOM 和 BOM 的内置对象
    let body: HTMLElement = document.body;
    let allDiv: NodeList = document.querySelectorAll('div');
    document.addEventListener('click', function(e: MouseEvent) {
      // Do something
    });
    
  3. 用 TypeScript 写 Node.js
    npm install @types/node --save-dev
    
十一、类型别名

类型别名常用于联合类型。

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}
十二、字符串字面量类型
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {

}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错
十三、元组

数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。

let tom: [string, number] = ['Tom', 25];
十四、枚举

枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。
```
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true
```
十五、类

public private 和 protected三种访问修饰符

  • public 修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 public 的
  • private 修饰的属性或方法是私有的,不能在声明它的类的外部访问
  • protected 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许被访问的
  • readonly 只读属性关键字,只允许出现在属性声明或索引签名或构造函数中
  1. 参数属性
    class Animal {
      // public name: string;
      public constructor(public name) {
        // this.name = name;
      }
    }
    
  2. 抽象类
  • 抽象类是不允许被实例化的,可以被继承
  • 抽象类中的抽象方法必须被子类
    abstract class Animal {
      public name;
      public constructor(name) {
        this.name = name;
      }
      public abstract sayHi();
    }
    
    class Cat extends Animal {
      public sayHi() {
        console.log(`Meow, My name is ${this.name}`);
      }
    }
    
    let cat = new Cat('Tom');
    
  1. 类的类型
    class Animal {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      sayHi(): string {
        return `My name is ${this.name}`;
      }
    }
    
    let a: Animal = new Animal('Jack');
    console.log(a.sayHi()); // My name is Jack
    
  2. 类实现接口
    interface Alarm {
        alert(): void;
    }
    
    interface Light {
        lightOn(): void;
        lightOff(): void;
    }
    
    class Car implements Alarm, Light {
        alert() {
            console.log('Car alert');
        }
        lightOn() {
            console.log('Car light on');
        }
        lightOff() {
            console.log('Car light off');
        }
    }
    
  3. 接口继承接口
    interface Alarm {
        alert(): void;
    }
    
    interface LightableAlarm extends Alarm {
        lightOn(): void;
        lightOff(): void;
    }
    
  4. 接口继承类
    class Point {
        x: number;
        y: number;
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
    }
    
    interface Point3d extends Point {
        z: number;
    }
    
    let point3d: Point3d = {x: 1, y: 2, z: 3};
    
  5. 声明 Point 类时创建的 Point 类型只包含其中的实例属性和实例方法
    class Point {
        /** 静态属性,坐标系原点 */
        static origin = new Point(0, 0);
        /** 静态方法,计算与原点距离 */
        static distanceToOrigin(p: Point) {
            return Math.sqrt(p.x * p.x + p.y * p.y);
        }
        /** 实例属性,x 轴的值 */
        x: number;
        /** 实例属性,y 轴的值 */
        y: number;
        /** 构造函数 */
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
        /** 实例方法,打印此点 */
        printPoint() {
            console.log(this.x, this.y);
        }
    }
    
    interface PointInstanceType {
        x: number;
        y: number;
        printPoint(): void;
    }
    
    let p1: Point;
    let p2: PointInstanceType;
    
十六、泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性

  • T为“type”,是最通用的,因此也是最常用的类型参数名;
  • K表示“key”,或P表示“property”,两者都倾向于受PropertyKey或keyof,T或keyof SomeInterface或keyof SomeClass的约束;
  • V表示“value”,最常用作成对使用,K表示“key”;
  • A表示“arguments”,R表示“return”,分别对应函数签名的rest参数列表和返回类型,如(…args:A) => R;
  • N表示“number”,S表示“string”,B表示“boolean”,表示受原语约束的类型参数;
//代码编译不会报错,但是一个显而易见的缺陷是,它并没有准确的定义返回值的类型
function createArray(length: number, value: any): Array<any> {
    let result = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x');

//函数名后添加了 <T>,其中 T 用来指代任意输入的类型,在后面的输入 value: T 和输出 Array<T> 中即可使用
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']
  1. 多个类型参数
    function swap<T, U>(tuple: [T, U]): [U, T] {
        return [tuple[1], tuple[0]];
    }
    
    swap([7, 'seven']); // ['seven', 7]
    
  2. 泛型约束
    //,只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束
    interface Lengthwise {
        length: number;
    }
    
    function loggingIdentity<T extends Lengthwise>(arg: T): T {
        console.log(arg.length);
        return arg;
    }
    
  3. 泛型接口
    interface CreateArrayFunc<T> {
        (length: number, value: T): Array<T>;
    }
    
    let createArray: CreateArrayFunc<any>;
    createArray = function<T>(length: number, value: T): Array<T> {
        let result: T[] = [];
        for (let i = 0; i < length; i++) {
            result[i] = value;
        }
        return result;
    }
    
    createArray(3, 'x'); // ['x', 'x', 'x']
    
  4. 泛型类
    class GenericNumber<T> {
        zeroValue: T;
        add: (x: T, y: T) => T;
    }
    
    let myGenericNumber = new GenericNumber<number>();
    myGenericNumber.zeroValue = 0;
    myGenericNumber.add = function(x, y) { return x + y; };
    
  5. 泛型参数的默认类型
    function createArray<T = string>(length: number, value: T): Array<T> {
        let result: T[] = [];
        for (let i = 0; i < length; i++) {
            result[i] = value;
        }
        return result;
    }
    
十七、tsLint配置
npm install tslint typescript

{
	
	"rulesDirectory":["node_modules/codelyzer"],
	
	"rules":{
	
	"arrow-return-shorthand":true,//允许使用箭头函数返回的简略写法
	
	"callable-types":true,//只有调用签名的接口或文字类型可以写为函数类型
	
	"class-name":true,//类名采用帕斯卡命名法
	//行注释双斜杠后注释内容前加一个空格
	
	"comment-format":[true,"check-space"],
	
	"curly":true,//if/for/do/while条件语句加花括号
	
	"deprecation":{"severity":"warn"},
	
	"eofline":true,//文件以单空行结束
	
	"forin":true,//for...in需要做hasOwnProperty判断,推荐使用其他遍历方法
	//第三方库可模块化导包的,导入子模块
	
	"import-blacklist":[true,"rxjs","rxjs/Rx"],
	
	"import-spacing":true,//import语句关键词间加空格
	//行首缩进,空格缩进2格
	
	"indent":[true,"spaces",2],
	
	"interface-over-type-literal":true,
	
	"label-position":true,//标签只允许出现在do/for/while/switch中
	//行长度140字符
	
	"max-line-length":[true,140],
	
	"member-access":false,
	
	"member-ordering":[true,
	
	{
	"order":["static-field","instance-field","static-method","instance-method"]
	}
	
	],
	
	"no-arg":true,//禁止使用arguments.callee
	
	"no-bitwise":true,//禁止使用按位操作
	//不允许出现的console,debug使用的log及时清理
	
	"no-console":[true,"debug","info","time","timeEnd","trace"],
	
	"no-construct":true,//禁止访问String,Number,Boolean的构造函数
	
	"no-debugger":true,//禁止使用debugger关键字,调试后及时清理
	
	"no-duplicate-super":true,
	
	"no-empty":false,
	
	"no-empty-interface":true,//禁止空接口
	
	"no-eval":true,//禁止使用eval
	//对于初始化为number,string,boolean的变量或参数,无须显式类型声明
	
	"no-inferrable-types":[true,"ignore-params"],
	
	"no-misused-new":true,//不要对类或接口重新定义构造函数
	
	"no-non-null-assertion":true,//禁止使用!做非空断言的后缀运算
	
	"no-shadowed-variable":true,//不允许隐藏变量声明
	
	"no-string-literal":false,
	
	"no-string-throw":true,//throwcatch到的错误信息
	
	"no-switch-case-fall-through":true,//谨慎使用switch的fallthrough用法
	
	"no-trailing-whitespace":true,//行尾禁止无意义的空格
	
	"no-unnecessary-initializer":true,//禁止let声明或结构初始化为undefined
	
	"no-unused-expression":true,//禁止未使用的表达式语句
	
	"no-use-before-declare":true,//先声明,后使用
	
	"no-var-keyword":true,//禁止使用var
	
	"object-literal-sort-keys":false,
	//要求指定的标记与它们之前的表达式位于同一行:开括号、catch、else、空格
	
	"one-line":[true,"check-open-brace","check-catch","check-else","check-whitespace"],
	
	"prefer-const":true,//可能的情况下,尽量使用const
	//使用单引号
	
	"quotemark":[true,"single"],
	
	"radix":true,//parseInt函数需要指明精度
	//语句以分号结束
	
	"semicolon":[true,"always"],
	//使用===,!==而不是==,!=
	
	"triple-equals":[true,"allow-null-check"],
	//正确使用空格
	
	"typedef-whitespace":[true,
	
	{
	"call-signature":"nospace",
	"index-signature":"nospace",
	"parameter":"nospace",
	"property-declaration":"nospace",
	"variable-declaration":"nospace"
	}],
	
	"unified-signatures":true,//统一签名
	
	"variable-name":false,
	//正确使用空格
	
	"whitespace":[true,"check-branch","check-decl","check-operator","check-separator","check-type"],
	//指令选择器应遵循给定的命名规则,驼峰命名法
	
	"directive-selector":[true,"attribute","app","camelCase"],
	//组件选择器,短横线命名法
	
	"component-selector":[true,"element","app","kebab-case"],
	
	"no-output-on-prefix":true,//事件命名不加前缀on,参考:https://angular.io/guide/styleguide#dont-prefix-output-properties
	
	"use-input-property-decorator":true,//使用@Input装饰器而不是@Component和@Directive元数据的属性
	
	"use-output-property-decorator":true,//使用@Output装饰器而不是@Component和@Directive元数据的属性
	
	"use-host-property-decorator":true,//使用@HostProperty装饰器而不是@Component和@Directive元数据的属性
	
	"no-input-rename":true,//禁止通过向装饰器提供字符串来重命名@Input()
	
	"no-output-rename":true,//禁止通过向装饰器提供字符串来重命名@Output()
	
	"use-life-cycle-interface":true,//确保组件在使用时实现生命周期接口
	
	"use-pipe-transform-interface":true,//确保pipe实现PipeTransform接口
	
	"component-class-suffix":true,//用@Component修饰的类必须在其名称中包含后缀Component
	
	"directive-class-suffix":true//用@Directive修饰的类必须在其名称中加上后缀Directive

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

局外人LZ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值