TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统
相信很多前端程序员早就听说typescript这门语言了,而且Vue3和react等主流前端框架也使用了ts编写,因此ts语言必然是未来前端行业的趋势,此专栏会持续更新,欢迎朋友们指出错误,我会及时改正。
优化编译
1. 解决TS和JS的冲突问题 (#生成配置文件)
tsc --init
这个 tsconfig.json 配置文件可以更改很多ts的属性,比如开启或关闭严格模式
还可以指定es版本编译(默认是es2016)也就是 ES7,更改的话可以直接写es6或者其他版本
2.设置入口和出口路径
3.自动编译(在终端运行这个命令,可以让你的ts文件自动编译成js文件,无需手动编译)
tsc --watch
注意
ts会自动判断值的类型,如果值的类型和所设置的类型不一致的话会报错,:后面就是你给一个变量设置的类型
基本类型
// 布尔类型 boolean
let isBoolean: boolean = true
// 数字类型 number
let isNumber: number = 1
// 字符串类型 string
let isString: string = '1'
// es6模板字符串
let names: string = '万叶必出'
let es6String: string = `2.8${names}`
console.log(es6String)
// 数字类型数组 number[]
let numArray: number[] = [1, 2, 3]
// 字符串类型数组 string[]
let strArray: string[] = ['1', '2', '3']
// 数组的第二种写法是使用数组泛型 Array<元素类型>
let arr: Array<number> = [4, 5, 6]
// 任意类型 any(可以设置任何值,相当于关闭了ts的类型检测,非必要不使用)
// 当你只知道一部分数据的类型时,any类型也是有用的
let list: any[] = [1, true, 'free']
list[1] = 100
console.log(list) //[1, 100, 'free']
// 空值类型 void(只能为它赋予undefined 和 null)也可以给没有返回值的函数设置空返回值
let unusable: void = undefined
function warnUser(): void {
alert('This is my warning message')
}
warnUser()
// Null 和 Undefined (默认是任何类型的子类型,也就是可以给任何类型赋值Null 和 Undefined)
// 但是当你指定了--strictNullChecks标记,null和undefined只能赋值给void和它们各自
let u: undefined = undefined
let n: null = null
// never 类型(never类型是任何类型的子类型,也可以赋值给任何类型)
// 没有类型是never的子类型或可以赋值给never类型,即使any也不可以赋值给never。
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message)
}
// 元组类型 Tuple (允许表示一个已知元素数量和类型的数组,各元素的类型不必相同)
let tuple: [string, number]
tuple = ['1', 1]
// 注意: 虽然可以越界添加元素(不建议),但是不能越界访问,越界访问会提示错误。
// tuple.push('2')
// console.log(tuple) //['1', 1, '2']
// 枚举类型 enum 是对js标准数据类型的一个补充,使用枚举类型可以为一组数值赋予友好的名字。
enum str {
red,
green,
blue
}
console.log(str) //{0: 'red', 1: 'green', 2: 'blue', red: 0, green: 1, blue: 2}
// 默认情况下,从0开始为元素编号,你也可以手动指定成员的值
enum strHandle {
'万叶',
'可莉' = 5,
'宵宫'
}
console.log(strHandle) //{0: '万叶', 5: '可莉', 6: '宵宫', 万叶: 0, 可莉: 5, 宵宫: 6}
let str1: strHandle = strHandle.宵宫
console.log(str1) //6
// 类型断言(指定一个参数或变量为某一种类型)
// 第一种写法
let someValue: any = 'this is a string'
let strLength: number = (<string>someValue).length
console.log(strLength) //16
// 第二种写法
let someValue1: any = 'this is a new string'
let strLength1: number = (someValue1 as string).length
console.log(strLength1) //20