目录

  • 开发环境搭建
  • 类型如何声明
  • 有哪些类型
  • 编译配置文件

开发环境搭建

npm i -g typescript

tsc检查是否安装成功

类型如何声明

// 先声明再赋值let a: numbera = 1// 直接赋值let b = 1
function sum(a: number, b: number): number {return a + b}console.log(sum(1, 2))

有哪些类型

// 可以使用|连接多个类型let a: number | string// unknown类型的变量，不能直接赋值给其他变量let b: unknown// a = b // 不可// 可以下面这样写a = b as numbera = <number>b// void用来表示空，以函数为例，就表示没有返回值的函数function fn(): void {}// never 表示永远不会返回结果function fn2(): never {throw new Error('报错了！')}// object {属性名: 属性值, 属性名：属性值}// 在属性名后边加上？,表示属性可选的let c: { name: string, age" />: number }c = { name: 'nihao', age: 18 }c = { name: 'ni' }// [propName: string]: any 表示任意类型的属性let d: { name: string, [propName: string]: any}// 设置函数结构的类型声明let e: (a: number, b: number) => numbere = (n, m) => {return n + m} // 数组 类型[] Arraylet f: string[]let g: Array<string>// 枚举enum Gender{Male = 0,Female = 1}let h: { gender: Gender }// &let i: { name: string } & { age: number }i = { name: 'aa', age: 18 }// 类型别名type myType = 1 | 2 | 3let j: myTypelet k: myType

编译配置文件

创建一个tsconfig.json

{/*tsconfig.json 是ts编译器的配置文件，ts编译器可以根据她的信息来对代码进行编译"include": [""],用来指定哪些ts文件需要被编译,一个/*表示任意文件，两个/**表示任意文件目录"exclude": 不需要被编译的目录，默认["node_modules","bower_components","jspm_packages"]"extends":"目录地址", 继承配置文件，可以把两个配置文件合并"files":[xxx.ts,xxx.ts]指定被编译的文件列表compilerOptions{} 编译器配置target： 用来指定ts 编译后的Es版本，默认ES3，，可选值es3，es5，es6，es2015，es2016，es2017，es2018，es2019，es2020，esnextlib[] 用来指定项目中要使用的库，一般不动他module： 指定要使用的模块化规范，可选值：none commonjs amd system umd es6 es2015 es2020 exnestoutDir: 用来指定版以后文件所在的目录outFile: 将代码合并成一个文件，设置outFile 后 所有的全局作用域中的代码会合并到同一个文件中。allowJs: 是否对js文件进行编译，默认falsecheckJs: 是否检查js文件语法removeComments: 编译时是否去除注释noEmit： 不生成编译后的文件noEmitOnError: 当有错误时不生成编译文件// 语法检查的属性alwaysStrict: 严格模式，用来设置编译后的文件是否使用严格模式，默认falsenoImplicitAny: 不允许使用隐式anynoImplicitThis: 不允许使用不明确类型thisstrictNullChecks: 严格的检查空值，strict： 所有严格模式的总开关，这个属性一定要写在最上面*/"exclude": [ "node_modules"],"include": ["./src/**/*"]"compilerOptions": {"module": "commonjs","target": "ES5","sourceMap": true,"outDir": "./dist", // "outFile": "./dist/app.js" "allowJs": false, "checkJs": false, "removeComments": false, "noEmit": false, "noEmitOnError": false, "strict": false, "alwaysStrict": false, "noImplicitAny": false, "noImplicitThis": false, "strictNullChecks": false}}