ts学习第一篇

全局安装typescript

npm i typescript -g

新建一个项目： npm init -y

新建一个ts文件: 1.ts

生成ts配置文件：tsc --init

运行：

终端–》运行代码–》ts xxx

如果想要右键直接运行代码： cnpm i ts-node -g --》 右键 run code

tsc --watch 编写完代码后立即编译

基础数据类型：

let a = 12

// 数组类型
let array: Number[] = [1, 2, 3]
let array1: Array<Number> = [4, 5, 6]

// 元组类型  数量和类型已知
let array2: [String, Number] = ['sss', 1]

// 普通枚举
enum Gender {
  girl,
  boy
}

console.log(Gender.boy, Gender[1]);
console.log(Gender.girl, Gender[0]);

//常量枚举
const enum Color {
  red, yellow, green
}

let mycolor = [Color.red, Color.yellow, Color.green]

// 任意类型 any 如果一个变量被定义为any,则和js差不多,不需要进行类型检查了
// let root:any = document.getElementById('root')
// root.style.color = 'red'

// let element:(HTMLElement|null) = document.getElementById('root') //HTMLElement 内置类型
// // 非空断言 !
// element!.style.color = 'green'

// null undefined是其他类型的子类型

let b:Number
b = 1
// b = null
// b = undefined

// 如果配置文件"strictNullChecks": true, 则null undefined 不能赋值给其他类型, 如要赋值,写法只能如下:
let x:undefined = undefined

let y:any = null 

let c:Number|null|undefined
c = 1
c = null
c = undefined

// never 代表不会出现的值
//1.作为不会返回的函数的返回值 类型

function error(message:String):never {
  throw new Error('出错了')
  console.log(11);
}

function loop():never{
  while (true) {

  }
  console.log(11);
}

function fn(x:string|number) {
  if(typeof x === 'number') {
    console.log(x);
  } else if (typeof x === 'string') {
    console.log(x);
  } else {
    console.log(x)
  }
}

// void 代表没有任何类型
//函数没有过返回值那么就是void类型
// 
function greeting():void {
  // return null //如果strictNullChecks为false则可以赋值null, 为true则不能赋值
}

//void 可以被赋值为null undefinde; never不能包含任何类型
//返回为void的函数还能正常执行, 返回为never的函数不能正常执行

// Symbol类型
let a1 = Symbol('key')
let a2 = Symbol('key')
console.log(a1===a2);

// BigInt类型
// let max = Number.MAX_SAFE_INTEGER //2**53 -1
// console.log(max+1 === max+2);

let max = BigInt(Number.MAX_SAFE_INTEGER)
console.log(max+ BigInt(1)=== max+BigInt(2));
// console.log(max+1n === max+2n);  //这种写法需要修改配置文件中 "target": "es5"为 "target": "ESNext", 
// number和bigint不兼容
// js里的Number BigInt类型, ts里的number bigint类型

复杂数据类型：

// 类型推导
let uname
uname = 1
uname = 'string'
uname = true

let uname1 = 'string' //此时类型推断uname1为string类型

// 包装对象 wrapper object
// js分为原始类型和对象类型
// 原始类型 如string number ....
let namea = 'milky'
console.log(namea.toUpperCase());
// 内部会自动包装成对象类型,原理如下
console.log(new String(namea).toUpperCase());

let isOk1:boolean = true
let isOk2:boolean = Boolean(1)
// let isOk3:boolean = new Boolean(1)  //报错不能把对象类型赋值给基本类型

// 联合类型 表示取值可以是多种类型中的一种 
let name1: string|number 
console.log(name1!.toString());  //如果没有赋值,只能调用两种类型共有的方法
name1 = 1
console.log(name1.toFixed(2));
name1 = 'milky'
console.log(name1.length);

// 类型断言
let name2: string|number
console.log((name2! as number).toFixed(2));
console.log((name2! as string).length);
// 双重断言
console.log(name2! as any as boolean);

// 字面量类型和类型字面量
// 字面量类型
const up:'Up' = 'Up'
const down:'Down' = 'Down'
const left:'Left' = 'Left'
const right:'Right' = 'Right'
type Direction = 'Up'|'Down'|'Left'|'Right'
// 可以实现枚举的效果
function move(direction:Direction) {
}
move('Down') //类似于枚举 此处传参只能是上面四个方向

//类型字面量
type Person = {
  name:string,
  age:number
}
let a4:Person ={
  name: 'aaa',
  age: 1
}

// 字符串字面量和联合类型的区别
type T1 = '1'|'2'|'3'  //字符串字面量的联合类型 取值限定只能是这几个
type T2 = string|number|boolean //联合类型 取值不限