TypeScript

TypeScript 是javaScript 的 超级
TypeScript 在js 的基础上 加了很多规范，使其用起来，能像开发java一样，有标准的提示。

TypeScript 编码完成后通过 TSC 工具编译成 javaScript代码 运行，实际很像 java虚拟机将代码编译成 class。一样

安装TypeScript：

1、首先安装 node.js
2、通过 npm i -g typescript 命令安装 TSC 编译器。
3、在通过 tsc -v 检查 版本号，如果显示则安装成功

HelloWorld

创建一个 后缀为 ts 的 文本 helloWorld.ts

编辑运行 ： 最终打印出 Hello ts

简化编译步骤

刚才ts 从编码到运行 需要两步，现在我们建议步骤成一步。
首先安装 ts-node 包：

npm i -g ts-node

安装完成后：
再次编译运行刚才的代码：

ts-node helloWorld.ts

就会直接编译ts 并打印出 结果 （并且 该方式不会再生成 js 文件）

TypeScript 语法：

let num: number = 18
console.log('Hello ts ' + num)
num = 1.2
//其实可以 省略类型： 如果初始化是，提供了数据，就可以明确，变量类型
let bv = 18

let arrIndex: number [] = [1, 2, 3, 4]
//数组可以接受 String 或者 number
let arr: (string | number)[] = ['a', 1, 2, 'b']
//可以接受 字符串 又可以接受 数字数组
let arr1: string | number[] = 'a'
arr1 = [1, 2]

//类型别名； 当觉得类型写的太长，每次写都麻烦，就可以用类型别名，实际意义不大。了解即可
type sn = (string | number);
//使用
let arr2: sn = 2;
arr2 = 'a';


//方法 写法 一
function add(a: number, b: number): number {
    return a + b;
}

//方法 写法 二 (和方法一 效果是一样的，我喜欢第一种写法)
const add1: (a: number, b: number) => number = (a, b) => {
    return a + b;
}
console.log(add(12, 2))
console.log(add1(12, 2))

//返回值不写，也可以返回。
function add0(a: number, b: number) {
    return 'haha:' + (a + b)
}

console.log(add0(2, 2))

//可选参数：
function mySlince(a?: string, b?: string) {
    console.log("可选参数" + a, b)
}

mySlince()
mySlince('1')
mySlince('1', '2')


//对象的申明：
let person: {
    name: string;
    age: number;
    jump():string;
} = {
    name: '张三',
    age: 19,
    jump() {
        return "跳起来"
    },
}
console.log("对象 ",person.jump())

//接口的语法：
interface IPerson {
    name: string;
    age: number;
    run(x:number):string;
}
//实现接口 的对象
let peronC: IPerson = {
    name:'zs',
    age: 18,
    run(x):string {
       return "跑 "+x+' 步';
    }
}
console.log("接口实现：",peronC.run(2))
//类型别名
type IPerson1 = {
    name: string;
    age: number;
    say():string;
}
//可以实现 和 接口类似的结果
let personA: IPerson1 = {
    name:'zs',
    age: 18,
    say() {
        return "my name is "+personA.name+" i have age:"+personA.age
    }
}
console.log("类型实现：",personA.say())
//继承：
interface Point2d {
    x:number;
    y:number;
}
interface Point3D extends Point2d{
    z:number;
}
//使用方式
let point:Point3D = {x:1,y:2,z:3}
console.log("接口继承 ",point)

//元组（tuple）  相当于定长的数组
let position:[number,number] = [12.3123,3.232]

//指定 HtmlElement 具体的类型，就可以在下面点时，可以提示对应的属性。
const  aLine = document.getElementById("link") as HTMLAnchorElement
//方式二
const  aLine1 = document.getElementById("link")
aLine.href
aLine1.href
//关于如何知道标签类型的方式如下：
//F12 在Elements查看元素点击对应元素 在Console 输入 console.dir($0) 回车，在最底部就能看到 元素类型了。

元素类型查看方式
1、第一步选中元素
2、在console.dir($0)
3、拉倒最底部，查看元素