TS 笔记

作者: 天涯笑笑生 | 来源:发表于2019-06-05 09:10 被阅读0次

    一、简介

    • TypeScript 是 JavaScript 的一个超集,可以编译成纯JavaScript
    • 适用于任何计算机、浏览器、操作系统
    • 文件后缀ts
    • 支持ES6
    • 开源
    • 微软开发
      下载
    npm install -g typescript
    

    查看版本号

    tsc -V
    

    二、hello world

    注:IDE 使用VSC,安装TypeScript 插件
    新建hello.ts

    const message:string = 'Hello World'
    console.log(message)
    

    编译

    tsc hello.ts
    

    编译后的文件默认在同级目录下hello.js

    var message = 'Hello World';
    console.log(message);
    

    ES6属性没有保留,需要配置参数

    tsc hello.ts --target es6
    

    也可以使用tsconfig.json 配置文件,手动创建或者自动生成

    tsc -init
    

    三、 数据类型

    // 布尔值
    let isLogin: boolean = false
    
    // 数字
    let userAge: number = 18
    
    // 字符串
    let userName: string = 'Jony'
    
    // 数组
    let list: number[] = [1, 2, 3]
    let arry: Array<number> = [1, 2, 3] //数组泛型
    
    // 元组Tuple
    // 当访问一个越界的元素,会使用联合类型替代
    let tuple: [string, boolean, number] = ['a', true, 8]
    tuple = ['a', true, 8]
    
    // 枚举
    enum Color {Red, Green, Blue}
    let oneColor: Color = Color.Blue
    
    //自动递增,或者全部手动赋值
    enum Province {
        BeiJing = 1,
        Tianjin,
        Nanjing
    }
    
    let cityName: string = Province[3]
    console.log(`cityName: ${cityName}`)
    
    // Any
    let notSureValue: any = 4
    notSureValue = 'maybe a string instead'
    notSureValue = false
    
    let anyTypeList: any[] = [1, true, 'b']
    
    // Void
    //与any 相反,没有任何类型,一般用于没有返回值的方法
    //void变量只能赋值undefined 或null
    let unusable: void = undefined
    
    // Null & Undefined
    // 和void 相似
    // 默认是所有类型的子类型
    
    // Never
    // 表示用不存在的值的类型
    
    // Object
    // 非原始类型
    

    类型断言

    • 只在编译阶段起作用
    let someValue: any = 'this is a string'
    let strLength: number
    strLength = someValue.length
    strLength = (<string>someValue).length
    strLength = (someValue as string).length
    
    console.log(strLength) //16
    

    四、 变量声明

    • 尽量使用ES6 let、const

    五、 接口

    • 接口只定义有什么,没有实际的东西,所以编译后的js文件中,接口这部分代码是没有的
    interface People {
        readonly num: string //只读
        name: string
        age?: number //可选
        commandline?: string|string[]|(()=>string) //联合类型
        [propName: string]: any //可索引属性,索引可以是字符串或数字
    }
    
    let people: People = {
        num:'001',
        name:'sufei'
    }
    people.age = 12
    people.commandline = () => `hello ${people.name}`
    
    // people.num = '002'
    
    //继承
    enum Grade {A, B, C}
    interface Student extends People {
        grade?: Grade
    }
    
    let student: Student = {
        num: '003',
        name: 'zhang',
        grade: Grade.A
    }
    

    六、 类

    • 基本用法,和其他语言类似,构造函数,继承,重写,抽象方法,抽象类等
    class Animal {
        //属性
        name: string
        
        //构造函数
        constructor(name:string) {
            this.name = name
        }
    
        //方法
        play():void {
            console.log(`${this.name} play`)
        }
    }
    
    //创建实例
    let animalA = new Animal('A')
    animalA.play()
    
    //继承
    class Dog extends Animal{
    
        //方法重写
        play():void {
            console.log(`A dog named ${this.name} is playing`)
        }
    }
    
    let dogA = new Dog('A')
    dogA.play()
    

    公共,私有与受保护的修饰符

    • public
      默认的
    • private
      不能在类外部访问
    • protected
      同private,但可以在派生类中访问

    static 静态属性

    • static修饰属性或方法为静态的
    • 可以直接通过类名调用

    readonly修饰符

    • 设置属性为只读,只允许在声明时或构造函数中被初始化

    存取器

    • 适用于ES5及以上
    class Person {
    
        private _name:string
    
        get name(): string {
            return this._name
        }
    
        set name(newName: string) {
            this._name = newName
        }
    }
    
    let person = new Person()
    person.name = 'zuozhu'
    console.log(person.name)
    

    instanceof 运算符

    • 判断对象所属类

    抽象类

    • abstract修饰的类
    • 不可实例化
    • 用作其他派生类的基类
    • 抽象类中的抽象方法(abstract修饰的方法)不包含具体实现并且必须在派生类中实现

    七、函数

    • 支持递归,箭头,构造,匿名
    function buildName(firstNmae:string = 'unknown', lastName?:string, ...restOfName: string[]): string {
        return lastName?(firstNmae+' '+lastName+'('+restOfName.join(' ')+')'):(firstNmae+' '+'('+restOfName.join(' ')+')')
    }
    
    console.log(buildName())
    console.log(buildName('Lucy'))
    console.log(buildName('Lucy', 'Job'))
    console.log(buildName('Lucy', 'Job', 'Yun'))
    

    八、模块 & 命名空间

    • 如果仅导出单个 classfunction,使用 export default
    • 模块里不要使用命名空间
    • 模块尽可能的在顶层导出
    export const PI = 3
    export function getValue() {
    }
    export interface Verifier {
    }
    export class Person {
    }
    
    import {Person} from './moduleA'
    
    let person = new Person()
    
    • “内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块”

    官网示例
    Validation.ts

    namespace Validation {
        export interface StringValidator {
            isAcceptable(s: string): boolean;
        }
    }
    

    LettersOnlyValidator.ts

    /// <reference path="Validation.ts" />
    namespace Validation {
        const lettersRegexp = /^[A-Za-z]+$/;
        export class LettersOnlyValidator implements StringValidator {
            isAcceptable(s: string) {
                return lettersRegexp.test(s);
            }
        }
    }
    

    ZipCodeValidator.ts

    /// <reference path="Validation.ts" />
    namespace Validation {
        const numberRegexp = /^[0-9]+$/;
        export class ZipCodeValidator implements StringValidator {
            isAcceptable(s: string) {
                return s.length === 5 && numberRegexp.test(s);
            }
        }
    }
    

    Test.ts

    /// <reference path="Validation.ts" />
    /// <reference path="LettersOnlyValidator.ts" />
    /// <reference path="ZipCodeValidator.ts" />
    
    // Some samples to try
    let strings = ["Hello", "98052", "101"];
    
    // Validators to use
    let validators: { [s: string]: Validation.StringValidator; } = {};
    validators["ZIP code"] = new Validation.ZipCodeValidator();
    validators["Letters only"] = new Validation.LettersOnlyValidator();
    
    // Show whether each string passed each validator
    for (let s of strings) {
        for (let name in validators) {
            console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
        }
    }
    

    相关文章

      网友评论

          本文标题:TS 笔记

          本文链接:https://www.haomeiwen.com/subject/gzxrtctx.html