打卡ts day01 数据类型，类

一，环境

1 新增的数据类型和部分语法，没有办法在浏览器和node 中执行，需要安装typescript 环境

　　安装：npm i -g typescript

　　成功：tsc -v

2 在浏览器中使用ts

　　tsc xxx.ts  执行后会生成.js 文件

　　tsc 无法加载文件

（1）以管理员身份运行vscode或者powershell

（2）查询Powershell详细策略，在终端执行：get-ExecutionPolicy，显示Restricted（禁止状态）

（3）更新Powershell策略，在终端执行：set-ExecutionPolicy RemoteSigned

（4）再次查询策略状态，在终端执行：get-ExecutionPolicy，显示RemoteSigned

3 工具 ts-node  自动将ts 转 js

　　安装 npm i -g ts-node

　　使用 ts-node 文件名

4 设置vscode 自动编译

　　tsc --init 创建tscconfig.json

　　修改tscconfig.json 文件  设置js 文件夹 “outDir” :"./js/"

　　设置 vscode 监视任务  终端--运行任务

二，数据类型

　　原有类型：string number boolean array null undefin ed Symbol object

　　新增类型：tuple enum枚举 any任意类型 never void

三，详细demo

　　1. 字符串（也可以使用模版字符串）

let aName: string = '英雄'
let bName: string = `gene`
let cName: string = `hello,my name is ${bName}`

　　2.数值

let aNum: number = 123
let hexLiteral: number = 0xf00d; 
let binaryLiteral: number = 0b1010; 
let octalLiteral: number = 0o744;

　　3.布尔（不能用1 和0）

let isDone: boolean = false;

　　4.数组

字符串数组  let arr:string[]=['1','2','3']
数组泛型    let arr1:Array<string>=['1','2','3']

　　5.元组  tuple 规定了元素数量和每个元素类型的数组

let arr2: [string, number] = ['1',2]

  console.log(arr2[1])

　　6.枚举  enum  用一组标识 来代表 数值　　

               枚举项 ：一般英文单词或数字 枚举值：整型数字(可以省略)

enum color1 {red, green, blue}  // 默认0 1 2
enum sex {
     boy = 1,
     girl = 2,
     unknow = 3
}
let userSex:sex = sex.boy
console.log(userSex)

　　7.any 任意类型  一般在获取dom 对象里使用

let arrList: any = [1, '1', false]

　　8. void 代表没有类型 一般用在无返回值的函数

function sayHi(name: string) :void {
  console.log('hi' + name)
}
sayHi('jack')

function sayHello() :string {
  return 'hello'
}
sayHello()

　　9. never 代表不存在的值的类型 常用作 抛出异常 或无限循环的 函数返回类型

           never 类型 是ts 中的底部类型，所有类型都是 never 类型的 父类,   所以 never类型值 可以赋给 任意类型的变量

function test(): never {
  while(true) {
    console.log('无限循环了~~')
  }
}
function test1(): never {
  throw new Error('出错~~') ;
}

　　10.类型推断    如果变量的声明和初始化在同一行，那么可以省略到变量类型的声明

 let 变量名: 变量类型 = 值   可以写成  ===》  let 变量名 = 值
 let age: number = 18   ===>  let age = 18

　　11. 联合类型  表示 取值可以为多种类型中的一种

 let 变量名: 变量类型1 | 变量类型2 = 值
 let prmValue: string | null = prompt('请输入名字');
 console.log('wwww' + prmValue);

　　12.函数

//函数返回值
function sayHello() :string {
  return 'hahah'
}
let aaa: string = sayHello()

//传参
function sayHi(name:string , age: number) :string {
  return 'hi,' + name + ', you age is ' + age
}
let bbb: string = sayHi('jack', 18)
console.log(bbb)

//可选参数  加 ？ 表示可传可不传
function sayHi(name:string , age ?: number) :string {
  return 'hi,' + name + ', you age is ' + age
}
let bbb: string = sayHi('jack')
console.log(bbb)

//默认值
function sayHi(name :string='wiim' , age= 19) :string {
  return 'hi,' + name + ', you age is ' + age
}
let bbb: string = sayHi('jack')
let ccc: string = sayHi( undefined ,21)
console.log(ccc)

//剩余参数  是数组
function add(num1: number, num2: number, ...othernum: number[]) :void {
  // 声明变量接收
  let all: number = num1 + num2;
  // 剩余参数处理
   for(let i of othernum) {
    all += i
   }
   console.log(all)
}
add(1,2,3,4,5)

　　13.类

　　构造函数

function City(name) {
  this.name = name
}
City.prototype.about = function() {
  console.log('这是' + this.name);

}
var c1 = new City('北京')
console.log(c1.name)
c1.about()

　　类

class City {
  // 成员变量
  name: string;
  // 构造函数
  constructor(message: string) {
      this.name = message;
  }
  // 成员方法
  about() {
      return "Hello, " + this.name;
  }
}

let c1 = new City("world");
console.log(c1.name);
console.log(c1.about());

修饰符

public：默认

private：能在声明它的类的外部访问

protected：派生类中仍然可以访问

readonly：只读属性必须在声明时或构造函数里被初始化

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

参数属性：参数属性通过给构造函数参数前面添加一个访问限定符来声明

class Octopus { 

   　　readonly numberOfLegs: number = 8; 

　　　　readonly name: string; 

　　　　constructor (theName: string) { 
　　　　　　this.name = theName; 
　　　　} 
}

==================
class Octopus {
    readonly numberOfLegs: number = 8;

    constructor(readonly name: string) {

    }
}

舍弃了 theName，仅在构造函数里使用 readonly name: string参数来创建和初始化 name成员。 我们把声明和赋值合并至一处

静态属性static

class Grid {
    static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) { }
}

let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

抽象类: 它们一般不会直接被实例化

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('roaming the earch...');
    }
}

localStrage 中使用

let obj: Object = {
  name:'zs',
  age:18
}
let strJson: string = JSON.stringify(obj)
window.localStorage.setItem('obj',strJson)

let strJson1 : string | null = window.localStorage.getItem('obj')

// 类型断言
let obj1 = JSON.parse(strJson as string)