TypeScript(保姆级教学)

84 阅读3分钟

TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集,意味着所有的 JavaScript 代码都是合法的 TypeScript 代码。TypeScript 添加了静态类型、类、接口等特性,以提供更强大的工具和语言特性,同时仍然可以编译为纯 JavaScript 代码。

以下是 TypeScript 的一些主要特性:

  1. 静态类型:TypeScript 支持静态类型,这意味着可以在编码阶段就发现潜在的类型错误,提高了代码的可靠性和可维护性。
  2. 类和接口:TypeScript 提供了面向对象编程的特性,包括类和接口,使得代码更易于组织和重用。
  3. 泛型:TypeScript 支持泛型,可以编写更加灵活和通用的代码。
  4. ES6+特性支持:TypeScript 支持 ECMAScript 6 及更新版本的语法和特性,如箭头函数、模板字符串、解构赋值等。
  5. 编译:TypeScript 代码需要被编译为 JavaScript 代码才能在浏览器或 Node.js 等环境中运行。TypeScript 提供了强大的编译器,可以将 TypeScript 代码转换为 JavaScript 代码。
  6. 工具支持:TypeScript 集成了丰富的工具支持,包括编辑器插件、构建工具等,使得开发者可以更高效地编写和维护代码。

TS 的基本使用

TS 最重要的就是给每一变量添加对应的类型,当添加上对应的类型,就无法赋予其他的类型 语法

    //let/const/var 变量名:数据类型 = 变量值
    let str1: string = 'qwe'
    
    // 这里我们可以借助 第三方包帮我们 运行代码
    // ts-node : 可以帮助我们完成自动编译
    // 安装 ts-node :  npm i ts-node -g
    // 这个只会帮助我们 自动编译 并不会 生成 js 文件

对象类型的书写形式

    interface Iobj {
        name: string;
        age: number;
        info: {
            msg: string;
            num: number;
        };
    }


    let obj: Iobj = {
        name: '张三',
        age: 120,
        info: {
            msg: 'sad',
            num: 100
        }
    }

    obj.info.num = 110
    console.log(obj.info.msg)
    console.log(obj.info.num)
    console.log(obj.info)

数组形式的书写形式

    interface Iarr2 {
        id: number;
        name: string;
    }
    const arr1: (number | string)[] = [1, '数据1', 3]
    
    // 数组泛型
    const arr3: Array<Iarr2> = [
        {
            id: 1,
            name: '张三'
        },
        {
            id: 2,
            name: '李四'
        },
        {
            id: 3,
            name: '王五'
        },
   ]
   
 

type 类型

    type TStr1 = 'nan' | 'yu' | 'shang' | 'qing' | 'tian'
    type TObj1 = {
        id: number;
        name: string;
    }


    let str1: TStr1 = 'nan'

    str1 = "shang"


    const obj1:TObj1 = {
        id: 1,
        name: '张三'
    }
    obj1.id = 12

    console.log(str1)

函数类型

    // 无参无返

    function fna(): void {}

    // 无参有返

    function fnb(): number {
        return 123
    }

    // 有参无返

    function fnc(a: number,b: string) {

    }
    // 有参有返

    function fn(a: number, b: string): number {
        return a
    }


    // 赋值式 函数
    // 无参无返
    const msg: () => void = function(): void {

    }

    // 有参无返

    const msg1: (a: number, b: number) => void = 
    function (a: number, b: number): void {

    }


    // 无参有返

    const msg2: () => number = function (): number {
        return 123
    }

    // 有参有返 
    const msg3: (a: number, b: number) => number = 
    function (a: number, b: number): number {
        return a + b
    }

    // 箭头函数

    const msg4: (a: number, b: number) => number = (a: number, b: number): number 
    => a + b

枚举

    enum Emsg {
        a = 'sda',
        b = 'da',
        c = 'sad',
        d = 'sadaj'
    }


    let es: Emsg = Emsg.a
    console.log(es) 


    enum Esum {
        a = 100,
        b,
        c,
        d
    }

    console.log(Esum.a)  // 100
    console.log(Esum.b)  // 101
    console.log(Esum.c)  // 102
    console.log(Esum.d)  // 103


    enum Esum1 {
        a,
        b,
        c,
        d
    }


    console.log(Esum1.a)  //0
    console.log(Esum1.b)  //1
    console.log(Esum1.c)  //2
    console.log(Esum1.d)  //3

接口合并

    interface Iobj {
        id: number,
        name: string,
    }


    interface Iobj {
        age: number
        text?: string
    }

    const obj1: Iobj = {
        id: 12,
        name: '张三',
        age: 18,
        text: '我是obj'
    }

    console.log(obj1)

泛型

    function createArr<T>(length: number, value: T): T[] {
        let arr:T[] = []
        for(let i = 0; i < length; i++) {
            arr.push(value)
        }

        return arr
    }


    const str1:string[] = createArr<string>(2, '123')
    console.log(str1)


    interface IStr2 {
        name: string
    }
    const str2: IStr2[] = createArr<IStr2>(3, { name: '张三' })

    console.log(str2)

    str2[0].name = '123'
    console.log(str2)

总的来说,TypeScript 是一种功能丰富的编程语言,它通过添加静态类型和其他特性,提供了更加强大和可靠的开发体验,同时仍然保留了 JavaScript 的灵活性和广泛的生态系统。