2021-07-19 typeScript 学习笔记

1、安装

终端输入npm install -g typescript
安装完成后可以用tsc -v检查是否安装成功

2、自动编译

终端输入tsc --init生成tsconfig.json文件，修改文件中的

"outDir": "../javasctipt/",    // 此处为生成的js文件的文件夹

设置好了之后选择终端-运行任务-tsc:监视，之后就可以自动编译了 可以修改文件试试看

3、编写代码

ts中存在类型概念，错误的类型使用在编译时会报错

概念interface相当于规范、规则

类的字段名和接口的字段名要保持一致？（不一致会报错，暂时还没搞懂

ts基础类型中存在string、number、boolen、null、undefined、array、enum、any、void（所以void有什么用？放在一个没有返回值的函数后面 告诉接盘的人？）

默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。(如果报错，可能是tsconfig中严格模式true，改为false即可

"strict": false,

array中有一种元组类型，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同，当访问一个已知索引的元素时，会自动获取类型，如果类型没有这种方法会直接报错

let flag:boolean=true
let str:string = 'test'

let und:undefined = undefined
let nul:null = null
str = und

let arr1:number[] = [1,2,3,4,5]

let arr2:Array<number> = [10,20,30,40] // 泛型的写法

let arr3:[string,number,boolean] = ['test',100,true] // 元组类型
arr3[1].split(',') // error 会报错“类型“number”上不存在属性“split”

enum color{
  Red=10,
  Green,
  Blue
}
let myColor:color = color.Green
console.log(myColor,color.Red,color.Blue)
enum Sex{
  '男' = 1, // 可以输入中文
  女 = 0
}
console.log(Sex['男'],Sex.女) // 控制台输出 1 0

let arr4:any=[1,'test',true]
console.log(arr4[1].split('')) // 编译没有问题，控制台输出 ["t", "e", "s", "t"]
console.log(arr4[0].split('')) // 编译没有问题，但控制台会报错“Uncaught TypeError: arr4[0].split is not a function”

function showMsg(): void {
  console.log('test void') // 控制台输出 test void
}
console.log(showMsg()) // 控制台输出undefined
let vd: void = undefined // 没问题
vd = null // 没问题
vd = 'test' // 编译会报错“不能将类型“"test"”分配给类型“void””

今天先到这吧 下班了 溜了 溜了.....

WechatIMG252.jpeg