TypeScript入门 ｜ 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第6天，入门TypeScript。

一、认识TypeScript

**TypeScript是JavaScript的超集，它不仅是一种可以对类型进行约束的工具。对前端开发者来说，TypeScript强化了「面向接口编程」这一理念。**感兴趣的可访问TS官方文档

二、主要语法介绍及实践：

1、基础数据类型

数字Number，字符串String，对象Object，布尔值Boolean，数组Array，元组Tuple，枚举enum，任意any，undefined，null。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了any，unknown等类型。

let a : string =  'a' 
let b : string = 1  // 类型不对，报错
let c = 2
let d = 'd'

interface Person {
    name: String,
    age: Number,
    sex: '男' | '女'
}

const person1 : Person = {
    name: '张三',
    age: 22,
    sex: '女'
}

const person2 : Person = {
    name: '张三',
    age: 22,
    sex: 'man'  // error
}

因此，采用TS语法，可以规范一些数据的类型，避免一些潜在的‘坑’。

2、高级数据类型

联合/交叉类型，联合类型（|）表示为几个值之一，而交叉类型（&）表示都要满足

// 联合类型
let value:string | number 
value = 12 
console.log("数字为 "+ value) 
value = "string" 
console.log("字符串为 " + value)

// 交叉类型
type Person = Array<{
    name:string 
    } & ({
        height:number,
        weight:number
    } | {
        age:number
        sex:'man' | 'woman'
    })>

const person:Person = [{
    name:'xw',
    height:180,
    weight:80
},{
    name:'xl',
    age:18,
    sex:'man'
    // height:180 // error
}]

这两个类型的语法一个是或“|”，一个是与“&"，也很方便记忆。

3、类的概念

TypeScript 引入了 JavaScript 中没有的“类”概念。下面用一个段代码来说明

class Car { 
    // 字段 
    engine:string; 
    color:string = 'yellow';
 
    // 构造函数 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    display():void { 
        console.log("发动机为 : "+this.engine) 
    } 
}

const car = new Car('v8')

car.display() //"发动机为 : v8" 

car.color = 1

TypeScript中“类”的语法，与Java中有点类似，一个类中有属性，即字段；有其构造器，在new一个对象的时候，调用其构造器，生成该类的实例对象；还有该类的方法定义。与java中不同的是，typescript需要对属性赋初值，否则就会报错。

以上有不足之处，欢迎各位大佬提点~😀😀😀