TypeScriptTypeScript 类型系统强类型与弱类型（类型安全）静态类型与动态类型（类型检查） ts基

TypeScript

类型系统

强类型与弱类型（类型安全）
静态类型与动态类型（类型检查）

ts基本使用

1. 全局或者本地安装 typescript
2. 使用tsc命令将ts文件编译成js

配置文件

target 编译后ECMA标准，默认es3
module 模块化标准
sourceMap
outDir 输出目录
rootDir 要编译的ts文件目录
lib 指定标准库（标准库就是内置对象所对应的声明文件）

//es2015指定ecma标准， DOM包含dom和bom操作（如console对象）
"lib": ["ES2015", "DOM"],

原始类型

string
number(NaN Infinity)
boolean
void
undefined
null

ts中文错误消息

npx tsc --locale zh-CN

作用域

同一文件夹下的ts文件如果变量重名会报错，可在文件最后添加 export {}

Object 类型

除了原始类型意外的其他类型

数组类型

const arr1: Array<number> = [1, 2, 3]
const arr2: number[] = [1, 2, 3]

元祖类型

const tuple: [number, string] = [1, 'hello']

枚举类型

1、枚举

enum PostStatus {
    Draft = 0,
    Unpublished = 1,
    Published = 2,
}

2、默认从0开始

enum PostStatus {
    Draft, // 0
    Unpublished, // 1
    Published, // 2
}

3、从6开始

enum PostStatus2 {
    Draft = 6,
    Unpublished, // 7
    Published,  // 8
}

函数类型

任意类型

any 动态类型

隐式类型推断

类型断言

const nums = [1, 2, 3, 4];

const res  = nums.find(item => item>0)  // 1

const num1 = res as number // 1
const num2 = <number>res // 1   // JSX 下不能使用

接口

用来约束一个对象的结构
可选成员
只读成员
动态成员

interface Post {
    title: string,  // 这里结束符用',' ';'都可以
    content: string;
    // subtitle?: string, // 可选
    readonly summary: string // 只读
    [prop: string]: string // 动态
}

const hello: Post = {
    title: 'hello, ts',   // 这里必须是','
    content: 'sdfasfsaf',
    summary: 'js',
}

// hello.summary = 'other' // 不可修改
hello.a = 'value1'
hello.b = 'value2'
console.log(hello) 
// {
//     title: 'hello, ts',
//     content: 'sdfasfsaf',
//     summary: 'js',
//     a: 'value1',
//     b: 'value2'
//   }

类

用来描述一类具体事物的抽象特征
基础使用
访问修饰符
- public 公有的
- private 私有的只允许在类内访问
- protected 受保护的只允许在类内或子类访问
只读属性

class Person {
    public name: string; // ='init name'  // 默认public
    private age: number; // pvivate 私有
    protected gender: boolean; // protected 受保护的

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
        this.gender = true;
    }

    say (msg: string): void {
        console.log(`I am ${this.name}, ${msg}`)
    }
}

class Student extends Person {
    constructor (name: string, age: number) {
        super(name, age);
        console.log('s---',this, this.gender) // Student { name: 'tom', age: 18, gender: true } true
    }
}

class Student2 extends Student {
    constructor (name: string, age: number) {
        super(name, age);
        console.log('s2---',this, this.gender) 
    }
}

class Student3 extends Student2 {
    constructor (name: string, age: number) {
        super(name, age);
        console.log('s3---',this, this.gender) 
    }
}

const hans = new Person('hans', 19)
console.log(hans.name); // hans
// console.log(hans.age)  // 无法访问
// console.log(hans.gender) // 无法访问

// const s = new Student('tom', 18)
// const s2 = new Student2('pony', 15)
const s3 = new Student3('lily', 20)

类与接口

抽象类

只能被继承来实现
抽象类中的抽象方法子类必须实现

abstract class Animal {
    abstract run (distance: number): void
}

class Dog extends Animal {
    run(distance: number): void {
        // throw new Error("Method not implemented.");
        console.log('四脚爬行', distance)
    }

}

const d = new Dog();
d.run(100)

泛型

let createArr = <T>(length: number, value: T): T[] =>{
    const arr = Array<T>(length).fill(value);
    return arr
}


// function createArr<T> (length: number, value: T): T[] {
//     const arr = Array<T>(length).fill(value);
//     return arr
// }

let res = createArr(5, 'hello')
console.log("res", res)
let res2 = createArr(3, 6)
console.log("res2", res2)

类型声明

import {camelCase} from 'lodash'

declare function camlCase(input: string): string 

const res = camelCase('hello typed')
console.log("res", res)