1. 环境安装及运行
2. 基本类型的运用
3. 对象类型的使用
4. 类型注解和类型推断
5. 数组和元组
6. 接口Interface
   1. Interface的基本使用
   2. Interface的扩展
   3. Interface的继承
   4. Interface函数声明方式
   5. Interface函数重载&全局函数

---

运行

安装

npm install -g typescript
npm install -g ts-node
npm install @types/node

运行

ts-node [文件名].ts

---

基本类型的运用

let num : number = 123
let str : string = "hello"
let bool : boolean = false
let empty : null = null
let empty2 : undefind = undefind
let fun = ():viod=>{}

---

对象类型的使用

//对象类型
const teacher :{
    name:string,
    age:number
} = {
    name = "Dell",
    age = 18
}
// 数组类型
const numbers:number[] = [1,2,3,4]
const arrs:(number|string)[] = [1,2,3,"hello"]
// 类对象的使用
class Person{}
const dell:Person = new Person();
// 使用函数
const getTotal:()=>number = ()=>{
    return "123456"
}

---

类型注解和类型推断

• 类型注解：我们来告诉ts变量是什么类型
• 类型推断 : ts 自动分析变量类型 (只能做简单推断)

// 类型注解
let num : number = 123;
let num = 123 
/*上面的两个写写法,在ts会自动推断出 num 为 number 类型*/
function xxx(name,age){}
xxx("龚箭",24)
/*上面xxx的形参,ts不能自动类型,所以我们需要对函数和形参进行类型注解*/
function xxx:(name:string,age:number)=>void = (name,age)=>{}
const xxx = (name:string,ageLnumber):void =>{}

---

数组和元组的使用

• 元组 只能按照类型注解一一对应;类型不匹配或超过长度都不被允许

// 数组的常用方式
const arr: (number | string)[] = [1, '2', 3];
const stringArr: string[] = ['a', 'b', 'c'];
const undefinedArr: undefined[] = [undefined];
// 使用类型别名定义数组对象
type User = {name:string,age:number}
const arr:User[] = [{name:'龚箭',age:24}]
// 使用类的形式定义数组对象
class Teacher {
    name:string,
    age: number
}
const objectArr:Teacher[]=[
    new Teacher(),
    {name:'龚箭',age:24}
]
//元组的使用方式
// 元组 tuple
const teacherInfo: [string, string, number] = ['龚箭', 'web', 18];
// csv
const teacherList: [string, string, number][] = [['龚箭', 'web', 19], ['龚箭', 'web', 26], ['龚箭', 'web', 38]];
​

---

接口Interface

在TS规范推荐优先使用interface

基本用法

interface User{
    name:string,
    age:number
}
const xioajiejie = (params:User):void=>{}

属性的设置

interface User{
    readonly name:string, //表示只读
    age?:number, // 表示非必填项
    [propsName:string]:any, // 表示接收key为字符串类型的任意键值对
}

interface继承

interface User{
    name:string,
    age:number
}
interface Tercher extends User{
    pro:string
}

函数的声明

interface Fun{
    (word:string):string
}
const xxfun:Fun = (word:string)=>{console.log("hello Typescript")}

Interface函数重载&全局函数

// 定义全局函数
interface JqueryInstance{
    html:(html:string) => JqueryInstance
}
// 函数重载
ionterface JQuery {
    (readyFunc:()=>void):void;
    (selector:string):JqueryInstance;
}