TypeScript 第一天

什么是ts

在以前我们前端程序员都是使用js进行代码的编写。但是js在表达不同代码单元之间的关系的能力却没有。因此，我们使用js开发成为难以大规模管理的任务。我们编写代码最常见的错误类型就是类型错误，也就是在预期类型不同值的地方使用了某种类型的值。这个错误可能因为很多的原因导致。如简单的单词拼写错误导致、以及无法理解库的API而导致的错误或者是对运行时的行为的错误假设等等。而最流行的解决错误的方法就是TypeScript

 ts的目标就是成为js的静态类型检查器，换句话说就是在代码运行之前运行的工具。能够却把我们的类型编译（类型检查）。由微软开发的自由和开源的编程语言，他是js的超集；他在现有的js的基础上加上了类型检查功能。

ts的使用

打开终端 下载到全局

npm i typescript -g

打开vsCode创建第一个ts文件 

// 1.ts
console.log('hello world!');

切换到当前目录输入 tsc 文件名 就会自动生成一个 以当前文件的文件名命名的js文件

 执行命令node 生成的js文件

node ./1.js

//hello world!

 当然现在看不出来任何区别。我们定义一个函数

  

现在就出现了错误

 把参数传入 不影响执行

基本类型 string | number | boolean

// string
let str = 'hello world';
console.log(str);
// number
let num = 1;
console.log(num);
// boolean
let bool = false;
console.log(bool);

数组

// 数组 两种方式
// type[]
let arr: number[] = [1, 2, 3, 4, 5]
console.log(arr);
// Array<type> -- 泛型
let arr1:Array<number> = [1, 2, 3, 4, 5 ]
console.log(arr1);

特殊类型any

// 表示任何类型的值都是合法的 -- any
let str: any = 'hello world';

函数

// 形参per后面的string 表示参数类型注释 
// : void表示该函数没有返回值 是该函数返回类型注释 
function person(per: string): void {
    console.log('hello', per)
}
person('拉拉')

对象

// lastName?: string表示可以传或不传 如果传入参数 必须是string类型
function person(name:{ fristName: string, lastName?: string}) {
    console.log(name.fristName, name.lastName);
}
person({
    fristName: '小罗'
})
person({
    fristName: '小罗',
    lastName: '小姐'
})

联合类型

// 可以使用两个或多个其他类型组成的类型 多个类型之间用竖线分割
// 下面的他的值可以是number string boolean 和数值类型为number
let per: number | string | boolean | number[] = true
let per1: number | string | boolean | number[] = "true"
let per2: number | string | boolean | number[] = 1
let per3: number | string | boolean | number[] = [1, 2, 3, 4, 5]

类型别名 type

// 可以是对象类型
type Point = {
    x: number
    y: number
}
function getPoint(pt: Point) {
    console.log(pt.x, pt.y);
}
getPoint({
    x: 1,
    y: 2
})
// 也可以是联合类型
type Id = number | string | boolean | number[]

function printId(id: Id) {
    console.log(id);
}
printId(1) 
printId("a") 
printId("true") 
// 也可以是基元类型
type User = string
const p: User = "哈哈"

接口 interface

// 和类型别名类似
interface User {
    name: string
    age: number
    gender: string
}

function person(per: User) {
    console.log(per.name, per.age, per.gender);
}
person({
    name: '张三',
    age: 20,
    gender: '男'
})

// 扩展接口 interface和type区别
interface Animal {
    name: string
}
interface Bear extends Animal {
    honey: boolean
}
const bear: Bear = {
    name: '老虎',
    honey: false
}
console.log(bear.name, bear.honey);

// ------------
type Animal ={
    name: string
}
type Bear = Animal & {
    honey: boolean
}
const bear: Bear = {
    name: '老虎',
    honey: false
}
console.log(bear.name, bear.honey);

// 像现有属性添加字段
interface MyWindow {
    count: number
}
interface MyWindow {
    title: string
}

const my: MyWindow = {  
    count: 1,
    title: 'one'
}
console.log(my.count, my.title);

// 使用type则不能像interface一样操作 添加字段

类型断言

const myCanvas = document.getElementById('main_id') as HTMLCanvasElement
const myCanvas2 = <HTMLCanvasElement>document.getElementById('main_id')

文字类型

const text: 'hello' = 'hello'

const func = (str: string, txt: 'left' | 'center' | 'right') => {
    console.log(str, txt);
}
func('哈哈', 'center')

枚举 enum

enum Num {
    up = 1,
    down,
    left,
    right
}
console.log(Num.up);//1
console.log(Num.down);//2
console.log(Num.left);//3
console.log(Num.right);//4

字符串

enum Color {
    red= 'red',
    green= 'green',
    yellow= 'yellow'
}
console.log(Color.green, Color.red, Color.yellow);

混合使用

enum Color {
    yes= 1,
    no= 'no',
}
console.log(Color.yes, Color.no);