Twlig / issuesBlog

MIT License
3 stars 0 forks source link

Typescript #112

Open Twlig opened 2 years ago

Twlig commented 2 years ago

Typescript

JavaScript是一门松散变量类型语言,使用方便的同时带来了极大的安全隐患,很大程度上只有在运行后才能发现错误,不易于调试和错误定位。而TypeScript的诞生补充了JavaScript的不足,TypeScript是对JavaScript的一种扩展语言,提供了一套静态检测机制,支持在编译时排查错误。

基础数据类型

  1. 原始数据类型:boolean,number,bigint, symbol, string,null,undefined

    let str: string = "jimmy";
    let num: number = 24;
    let bool: boolean = false;
    let u: undefined = undefined;
    let n: null = null;
    let big: bigint = 100n;
    let sym: symbol = Symbol("me"); 
  2. 其他数据类型:array,tuple,enum,any,unknown,void, never,object

    //array
    let arr: number[] = [1,2,3]
    
    //tuple
    let tuple: [string, string, number] = ['zzy', 'shka', 10]
    
    //enum
    enum Color {Red, Green, Blue}
    let c: Color = Color.Green
    
    //any
    let notSure: any = 4
    notSure = "maybe a string instead"
    notSure = false
    
    // unknown与any一样,所有类型都可以分配给unknown
    let notSure: unknown = 4;
    notSure = "maybe a string instead"; // OK
    notSure = false; // OK
    
    //void  函数没有返回值
    function warnUser(): void {
       console.log("This is my warning message");
    }
    
    //never类型表示的是那些永不存在的值的类型。 例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 
    function error(message: string): never {
       throw new Error(message);
    }
    
    //object表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型
    let obj: object = {x: 1};

    :candy::unknown与any的最大区别是: 任何类型的值可以赋值给any,同时any类型的值也可以赋值给任何类型。unknown 任何类型的值都可以赋值给它,但它只能赋值给unknown和any。

  3. type和interface

    type propsType = {
       name: string;
       age?: number; //可选类型
       grade: (a: number, b:number) => number;
       [propsName: string]: any  //任意
    }
    
    let obj: propsType = {
       name: 'zzy',
       grade: (a: number, b: number) => a+b,
       school: 'SEU'
    }
    
    interface propsType = {
       name: string;
       age?: number; //可选类型
       grade: (a: number, b:number) => number;
       [propsName: string]: any  //任意
    }
    
    let obj: propsType = {
       name: 'zzy',
       grade: (a: number, b: number) => a+b,
       school: 'SEU'
    }

什么是声明文件?

声明文件就是给js代码补充类型标注. 这样在ts编译环境下就不会提示js文件"缺少类型".

声明变量使用关键字declare来表示声明其后面的变量的类型。有全局声明和模块声明两种。

声明文件在哪里?

首先声明文件的文件名是有规范要求的, 必须以.d.ts结尾, 看了上面的代码你肯定想练习写下声明文件, 但是你可

能想问了"写完放在哪里", 网上说声明文件放在项目里的任意路径/文件名都可以被ts编译器识别, 但实际开发中发

现, 为了规避一些奇怪的问题, 推荐放在根目录下

如何写声明文件?

声明文件分2大类, 一类是全局声明, 一类是对模块的声明.

全局声明

通过declare我们可以标注js全局变量的类型.

简单应用

// global.d.ts
declare var n: number;
declare let s: string;
declare const o: object;
declare function f(s: string): number;
declare enum dir {
    top,
    right,
    bottom,
    left
}
复制代码

声明之后,我们就可以在任意文件中直接操作变量:

n = 321
s = '文字'
let o1 = o;
f('123').toFixed();
dir.bottom.toFixed();

// 报错
n = '312'
s = 123
复制代码

declare namespace

这个namespace代表后面的全局变量是一个对象:

// global.d.ts
declare namespace MyPlugin {
    var n:number;
    var s:string;
    var f:(s:string)=>number;
}
复制代码
MyPlugin.s.substr(0,1);
MyPlugin.n.toFixed();
MyPlugin.f('文字').toFixed();

// 报错
MyPlugin.s.toFixed();
MyPlugin.n.substr(0,1);
MyPlugin.f(123);

参考文章: