TypeScript(TS)语法整理

TypeScript(TS)

1.简介:
TypeScript 是 JavaScript 的超集，包含 ES567等,(有强大的类型系统)
新增了类型系统和完整的面向对象语法
使用 TS 编写的项目更健硕，且更容易扩展和维护,通俗点就是规范
2.TypeScript 环境安装与运行

TS -> JS ，再交给浏览器运行. 类似 Less -> CSS.所以你html里面script标签引用的是index.ts转为js后的index.js文件

打开终端;输入以下命令,就可以看到你的ts跑起来并转为js了:

npm install -g typescript   //全局安装
tsc -v //检查版本，是否安装typescript
tsc --init //初始化,创建 tsconfig.json 文件
// tsc 作用: 负责将 ts 代码 转为 浏览器 和 nodejs 识别的 js 代码如：

//直接运行
tsc index.ts // ts转化为js(使用事例)
tsc --watch index.ts  // 自动监听ts文件改变并转化为js
-------------------------------------------------
//如果是在node中运行
 tsc index.ts
 node index.js//跑起来
 或者
 npm i -g ts-node //一个自动讲ts转为js并运行的node包
 ts-node index.ts// 使用事例

在这里插入图片描述

3.TypeScript使用方法

基本数据类型,联合类型

let age: number = 1313
let age1: string = '1313'
let age2: boolean = true
let a:number|string=111// 联合类型(或)可以是number也可以是string
let age3: undefined = undefined
let age4: null = null
//可以把null undefined赋值给其他类型如：
let num2: number = null//报错把tsconfig.json文件里的严格模式关掉就可以了
//例如for循环
for (let index: number = 0; index < 10; index++) {
    if (index == 6) {
        continue
    }
    console.log(index)

}

数组,元组

//数组
let names: string[] = ['刚刚', '订单']
let names2: number[] = [1, 2]
let names3: Array<number> = [1, 2]//另一种写法
// 任意类型
var arr: any[] = [1, 2, 3, "a", "b", "c"];
//元组,规定类型，长度的数组
let tup: [string, number] = ['刚刚', 3]

枚举

//枚举
enum Color{
    Reds=1,//不赋值默认从0开始，后面递增
    Greens,
    Blues
};
var colorName: string = Color[2]; //访问第二个枚举子元素Green,key值
console.log(colorName);//Greens
colorName = Color[4];
console.log(colorName);//undefined
var c: Color = Color.Greens;//访问第二个枚举子元素Green,value值
console.log(c);//2

函数(void,剩余参数,可选参数,默认值)

// 函数
function warnUser(): void {
    //将函数的返回类型指定为 void，表示该函数不返回任何值
    console.log("This is my warning message");
}
function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1, 2))
function demo3(info: object): object {
    return {
        name: '小红'
    }
}
demo3({ info: 'kkk' })
-----------------------------
//剩余参数
//...args: string[]表示剩余的参数，放在了一个字符串数组中
function greet(x: number, ...args: string[]): string { // 返回一个字符串
    return "Hello World"
}
-------------------------
//将 lastName 设置为可选参数：
function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
let result1 = buildName("Bob");  // 正确
// let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确
---------------------------------
// 设置参数的默认值
function calculate_discoun(price: number, rate: number = 0.50) {
    var discount = price * rate;
    console.log("计算结果: ", discount);
}
calculate_discoun(1000)
calculate_discoun(1000, 0.30)
------------------------
//正常函数表达式完整写法
const add3: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y
}

对象

//对象

let person: {//对象的类型注解
    name: string;
    age: number;
    sayHi: (name: string) => void; //将函数的返回类型指定为 void，表示该函数不返回任何值
    sayHi2: (name: number) => number;
} = {//表示ts中的对象
    name: '啦啦啦',
    age: 18,
    sayHi: function (name: string) {
        console.log('lll')
    },
    sayHi2: function (name: number) {
        return name
    },
}

接口(是一个能力，一种约束)

解决对象类型注解的复用性

interface Users {
    readonly name: string;//只读
    // name:string;
    // age:number;
    age?: number;//?可有可无
}
let p1: Users = {
    name: '啦啦啦',
    age: 18,
}
function Demo(per: Users) {
    return per.name + per.age
}

Class

访问修饰符： public/private/protected。
用来修饰描述类的成员变量和成员方法 – 默认是 public(公共的，任何位置都能访问)
private此方法只允许在类中访问，不允许在类外面访问，子类也不行。比如说私有方法不能在实例对象中调用
protected此方法只允许在类中及子类中访问，不允许在类外面访问。比如说私有方法不能在实例对象中调用

class City {
    //定义公共字段(属性)
    readonly a: string = '33';
    b: number;
    constructor(name: string, level: number) {
        this.a = name;
        this.b = level
        // 构造函数中可以修改readonly
    }
    about() {
        console.log('我是父调用的方法', this.a)
    }
}
class Childer extends City {
    constructor(name: string, level: number) {
        super(name, level)
    }
    about() {
        console.log('我是子调用的方法')
        super.about()
    }
}
let cl = new City('哈哈', 5)
cl.about()//我是父调用的方法

Class,接口小结

// 小结：接口与接口之间叫继承，类与接口之间叫实现
interface Ifly {
    fly()
}
interface ISwim {
    swim: () => void
}

interface IMy extends Ifly, ISwim { }//1.一个接口可以继承其他接口

class Per implements Ifly {
    //实现接口中的方法
    fly() {
        console.log('class使用接口')
    }
}
//2.一个类可以实现多个接口
class Per2 implements Ifly, ISwim {
    //实现接口中的方法
    fly() { }
    swim() { }
}

类型推论,类型断言

类型推论：
声明变量初始化赋值，函数返回值,可忽略类型注解,ts会自动添加

类型断言:如下

 //querySelector获取id时获取到的是element类型，不能访问到src属性等
 //有点像强制转换
let img = document.querySelector('#image') as HTMLImageElement
console.dir(img)

类型断言有两种写法:
1.<类型>变量名
2.变量 as 类型

function lei(num6: number | string): number {
    if ((<string>num6).length) {
        return (num6 as string).length
    } else {
        return num6.toString().length

泛型

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


function createArray<T>(value: T, count: number): any[] {
    const arr: Array<T> = []
    for (let index = 0; index < count; index++) {
        arr.push(value)
    }
    return arr
}
const arr33 = createArray<number>(11, 3)
// <T>（字母可以随便命名）里面就是createArray<number>(11, 3)传的number
----------------------------
//可以传入多个泛型参数
function aa2<P, K>(a: P,b:K): [P,K] {
    return [a,b]
}
aa2<number,string>(1,'a')
-------------------------------
//泛型接口
interface IBase<T>{
    data:Array<T>,//数组的两种写法
    name:T[],
}

class UserB implements IBase<number>{
    data:[1,2];
    name:[1,3]
}
let UserC:IBase<number>={
    data:[1,2],
    name:[1,3]
}
// function UserC:IBase<string>{
    
// }
-------------------------------
//泛型约束
interface Ilength{
    //接口中有一个length属性
    length:number
}
function getLength<T extends Ilength>(x:T):number{
    return  x.length//此时不知道x有没有length这个属性,所以用泛型约束
}
console.log(getLength<string>('kkk'))
// console.log(getLength<number>(123))报错，因为number没有length

TypeScript(TS)语法整理

TypeScript(TS)

相关推荐