首页 前端知识 Typescript学习01:TS类型以及类型声明

Typescript学习01:TS类型以及类型声明

2024-08-14 00:08:13 前端知识 前端哥 622 314 我要收藏

TS类型以及类型声明

  • 类型声明初识
  • 类型声明详解01
    • 使用字面量进行类型声明
    • 使用any进行类型声明
    • unknown
    • void(undefined)
    • never
  • 类型声明详解02
    • object
    • array
    • enum
    • 类型的别名
  • 编译选项
    • 编译选项01
    • 编译选项02

类型声明初识

格式: let 变量名:变量类型

let a: number;
a=123;
// a的类型为number,在以后的使用过程中a的值只能是数字

// a= '123'; 此行代码会报错,因为变量a的类型是number,不能赋值字符串
let b:string;
b='hello';
//b=123;

//声明完变量直接进行赋值
let c:boolean =true;

let d=false;
// d=123; 此行会报错,如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测

类型声明详解01

方法类型声明:
格式:(params:type):返回值类型

 function add(a:number,b:number):number {
    return a+b;
}

使用字面量进行类型声明

可以直接使用字面量进行类型声明

let a:10; //类似常量设置
a=10;
// a=11; 报错a的类型只能是10

加|表示或的意思可以连接多个类型(联合类型 )

let b: 'male' | 'female';
b='male';
b='female';

a的值可以是string或者boolean类型

let a:string |boolean;

使用any进行类型声明

any :表示的时任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
any可以赋值给任意变量

let d:any; //let d:隐式声明d为any类型
d=12;
d='122';

区别于let b:unknown;,unknown:未知类型,它不可以赋值给其他类型;

unknown

unknown:未知类型,无法赋值给其他类型

let a:string;
a='hello';

let b:unknown;
b='world';
// a=b; //此时找的不是string,而是unknown:未知类型(未知类型无法赋值给其他类型)
//处理策略(断言)
a =b as string;
a=<string>b;

void(undefined)

表示为空值

//void 表示为空,以函数为例表示返回结果为空
function aa(a:number):void {
}

never

never:表示没有返回结果,通常用在报错中

function aa(a:string) :never{
    throw new Error('报错了!');
}

类型声明详解02

object

object表示一个js对象,一般不用而使用{}
语法:{属性名:属性值}

//声明a为对象
let a:{name:string};
a={name:'aaa'};

?表示age有可以没有也可以,在属性名后加?表示可选属性

//?表示age有可有没有也可以
let a:{name:string,age?:number};

a={name:'zzq'};

a={name:'abc',age:26};

[proName:string]:any:表示name属性必须有其他属性随便加

let a:{name:string,[proName:string]:any};

设置函数结构的类型声明
语法:(形参:类型)=>返回值

let d:(a:number,b:number)=>number;

d=function(a,b){
    return a+b;
}

array

数组的类型声明:
类型[] /Array<类型>

//string[] 表示字符串类型数组
let a:string[];

//number[]表示数值数组
let b:number[]; //let c:Array<number>

let d:Array<string>;

let e:any[];//任意类型的数组
let d:any[];
d=[1,'ddd',true];

enum

enum Gender{
    Male=0,
    Female=1
}

let a:{name:string,gender:Gender};

a={name:'孙悟空',gender:Gender.Male};

a.gender===Gender.Male

类型的别名

语法:type 类型别名=类型

//原始类型
let a:1|2|3|4|5;
let b:1|2|3|4|5;
let c:1|2|3|4|5;

//类型别名
type mytype=1|2|3|4|5;

let d:mytype;
let e:mytype;
let f:mytype;
let g:mytype;

编译选项

tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译。

编译选项01

“”include“”用来指定哪些ts文件需要被编译,

{
    "include": [
        "./src/**/*"
    ]
}

路径:**表示任意目录,*表示任意文件
exclude:表示去除,不编译exclude定义的文件夹和文件,一般不声明,默认值:{“node_modules”,"bower_contents","jspm_packages"}

{
    "include": [
        "./src/**/*"
    ],
    "exclude": [
             "./src/**/*"
    ]
}

编译选项02

compilerOptions:编译配置

  • target
    ts可以被编译成js哪个版本,默认ES3
{
    "include": [
        "./src/**/*"
    ],
    "exclude": [

    ],
    "compilerOptions": {
        "target": "ES3" //将ts编译成哪个ES哪个版本 
    }
}
  • module
    指定使用模块化的规范
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "ES2015"
    }
}
  • lib
    用来指定项目中使用的库,一般不使用
  • outDir
    ts编译成js后放置的目录,一般放在dist目录下
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "ES2015",
        "outDir": "./dist"
    }
}
  • outFile
    将编译后的文件合成一个文件。下例中编译后的js文件全部合并到app.js中了
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js"
    }
}
  • allowJs
    是否对js文件进行编译,默认为false
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false
    }
}
  • checkJs
    是否检查JS代码是否符合语法规范,默认值false
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false
    }
}
  • removeComments
    是否移除js注释(ts原文件的注释),默认为false不移除
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false,
        "removeComments": false
    }
}
  • noEmit
    不生成编译后的js文件(只执行编译过程)默认false
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false,
        "removeComments": false,
        "noEmit": false
    }
}
  • noEmitOnError
    当有错误时,不生成编译后的js文件到dist目录
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false,
        "removeComments": false,
        "noEmit": false,
        "noEmitOnError": false
    }
}
  • alwaysStrict
    用来设置编译后的文件是否使用严格模式,默认false
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false,
        "removeComments": false,
        "noEmit": false,
        "noEmitOnError": false,
        "alwaysStrict": false
    }
}
  • noImplicitAny
    不允许隐式的any类型(声明的时候不指定类型,隐式的将类型声明为any类型),默认是false允许
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false,
        "removeComments": false,
        "noEmit": false,
        "noEmitOnError": false,
        "alwaysStrict": false,
        "noImplicitAny": true
    }
}
  • noImplicitThis
    不允许不明确类型的this,默认为false允许
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false,
        "removeComments": false,
        "noEmit": false,
        "noEmitOnError": false,
        "alwaysStrict": false,
        "noImplicitAny": true,
        "noImplicitThis": false
    }
}
  • strictNullChecks
    严格的检查空值(检查对象是否为空),默认为false,不检查,true为检查
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false,
        "removeComments": false,
        "noEmit": false,
        "noEmitOnError": false,
        "alwaysStrict": false,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": false
    }
}
  • strict
    严格模式的总开关,true开启,false关闭则所有类型的严格模式都关闭,一般放在json配置文件的上面
{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "target": "ES3", //将ts编译成哪个ES哪个版本 
        "module": "System",
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        "allowJs": false,
        "checkJs": false,
        "removeComments": false,
        "noEmit": false,
        "noEmitOnError": false,
        "strict": true,
        "alwaysStrict": false,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": false,
    }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15501.html
标签
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!