TypeScript 的安装与使用

1.安装  命令行运行如下命令，全局安装 TypeScript

npm install -g typescript

 2.安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)： 

tsc -V

3.安装ts.node包 避免每次都需要重复执行两个命令开运行ts代码。

npm i -g ts-node

4.使用方法

ts-node demo.ts

5.书写类型

//数字类型
let number: number = 6

//数组类型
let number: number[] = [1,3,5]

//联合类型
let arr: (number | string)[] = [1,3,'a']

//类型别名
type CustomArray = (number | string)[]
let arr1: CustomArray = [1,'a',3,'b']
let arr2: CustomArray = ['x','y',6,7]

-----------------------------------------------------------------
//这三种随意用 

//函数类型
function add(num1: number,num2: number): number {
   return num1 + num2
}

//使用函数表达式声明函数
const add = (num1: number, num2: number): number => {
   return num1 + num2
}

//通过类似箭头函数形式的语法来为函数添加类型
const add: (num1: number,num2:number) => number = (num1,num2)=> {
  return num1 + num2
}

------------------------------------------------------------------

//如果函数没有返回值，那么，函数返回值类型为：void
function greet(name: string): void {
  console.log('Hello',name)
}

----------------------------------------------------------

//可选参数
function mySlice(start?: number,end?:number): void {
  console.log('起始索引:',start,'结束索引:',end)
}

mySlice() 
mySlice(1)
mySlice(1,3)

-----------------------------------------------------------------

//对象可选属性
function myAxios(config: { url: string; method?: string }) {}

myAxios({
  url:''
})

6.接口

//接口

interface IPerson {
  name: string
  age: number
  sayHi(): viod
}

let Person: IPerson = {
  name: '刘老师',
  age: 18,
  sayHi() {}
}

let Person1: IPerson = {
  name: 'jack',
  age: 16,
  sayHi() {}
}

项目中新建一个 tsconfig.json 文件夹用来配置自动运行 ts文件 

然后命令行执行 tsc -w 就会进入监视模式 监视所有文件

{
/*
  tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
    "include" 用来指定哪些ts文件需要被编译
      路径：** 表示任意目录
            * 表示任意文件
    "exclude" 不需要被编译的文件目录
        默认值：["node_modules", "bower_components", "jspm_packages"]

*/
  "include": [
    "./src/**/*"
  ],
//  "exclude": [
//    "./src/hello/**/*"
//  ]

  /*
    compilerOptions 编译器的选项
  */
  "compilerOptions": {

    // target 用来指定ts被编译为的ES的版本
    // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'
    "target": "es2015",
    // module 指定要使用的模块化的规范
    // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
    "module": "es2015",
    // lib用来指定项目中要使用的库
    //'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es
    //2018', 'es2019', 'es2020', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scri
    //pthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.r
    //eflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.st
    //ring', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', '
    //es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.s
    //haredmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable
    //', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'
//    "lib": ["es6", "dom"]


    // outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",

    // 将代码合并为一个文件
    // 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
    //"outFile": "./dist/app.js"

    // 是否对js文件进行编译，默认是false
//    "allowJs": true,
    // 是否检查js代码是否符合语法规范，默认是false
//    "checkJs": true,
    // 是否移除注释
    "removeComments": true,
    // 不生成编译后的文件
    "noEmit": false,


    // 当有错误时不生成编译后的文件
    "noEmitOnError": true,

    // 所有严格检查的总开关
    "strict": true,

    // 用来设置编译后的文件是否使用严格模式，默认false
    "alwaysStrict": true,

    // 不允许隐式的any类型
    "noImplicitAny": true,

    // 不允许不明确类型的this
    "noImplicitThis": true,

    // 严格的检查空值
    "strictNullChecks": true


  }
}