[ Typescript入门 | 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

TypeScript简介

TypeScript是什么

TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript。

为什么使用TypeScript

• 可以避免经典的错误 'undefined' is not a function.
• 在不严重破坏代码的情况下，重构代码更容易。
• 使大型、复杂的应用程序源码更易阅读。

TypeScript类型

基础类型

//变量声明时，加上一个类型 

const name: string = '123'
const age: number = 234
const isChinese: boolean = true 
const u:undefined = undefined

数组类型

// 写法一
let arr: number[] = [234, 15, 1]
let arr2: boolean[] = [true, false]
// 写法二
let arra: Array<string> = ['234', 'sdges']
let arrb: Array<boolean> = [false, false, true]

对象类型

函数类型

function add(n1: number, n2: number): number {
    return n1 + n2 
} 
let addFn = add(1, 3) 
console.log('当前打印---', addFn) //4

函数类型别名

// 定义一个别名
type AddFn = (num1: number, num2: number) => number
// 使用别名AddFn
const add2: AddFn = (num1, num2) => {
    return num1 + num2
}
console.log('当前打印---add2', add2(10, 20))  //30

void特殊类型，用于标记函数没有返回值

const greet = (msg: string): void => {
    console.log('当前打印---', 'Hello,' + msg)  //Hello,张三
}
greet('张三')

TypeScript补充类型

联合类型

let joint1: (number | string | boolean)[]
joint1 = ['2345', 23423, true]

let joint2: (number | null)
joint2 = null

类型别名

// type用来定义类型别名，类型别名建议大写开头
type Alias1 = (string | number)
type Alias2 = number[]

let a1: Alias1 = '245'
let a2: Alias2 = [234]

高级类型

类型守卫

当遇到条件语句时，会限制变量类型

• 类型判断：typeof
• 实例判断：instanceof
• 属性判断：in
• 字面量相等判断：==，===，!=，!==

function isUser(arg: any): arg is User {
    if (!arg) {
        return false;
    }
    else {
        if (typeof arg.name == 'string' && typeof arg.age == 'number') {
            return true;
        } else {
            return false;
        }
    }
}

工程应用

web

在webpack应用中，使用typescript并在tsconfig.json中配置，可以开发过程中进行ts编译和类型检查。

Node

node环境下，可以使用tsc将ts编译为js。