初识TypeScript🐱‍💻

Mannqo
311 阅读4分钟

TypeScript

一、TS类型

  • any：任何类型，可以赋值给任意变量 不建议使用

  • unknown：表示未知类型的值

    unknown 类型的变量，不能直接赋值给其它变量

  • 类型断言：可以用来告诉解析器变量的实际类型

    // 表明e是字符串
s = e as string;
s = <string>e;

  • never： 表示永远不会返回结果

  • Object：表示一个对象；默认必选，加上问号表示可选属性；

    [propName: string]: any 表示任意类型的属性

    let a:object;
a = {};
let b:{name: string, age ?: number}  // 指定对象中可以包含哪些队形
b = {name: 'Mannqo'}; // 一定要包含name
let c:{name: string, [propName: string]: any};
c = {name: 'Mannqo', a: '1'};

  • array：数组； 两种表示方式：类型[]或Array<类型> ;

    string()表示字符串数组；number[]表示数值数组

    let d:string[];
d = ['a', 'b', 'c'];
let f:Array<number>;
f = [1, 2, 3];

  • 元组，固定长度的数组

    let h: [string, string];
h = ['a', 'b'];

  • enum枚举

    enum Gender {
    Male = 0,
    Female = 1
}

&表示同时，let j: {name: string} & {age:number}；可以对对象中的属性值进行规范；

可以给类型设置别名：type myType = string; (别名长的时候可以使用)

二、TS编译配置

  • include：指定需要编译的文件列表，支持全局匹配

    {
    "include": ["src/**/*"]
}

  • exclude：指定include选项时，需要忽略的文件列表；exclude只会对include的解析结果有影响；

  • files：用来指定需要编译的文件列表（不是文件夹）；适用于指定文件数量较少且不需要全局匹配的情况。

complierOption编译器的选项

  • target：指定ts被编译版本；"target": "ES6" 默认为ES3；

  • module：指定要使用的模块化规范；module: "commonjs"

    参数值：'none'; 'commonjs'; 'amd'; 'system'; 'umd'; 'es6'; 'es2015';.....

  • lib：用来指定项目中要使用的库；"lib": ["es6", "dom"];

  • outDir：用来指定编译后文件所在的目录；"outDir": "./dist"

  • outFile：将代码合并为一个文件(指定文件名)；"outFile: "./dist/app.js"

  • allowJs：是否对js文件进行编译，默认为false；

  • checkJs：是否检查js代码是否符合语法规范，默认为false；

  • removeComments：是否移除注释，默认为false；

  • noEmit：不生成编译后的文件；默认为true；

  • noEmitOnError：当有错误的时候不生成js文件，默认为false；

  • strict：所有严格检查的总开关；如果这个为true，即全都为严格检查，默认为false；

  • alwaysStrict：用来设置编译后的文件是否使用严格模式，默认为false；

  • noImplicitAny：不允许隐式的any类型，默认为false；

  • noImplicitThis：不允许不明类型的this，默认为false；

  • strictNullChecks：严格地检查空值，默认为false；

三、面向对象

1. 定义属性/方法

  • 直接定义的属性是实例属性，通过对象的实例去访问

  • 定义实例属性 readonly开头的属性表示一个只读属性，无法修改

  • 如果用static去定义，那么这个属性就是类属性/方法，比如age，直接通过Person.age就可以拿到

    class Person {
    readonly name: string = 'mannqo';
    age = 18
​
    static age: number = 19;
    static sayHello() {
        console.log('hello');
    }
}

2. 构造函数

  • 子类拥有父类的所有属性和方法；class Son extends Father{}
  • 通过继承可以将多个类中共有的代码写在一个父类中
  • 如果子类添加了和父类一样的方法就会覆盖

3. 属性的封装

  • public 修饰的属性可以在任意位置访问(修改)默认值

  • private 私有属性，只能在类内部进行访问(修改)

    通过在类中添加方法使得私有属性可以被外部访问

    private name: string;
constructor(name: string) { this.name = name; }
getName() { return this.name; }
setName(value: string) { this.name = value; }

    也就是说，可以通过在类中定义方法来 获取或修改 私有属性；此时在修改的方法中可以设置传入参数的范围；

  • protected 受包含的属性，只能在当前类和当前类的子类进行访问

  • getter方法用来读取属性，setter方法用来设置属性，他们分别成为属性的存取器；

    get name() {
    return this._name;
}
set name(value: string) {
    this._name = value;
}

    这样设置之后，通过 实例对象.name 就可以获取到对应的属性值；

4. 泛型

在定义函数或类时，如果遇到类型不明确的就可以使用泛型

可以直接调用具有泛型的函数

function fn<T>(a: T): T {
    return a;
}
let result = fn(10);// 不指定泛型，TS可以自动对类型进行判断
let result2 = fn<string>('hello');
avatar
文章
阅读
粉丝