Typescript基础语法

歪歪梯

发布于 2020-06-19 16:14:48

1.5K0

发布于 2020-06-19 16:14:48

文章被收录于专栏：歪歪梯Club

typescript与javascript

typescript是一个js的超集，个人理解为包装了面向对象编程逻辑的语法糖，所以一般使用typescript的语言来编写代码，然后再使用typescript编译为原生js，这样就可以作为普通js脚本运行了。typescript语法很多地方与java类似，作为java程序员学起来不会很吃力。

安装typescript

npm install -g typescript

类型语法

通过在形参右侧使用 : 类型，代表限定的形参类型。其中，any代表任意类型，比较特殊有，void空返回值，只能赋值为undefined或者null，never类型代表永远没有返回值的类型，比如抛出异常的函数，死循环的函数。 new () => A 代表A接口的实现类或者A类的子类以下是官方给出的demo，如下代码代表，形参person必须是string对象，否则在编译期将会出错

function greeter(person: string) {
    return "Hello, " + person;
}
let user = [0, 1, 2];
let a : any[] = [];
document.body.innerHTML = greeter(user);

编译代码，你会看到产生了一个错误。

接口

以下是官方demo，通过关键字interface定义接口，接口中成员使用成员名 : 成员类型来表示。代表实现某个接口的成员，只需要js对象数据结构符合接口定义的成员要求，无须其他特殊处理。接口中可以指定方法成员类型，通过方法名: (形参列表) => 返回值类型来表示，或者方法名 (形参列表) :返回值类型

interface Person {
    firstName: string;
    lastName: string;
}
interface Test{
      fun: (a:string)=>string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);

类

typescript中还支持类的定义，如下为官方demo，通过class关键字定义类，类中成员表示与接口一样，同时，可以为类设定constructor——构造函数，constructor的形参可以添加public修饰符，代表同时该形参同时表示一个public的类成员。类中非静态(static修饰)方法，可以通过this使用非静态(static修饰)属性。类通过implements关键字，指定要实现的接口，需要类中具备满足接口定义的成员创建类对象使用new 调用构造函数

interface Man{
      fullName: string;
      getName: ()=>string;
}
class Student implements Man {
    static host: string="yyt";
    getName() : string{
        return "aaa"+this.fullName;
    }
    static show(){
        console.log(host);
    }
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

成员修饰符

与java一样，typescript一样具备public、protected、private这些成员修饰符，作用域类似，public代表公开，可以通过对象引用访问，private代表私有，只能类内部访问，protected代表保护，只有类内部及子类内部能够访问

readonly

typescript中的readonly代表修饰成员为只读，不可修改（类似java的final）

存取器

typesceipt中提供了默认存取器（如java的读屏障、写屏障），通过存取器，可以方便的编写要在成员被访问、修改时的行为，比如

class A{
    _name : string;//需要把成员名修改为别的名称，防止调用get或者set时，因为名称一致，死递归触发屏障
    set name(name : string){
        console.log("do set");
        this._name = name;
    }
    get name(): string{
        console.log("do get");
        return this._name;
    }
}
A a = new A();
a.name = "AAA";//输出do set
console.log(a.name);//输出do get

实现与继承

实现通过关键字implements对应接口，继承通过关键字extends如

interface A{}
class B{}
class C implements A extends B{}

import与export

官方demo如下，此处这个ts文件导出了ZipCodeValidator 和 mainValidator都代表ZipCodeValidator这个class

class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator };

假设这个ts文件文件名为ZipCodeValidator，且在当前目录，则其他文件可以通过import语句，导入这个export的对象，并使用他，也可以通过as给导入对象起别名

import { ZipCodeValidator } from "./ZipCodeValidator";
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";

namespace

因为js中，写到同一个文件内的是全局的代码，所以引入了namespace的概念主要为了区分同一个文件内的代码空间，也就是类似java中的包，如下代码，则在B中可以通过A.a去访问他的接口a因为a将他export出去，而A中无法访问接口b，因为他们也export

namespace A{
    export interface a{}；
}
namespace B{
    interface b{}
}

泛型

typescript支持类似java的泛型语法，比如类与接口上的泛型、方法上的泛型

interface GenericIdentityFn<T> {
   fun(): T;
   funWithT<T>(T a) : T;//此处T代表方法泛型，而非类泛型
}
class GenericNumber<T> {
    zeroValue: T;
}

联合类型

typescript还支持创建一个可以指代多种类型的类型，通过|运算符，即可使用不同类型创建一个联合类型，代表当前变量为其中之一，如

let a : string | number;

类型别名

typescript还支持为类型定义别名，这个可以用于联合类型，比如如下代码为string类型起了个别名tString和为string和number的联合类型起了个别名叫 sTringNNumber

type tString= string;
type sTringNNumber = string | number;
let a : tString;

枚举

与java类似，使用enum关键字创建枚举，默认枚举值为整数，不指定整数值默认从0开始，如

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

tsconfig.json

tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。，一般存在于项目根目录，因为编译时寻找规则为逐级由当前目录往父目录寻找。

通过file属性指定编译的ts文件名

{
    "compilerOptions": {
        "module": "commonjs",//模块名
        "noImplicitAny": true, //严格类型检查
        "removeComments": true, //删除注释
        "preserveConstEnums": true,
        "sourceMap": true    // 是否生成map文件，map文件存储转化前后代码的位置关系，方便debug
    },
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts",
        "scanner.ts",
        "parser.ts",
        "utilities.ts",
        "binder.ts",
        "checker.ts",
        "emitter.ts",
        "program.ts",
        "commandLineParser.ts",
        "tsc.ts",
        "diagnosticInformationMap.generated.ts"
    ]
}

通过路径通配符指定编译的ts文件夹和编译输出的js文件路径

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-05-23，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript