TypeScript01

typescript(01)

Tips:

| 在单页面中（.html）结尾的文件中，typescript不可以直接引用，需要运行tsc xxx.ts之后导入解析之后的js文件

| 在node的环境下运行ts文件，npm i @types/node --save-dev, npm i ts-node --g, 安装完成之后使用ts-node xxx 就可运行ts文件

| 在命令行工具中使用tsc --init，在tsconfig.json中找到tsBuildInfoFile，去掉注释，在VSCODE编辑器中->终端->运行任务->typescript->监视，按下ctrl+s之后会自己生成js文件

typescript数据类型

let str:string = 'hello world' // string类型
let num:number = 1 // number类型 除此之外还可以写二进制，六进制，八进制····
let bool:boolean = true || false // boolean类型
let array:number[] = [1,2,3] // 只能是数字的数组 
let arraytStr:string[] = ['chen', 'hello', 'world'] // 只能是字符串类型的数组
let arrayArray:Array<number> = [1,2,3] // 另外一种定义数组的方式
let arrayArrayStr:Array<string> = ['hello', 'chen'] // 另外一种定义数组的方式
let tupleArray:[string, boolean, number] = ['chen', true, 1] // 在定义元组类型时，数组中的数据类型需要符合前面定义的约定
let value:any = 1 || 'chen' || false || [1,2,3] || [1, 'chen'] // any类型，any类型并没有明显的规定，但使用any类型本省一定程度上失去的了typescript的作用，失去了在编译途中就检查出错误的效果
let item:unknown = true || 1 || 'hello' || null || undefined || [] || {}
let u: undefined = undefined // 定义undefined
let n: null = null // 定义null
// 空值类型
function run():void { console.log('123') }

Tips:

• void也可以定义null和undefined类型
• void和undefined和null最大的区别就是undefined和null是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 string 类型的变量,但是void不行
• any类型与unknown类型一样所有的类型都可以分配给unknown,unknown比any更加严格,需要使用any时可以选择使用unknown

typescript函数

函数声明：

function demo():string {
    return 'chen'
}
// 正确写法
function demo1():string {
    return 1 
}

// 匿名函数
let demo2 = ():string => {
    return 'chen'
}

/*  调用方法  */
demo()
demo2()


// typescript定义方法传参

/* 普通写法与匿名写法 */

function demo3(name:string, age:number, sex:number):string {
    console.log(`${name} -- ${age} -- ${sex}`) // `` 解析${}中的数据
}

demo3('chen', 22, 0)

let demo4 = (name:string, age:number, sex:number):string => {
    console.log(`${name} -- ${age} -- ${sex}`) // `` 解析${}中的数据
}

demo4('chen', 22, 0)

// 没有返回值的方法
function demo5():void { return }

// 方法中的可选参数
// xx?:dataType(数据类型)
function demo6(name:string, age?:number):string {
    console.log(`${name}${age}`)
}

// 默认参数
function demo7(name:string, age:number = 20):string {
    console.log(`${name}${age}`)
}
demo('chen', 30) // 在调用方法进行传参的参数为默认参数

// 剩余参数 ...(三点运算符)接受参数传递过来的值
function demo8(...result:number[]):number {
    let sum = 0
    for (let i = 0; i < result.length; i++) { sum = sum + result[i] }
    return sum
}

demo8(1, 2, 3, 4, 5)

function demo9(a:number, ...result:number[]):number {
    let sum = 0
    for (let i = 0; i < result.length; i++) { sum = sum + result[i] }
    return sum
}
dmeo9(1, 2, 3, 4)

// 函数重载
// java中方法的重载：重载是指两个或者两个以上的同名函数，但是它们参数不同，这是也会出现函数重载的情况
// typescript的重载：通过为同一个函数提供多个函数类型定义来实现多种功能的目的
/**
 * @params ES5
 * @params function css(config) {} 
 * @params function css(config, value) {}
 * @params 下面的方法会替换掉上面的方法
 * @params Tips: 需要注意的是在TS中，传参的类型必须符合自己定义的类型，否则编译会报错
 * **/
function getUser(name:string):string
function getUser(age:number):number

function getUser(str:any):any {
    if(typeof str === 'string') return str
    return str
}

console.log(getUser('CHEN'))
console.log(getUser(20))

function getUserInfo(name:string):string
function getUserInfo(name:string, age:number):string
function getUserInfo(name:any, age?:number):any {
    if(age) return 'name:' + name + 'age:' + age
    return  'name:' + name
}

console.log(getUserInfo('CHEN', 22))
console.log(getUserInfo('Chen'))


// 箭头函数
/**
 * @params this指向问题  箭头函数里this指向上下文
 * @params setTimeout(function(){ console.log('setTimeout') },1000)
 * @params setTimeout(() => { console.log('setTimeout') }, 1000)
 * **/

Tips:

• 在ES5中，实参与行参可以不同，但是在TS中必须一样，如果有不同的则需要配置可选参数
• 可选参数中，可选参数必须写道最后：function name(name:string,age?:number):string{},function name(name?:string, age:number):string {}这样写是不对的
• ES5中没有办法配置默认参数，ES6与TS中可以设置默认参数