typescript的安装构建，以及一些简单类型定义

1 ts 的安装

npm instal -g typescipt 全局安装

tsc -v 查看版本

1. 手动编译ts

tsc hellworld.ts 指向hellworld.ts 生成一个hellworld.js文件（hellworld.ts必须存在才能执行 tsc hellworld.ts ）

2 自动编译ts

tsc -- init 创建 tsconfig.json文件

在 tsconfig.json文件中配置输出目录 outDir

tsc --w 监听ts自动编译运行（webstorm ）(viskod 是在run runtask typescript 中的 task)

监听后会自动出现一个js文件，把这个文件引入页面就可以实现监听

2 ts 的数据类型

1 布尔类型

 var  flag:boolean =true;
      flag = false;
      flag = 123;    //  hellworld.ts:6:7 - error TS2322: Type '123' is not assignable to type 'boolean'.
console.log(flag);

2 数字类型

 var  num:number = 123;
  num='123';        // hellworld.ts:8:3 - error TS2322: Type '"123"' is not assignable to type 'number'.
console.log(num);

3 字符串类型

var  str:string = '123';
// str='123';
console.log(str);

4 数组类型

 // 第一种
  var  arr:number[]= [1,2 ,3] 
   // var  arr:number[]= [1,'2' ,3]   hellworld.ts:15:25 - error TS2322: Type 'string' is not assignable to type 'number'.
​
// 第二种 （元祖类型也属于是数组类型，数组类型定义的一种，泛型的一种写法，泛型泛指一类型）
 var  arr2:Array<number>= [1,2 ,3] 
​
// 第三种
 var  arr3:any[] = [1,'2',3 , true]   // any 放啥都行

5 枚举类型（enum）

随着计算机的不普及，程序不仅只用于数值计算，还更广泛的应用于处理非数值的数据

例如：性别，月份，星期，颜色，单位，学历，职业，等都不是数值数据

在其他程序语音中，一般用一个数值来代表某一状态，这种处理方式不直观，易读性性差

如果能在程序中用自然语言中相应含义的单词来代表某一状态，则程序就很容易阅读和理解

也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中的含义清楚地单词来表示它的每一个值这种方法称为枚举方法，用这种方法定义的类型叫枚举类型。

/*
    enum 枚举名{  (枚举名首字母必须大写)
       标识符[= 整型常数]，
       标识符[= 整型常数]，
        ...
       标识符[= 整型常数]，
    }
  **/
  enum Flag {success = 1， error = 0}
  let  S:Flag =Flag.success
  let  t:Flag = Flag.error
  console.log(s,t)  // 1,0

  enum Car {bwm , honda, jeep=3,toyota}
  let j:Car=Car.jeep
  let t:Car = Car.toyota
  let b:Car = Car.bwm
  console.log(j)  // 3
  console.log(t)  // 4
  console.log(b)  // 0
  // 注意: 下标从零开始，但是如果其中一个被赋值了，后一个会按照前一个的值来输出，第三个被赋值3，但是它的下标是2，后一个就变成了4，而不是3

6 任意类型（any）

 var box:any = doucument.getElementById('#box');
 // 原生js获取dom对象是用的最多的

7 undefined

//  在ts中如果声明一个类型没有赋值的话就会报错，如果就是不想赋值可以使用undefined
var num：number
 console.log(num);  // 报错
ver numu:nudefined
  console.log(numu);  // 正常
​
// 如果有值就使用number类型，没值就用undefined 可以用这种写法
var num1:number | undefined  

8 void类型（typescript中void表示灭有任何类型一般用于定义方法时没有返回值）

  function get（）:void{
       console.log('我没有返回值') 
   }

9 never类型（代表从来不会出现的值，用到最少的一个类型）

var a:never；
a=(()=>{
  throw new Error('这是一个错误')
})()

10 函数定义

 function get（）:number{  // 这样就会报错返回的类型不对，里边必须返回是数字，其他类型跟这个相似用法
       return '1233'
   }
​
 // 函数表达式
 var fun2=function （）:number{
      return 123;
 }
console.log(fun2())  // 123

11 函数的传参

function getInfo(name:string,age:number):string{
    return '${name} ------ ${age}'
}
console.log(getInfo('boo', 12)) // boo-----12
// 括号里面是定义传递参数的类型，括号后边定义函数返回值的类型（传参必须和定义的类型一致，不然会报错）
​
//  方法的可选参数
 function getInfo(name:string,age?:number):string{
    return  age?'${name} ------ ${age}':'${name} ------ 年龄保密'
}
console.log(getInfo('boo', 18)) // boo-----18
console.log(getInfo('boo')) // boo-----年龄保密
​
// 注意可选参数必须配置到参数的最后面
// 错误写法
 function getInfo(name?:string,age:number):string{
    return  age?'${name} ------ ${age}':'${name} ------ 年龄保密'
}
console.log(getInfo('boo', 18)) // boo-----18

posted on 2020-08-01 00:31 极地极光阅读(184) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

typescript的安装构建，以及一些简单类型定义