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

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,
    }
}